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 就能够完成的功用。边写边检测的功用。
