eslint是一个插件化的代码检测工具,可以用于检查常见的代码错误,也可以进行代码风格上的检查,控制代码的质量,提高代码的可读性。在团队协作中,统一的代码风格更具可读性、可维护性。
js Lint工具的介绍:JSLint,JSHint,JSCS和ESLint是四种流行的方案,下面对四种工具做下简单的对比:
- JSLint :出现的最早,即装即用,不可配置和扩展,没有对应的文档;
- JSHint :JSHint被创建为一个可配置的JSLint版本,可以配置每一条规则,提供了良好的文档,确定就是默认的配置过于宽松,很难知道哪个规则导致错误,没有自定义规则支持;
- JSCS :JSCS是一个代码样式检查器。支持自定义reporter,可以使其更容易与其他工具集成。缺点就是只检测编码风格问题。 JSCS并不检测潜在的bug。
- ESlint :它易于扩展,具有大量的自定义规则,并且可以容易的以插件的形式安装更多特性。它提供简洁的输出,但默认包括规则名称,因此你始终知道导致错误消息的规则。缺点就是需要一些配置。
eslint的优点:
1. 灵活:任何规则都可以切换,许多规则都有额外的设置可以调整
2. 极具扩展性,并有许多插件可用
3. 最好的ES6支持,也是唯一支持JSX的工具
4. 支持自定义reporter
全局和本地的安装 npm install eslint -g /npm install eslint -save-dev 这个方法执行后,会问你几个问题,然后自动生成一个 .eslintrc 文件
配置文件的方法:
1. 使用 .eslintrc 文件(支持 JSON 和 YAML 两种语法)
2. 在 package.json 中添加 eslintConfig 配置块
3. 直接在代码文件中定义
(.eslintrc 放在项目根目录,则会应用到整个项目;如果子目录中也包含 .eslintrc 文件,则子目录会忽略根目录的配置文件,应用该目录中的配置文件。这样可以方便地对不同环境的代码应用不同的规则。)
//运行环境的配置
{
"env": {
"browser": true,
"commonjs": true,
"es6": true,
"jquery": true
},
}
如果装了 eslint-plugin-react 为例,安装以后,需要在 ESLint 配置中开启插件:
"plugins": [
"react"
],
设置解析器选项(必须设置这个属性),开启 ESLint JSX 支持(ESLint 内置选项)
"parserOptions": {
"ecmaFeatures": {
"experimentalObjectRestSpread": true,
"jsx": true
},
"sourceType": "module"
},
启用的规则及各自的错误级别
off 或 0:表示不验证规则。
warn 或 1:表示验证规则,当不满足时,给警告。
error 或 2 :表示验证规则,不满足时报错。
"rules": {
"no-new": "off", //new的使用
"new-cap": "off",
"indent": [
"error", //缩进2
2
],
"quotes": [
"error",
"single", //使用单引号
{
"allowTemplateLiterals": true
}
],
"semi": [ //禁止使用分号
"error",
"never"
],
"no-empty": "error", //禁止出现空语句块
"no-console": "off",
"no-unused-vars": "off", //声明后未被使用的变量或参数
"react/jsx-indent": [
"error", //jsx缩进2
2
],
"import/no-webpack-loader-syntax": 0,
"no-proto": 0 //使用__proto__属性
}
}
可以自己配置或采用默认的配置或者在别人的配置规则上修改
"extends": "eslint:recommended",// 启用 eslint 的默认推荐规
"rules": {
// 新增的一些规则
"indent": ["error", 4],
"linebreak-style": ["error", "unix"],
"quotes": ["error", "double"],
"semi": ["error", "always"],
// 覆盖一些规则的配置
"comma-dangle": ["error", "always"],
"no-cond-assign": ["error", "always"],
// 禁用一些规则
"no-console": "off",
}
eslint配合vscode编辑器的使用
文件->首选项->设置
{
"emmet.syntaxProfiles": {
"javascript": "jsx"
}, //支持jsx
"eslint.options": {
"configFile":".eslintrc.json的本地路径"
},
"eslint.autoFixOnSave": true, //保存时自动格式化
}