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/