依赖安装
ESLint 全局安装和项目根目录下安装都可以,只是应用起来稍微有些区别;eslint-plugin-react
是兼容React语义的插件;
以下安装选择一种即可,推荐局部安装,插件也根据项目安装;
全局安装
全局安装如下:
局部安装
进入项目根目录下安装:
区别:
在全局安装ESLint,所有的插件必须也全局安装;
在局部安装ESLint,插件不限制在哪里安装;
工具配置
IntelliJ IDEA、 Webstrom的配置一样,如果ESLint package没有自动填充,需要把node_modules中的eslint导入进去;
配置文件
经过以上步骤,随意打开一个.js文件会发现报错;
文件忽略
设置一些忽略检测的文件:
多配置
多配置检测顺序
如果同一目录下有多个配置文件,按以下顺序检测,使用第一个匹配到的文件:
.eslintrc.js
.eslintrc.yaml
.eslintrc.yml
.eslintrc.json
.eslintrc
package.json
多配置处理方式
如果项目下有多个结构层级不同的配置文件,会产生配置级联;
默认情况下,ESLint 会在所有父级目录里寻找配置文件,一直到根目录。
父级目录下的配置将使用于所有子目录,当子目录下的配置文件中的规则与父级配置发生冲突时,使用优先级高的,离的最近的一个优先。
禁止检测父级配置
为了将 ESLint 限制到一个特定的项目,在配置文件里设置 "root": true。
ESLint 一旦发现配置文件中有 "root": true,它就会停止在父级目录中寻找。
內联注释配置
注释以指令(eslint/eslint-env/global/eslint-disable)
开始,接下来是逗号分隔的规则列表;
作用:
会覆盖配置文件里的规则:禁用ESlint | 禁用某条规则 | 调整规则;
参考配置
module.exports = {
"env": {
"browser": true,
"commonjs": true,
"es6": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
"globals":{
"document": true,
"$": true
},
"plugins": [
"react"
],
"rules": {
"react/jsx-uses-react": "error",
"react/jsx-uses-vars": "error",
"indent": [
"error",
"tab",
4
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"double"
],
"semi": [
"error",
"always"
]
},
"settings": {
"react": {
"createClass": "createClass",
"pragma": "React"
}
}
};
使用的规则可在规则页面查看被标记为✓的规则;
注意:.gitignore
中设置node_modules/
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。