eslint的配置过程

1. 安装eslint

cnpm I eslint -D

2. 初始配置eslint

eslint安装好之后，运行./node_modules/.bin/eslint --init来生成一个eslintrc.js文件

3.安装eslint-loader

我们的项目通过webpack来编译，在编译过程中需要eslint来校验语法规则，所以需要安装eslint-loader

cnpm I eslint-loader -D

4.配置webpack

  rules: [
      // ...
      { 
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          enforce: 'pre',
          include: [resolve('./src')], // 
          options: {
              formatter: require('eslint-friendly-formatter'),
              cache: true,
              fix: true
          }
      }
  ]

5.安装eslint-friendly-formatter

eslint-friendly-formatter 这个模块是为了方便本地规范检查代码。记得运行 cnpm i eslint-friendly-formatter -D 安装上。

6.安装eslint-plugin-vue

Vue.js 的官方 ESLint 插件： eslint-plugin-vue ，这个插件允许 我们使用 ESLint 检测 .vue 文件的 <template> 和 <script>，有助于实时检测代码