vuecli结合eslint静态检查

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 <test@runoob.com>
? 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/configuring
module.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-line
alert('foo');

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

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

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