插件化的javascript代码开源检测工具。形象来说，就是eslint通过配置一个json对象检测javascript代码规范。一个.eslintrc.js件示例文件
module.exports = {
"root": true,
"parser": 'babel-eslint',
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"sourceType": "module"
},
"globals": {
"$": true,
"require": false
}
"extends": "standard",
// 支持检测vue文件中的script
"plugins": [
"html"
],
// 自定义规则再次添加
"rules": {
// 箭头函数只有一个参数时，可以省略圆括号
"arrow-parens": 0,
// 关闭不必要的转义字符通知
"no-useless-escape": 0
}
}
安装
-
全局安装
npm install eslint -g作为插件化的工具，全局使用eslint时，同时要求对应项目引入的插
件也要全局安装 本地安装
npm install eslint
配置和使用
当我们安装好eslint，我们需要生成一定的配置规则，实际上可以通过两种方式配置规则
可以用 .eslintrc.* 文件或者在 package.json 文件里的
eslintConfig
字段这两种方式进行的整体配置通过在javascript文件注释嵌入，用于个别规则单独配置，一般用于当前位置不满足整体配置，优先级最高
.eslintrc.*文件生成
全局:
eslint --init
本地：
./node_modules/.bin/eslint --init
第三种方式
通过命令行指定配置文件
eslint -c myconfig.json myfile.js
配置的优先级
行内配置 > 命令行 > 配置文件
配置参数说明
1.全局变量:globals
当访问未定义的变量时，no-undef 规则将发出警告。如果你想在一个文件里使用全局变量，推荐你定义这些全局变量，这样 ESLint 就不会发出警告了。你可以使用注释或在配置文件中定义全局变量。
//true允许重写，false不允许
"globals": {
"$": true,
"require": false
}
2.继承extends
流行的配置有eslint-config-airbnb ，eslint-config-standard
eslint --init 命令创建的配置，默认继承推荐的规则。
{
"extends": "eslint:recommended",
}
3.插件plugins
框架流行的插件有eslint-plugin-html， eslint-plugin-react，eslint-plugin-vue，eslint-plugin-html 等
全局安装的 ESLint 只能使用全局安装的插件。本地安装的 ESLint 不仅可以使用本地安装的插件还可以使用全局安装的插件
4.规则rules
三种级别
- "off" 或 0 - 关闭规则
- "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序*
退出) - "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
| 规则 | 含义 | 推荐配置 |
|---|---|---|
| no-cond-assign | 禁止条件表达式中出现赋值操作符 | error |
| no-console | 禁用 console
|
no-console: ["error", { allow: ["warn", "error"] }] |
| no-constant-condition | 禁止在条件中使用常量表达式 | 0 |
| no-debugger | 禁用 debugger
|
process.env.NODE_ENV === 'production' ? 2 : 0 |
| ... | ... | ... |
具体参见中文官网规则配置
vue支持
npm install eslint-plugin-vue
或
npm install eslint-plugin-html
vscode配置支持静态检查
安装eslint插件，设置配置
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue-html",
"vue"
],
"eslint.options": {
"ignorePattern": ["node_modules", "build", "config"]
},
"eslint.workingDirectories": []
项目中检查
在package.json配置命令
"scripts": {
"lint": "eslint --ext .js,.vue src"
},
