eslint总结
1、初始命令
eslint初始命令如下:
(1) eslint --init： 生成.eslintrc.js文件
(2) eslint src --fix: 自动修复错误。但是只能修复基础的不影响代码逻辑的错误。其他像no-unused-vars这种错误只能手动修改
2、常用属性
eslint的常用属性： env、extends、parserOptions、plugins、rules等。
parserOptions
EsLint通过parserOptions，允许指定校验的ecma的版本，及ecma的一些特性
"parserOptions": {
"ecmaVersion": 6,
"sourceType": "module",
"ecmaFeatures": {
"jsx": true
}
},parser
指定解析器
EsLint默认使用esprima做脚本解析，在使用es6代码中，需要改成babel-eslint。
babel-eslint 解析器是一种使用频率很高的解析器，因为现在很多公司的很多项目目前都使用了es6，为了兼容性考虑基本都使用babel插件对代码进行编译。而用babel编译后的代码使用 babel-eslint 这款解析器可以避免不必要的麻烦。
babel-eslint 安装命令：
npm install --save-dev babel-eslint
在 .eslintrc.js 配置文件中添加如下配置项代码：
parser: 'babel-eslint',
env
Environment可以预设好的其他环境的全局变量，如brower、node环境变量、es6环境变量、mocha环境变量等
"env": {
"browser": true,
"node": true
}如果想使用插件中的环境变量，你可以使用plugins指定：
{
"plugins": ["example"],
"env": {
"example/custom": true
}
}plugins
用来引用第三方插件
"plugins": [
"plugin1",
"eslint-plugin-plugin2"
]rules:
设置具体的配置。第一个是错误级别：
"off" or 0 - 关闭规则
"warn" or 1 - 将规则视为一个警告（不会影响退出码）
"error" or 2 - 将规则视为一个错误 (退出码为1)
{
"rules": {
"semi": ["error", "always"],
"quotes": ["error", "double"]
}
}extends
可以从基础配置中继承已启用的规则。eslint官方提供了3种预安装包：
（1）eslint-config-google
npm install eslint eslint-config-google
(2)eslint-config-airbnb
Airbnb标准,它依赖eslint, eslint-plugin-import, eslint-plugin-react, and eslint-plugin-jsx-a11y等插件。
执行以下命令查看所依赖的各个版本：
npm info "eslint-config-airbnb@latest" peerDependencies
知道依赖后，安装依赖包。
eslint-config-airbnb-base 包含了针对 ES6+ 代码的检查
eslint-config-airbnb 在 eslint-config-airbnb-base 的基础上增加了对 react 和 jsx 语法的检查。
（3）eslint-config-standard
"extends": "standard",
global
指定全局变量。true代表允许重写、false代表不允许重写
"globals": {
"var1": true,
"var2": false
}3、代码间的使用
eslint的注释
可以在代码间加注释，设置是否启用eslint
var a = 1; //eslint-disable-line 设置该行不启用 //eslint-disable-next-line 设置下行不启用 var a = 1 /* eslint-disable */ ... /* eslint-enable */ 设置代码段不启用
4、发布自己的配置
eslint允许发布自己设定的配置。被引用进来即可使用。
（1）my-config.js
module.exports = {
extends: 'eslint:recommended',
env: {
node: true,
es6: true
},
rules: {
'no-console': 'off',
'indent': [ 'error', 4 ],
'quotes': [ 'error', 'single' ]
}
};(2) package.json
{
"name": "eslint-config-my",
"version": "0.0.1",
"main":"my-config.js"
}为了能让 eslint 正确载入这个模块，我们需要执行 npm link 将这个模块链接到本地全局位置：
npm link eslint-config-my
然后将文件 .eslintrc.js 改成：
module.exports = {
extends: 'my', //在 extends 中， eslint-config-my 可简写为 my
};代码说明
module.exports = {
// 默认情况下，ESLint会在所有父级组件中寻找配置文件，一直到根目录。ESLint一旦发现配置文件中有 "root": true，它就会停止在父级目录中寻找。
root: true,
// 对Babel解析器的包装使其与 ESLint 兼容。
parser: 'babel-eslint',
parserOptions: {
// 代码是 ECMAScript 模块
sourceType: 'module'
},
env: {
// 预定义的全局变量，这里是浏览器环境
browser: true,
},
// 扩展一个流行的风格指南，即 eslint-config-standard
// https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
extends: 'standard',
// required to lint *.vue files
plugins: [
// 此插件用来识别.html 和 .vue文件中的js代码
'html',
// standard风格的依赖包
"standard",
// standard风格的依赖包
"promise"
],
// 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
}
}常用插件
1、eslint-friendly-formatter 可以让eslint的错误信息出现在终端上
通过webpack配置使用如下：
{
test: /\.(js|vue)$/,
loader: 'eslint-loader',
enforce: 'pre',
include: [resolve('src'), resolve('test')],
options: {
formatter: require('eslint-friendly-formatter')
}
},2、eslint-plugin-html
这个插件将会提醒模块脚本之间模拟浏览器共享全局变量的行为，因为这不适用于模块脚本。
这个插件也可以扩展文件，如：.vue，.jsx
.eslintrc.js中，添加如下配置项：
settings: {
'html/html-extensions': ['.html', '.vue'],
'html/indent': '+2',
},而对于这种用 eslint-pulgin-html 扩展的的文件我们可以使用 eslint --ext .html,.vue src 进行检测，如果想要在开发中边写边检测，我们可以使用相应文件的loader进行处理。然后执行 npm run dev 就可以实现的功能。边写边检测的功能。