vuecli结合eslint静态检查

搭建vue项目开发可能选择vue-cli项目脚手架快速创建vue项目。(https://github.com/vuejs/vue-cli)

安装vue-cli

npm install -g vue-cli

这种方式安装比较慢，可以用国内淘宝镜像安装,cnpm,安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

继续安装

cnpm install -g vue-cli

vue-cli脚手架自带webpack打包工具，创建一个基于webpack模板的新项目

vue init webpack my-project

这里需要进行一些配置，默认回车即可

This will install Vue 2.x version of the template.For Vue 1.x use: vue init webpack#1.0 my-project? Project name my-project? Project description A Vue.js project? Author runoob 
    
     ? Vue build standalone? Use ESLint to lint your code? Yes? Pick an ESLint preset Standard? Setup unit tests with Karma + Mocha? Yes? Setup e2e tests with Nightwatch? Yes   vue-cli · Generated "my-project".   To get started:        cd my-project     npm install     npm run dev      Documentation can be found at https://vuejs-templates.github.io/webpack
    

配置esLint

eslint配置方式主要有两种：

1. 注释配置：使用js注释来直接嵌入ESlint配置信息到一个文件里
2. 配置文件：使用一个js，JSON或者YAML文件来给整个目录和它的子目录指定配置信息。这些配置可以写成一个文件名.eslintrc.*的文件或者package.json文件里的eslintConfig项里
   这两种方式ESlint都会自动寻找然后读取，也可以直接在命令行内指定一个配置文件。

一般需要我们去配置项包括：

1. 环境：你的脚本会在哪种环境下运行。每个环境带来了一组特定的预定义的全局变量。
2. 全局变量：脚本运行期间会访问额外的全局变量。
3. 规则：使用那些规则，并且规则的等级是多少。

vue-cli脚手架安装完成后，主要有几个地方配置了eslint。

1，项目创建后项目中就会出现.eslintignore 和.eslintrc.js两个文件

.eslintignore类似Git的.gitignore用来配置不需要Eslint检查的文件

.eslintrc.js主要用来配置具体规则

.eslintignore文件

添加不启动静态检查的文件

build/*.js // 忽略build文件夹下所有的脚本文件config/*.js

.eslintrc.js文件

// https://eslint.org/docs/user-guide/configuringmodule.exports = {  root: true,  parser: 'babel-eslint', // 解析器为babel-eslint,可在package.json文件中配置  parserOptions: {    sourceType: 'module'  },  env: { //环境配置为浏览器    browser: true,  },  // https://github.com/standard/standard/blob/master/docs/RULES-en.md  extends: 'standard', //文件配置继承standard规则，具体访问连接  // required to lint *.vue files  plugins: [    'html'  ],  // add your custom rules here  'rules': { // 添加自定义规则    // allow paren-less arrow functions    'arrow-parens': 0,    // allow async-await    'generator-star-spacing': 0,    // allow debugger during development    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0  }}

说明： 在rules中每个配置项后面的第一个值为eslint规则的错误等级

• "off" 或 0 （关闭这条规则）
• "warn" 或 1 （违反规则会警告，不影响项目运行）
• "error" 或 2 （违反规则会报错，终止项目运行）

2 在package.json文件中配置文件

"script" : {    "lint": "eslint --ext .js, .vue src"}"devDenpendencies" : {    "babel-eslint": "^7.1.1",    // 更多eslint文件    ...}

3 在webpack配置文件中

webpack.base.conf.js

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

有时候代码里有些特殊情况需要我们在某一行或者某几行关闭ESLint检测，可以使用注释：

1，注释关闭所有规则

/* eslint-disable */alert('foo');/* eslint-enable */

2，关闭某一行的所有规则

alert('foo'); // eslint-disable-line// eslint-disable-next-linealert('foo');

3，在某一行关闭指定的规则

alert('foo'); // eslint-disable-line no-alert// eslint-disable-next-line no-alertalert('foo');

常用规则：

规则的细节请到ESLint官方网站查看 http://eslint.org/docs/rules/