ESLint 团队协作规范使用
文章目录
Lint 工具
使用 Lint 工具和代码风格检测工具，则可以辅助编码规范执行，有效控制代码质量 .
WebStorm 等开发环境已经支持这些工具，使用起来很顺手.
然而，在使用 React JSX 语法时，却遇到了问题：JSHint 不支持 JSX 语法
ESLint 简介
ESLint 由 JavaScript 红宝书 作者 Nicholas C. Zakas 编写， 2013 年发布第一个版本.
NCZ 的初衷不是重复造一个轮子，而是在实际需求得不到 JSHint 团队响应 的情况下做出的选择：以可扩展、每条规则独立、不内置编码风格为理念编写一个 lint 工具.
ESLint 特点:
- 默认规则包含所有 JSLint、JSHint 中存在的规则，易迁移；
- 规则可配置性高：可设置「警告」、「错误」两个 error 等级，或者直接禁用；
- 包含代码风格检测的规则（可以丢掉 JSCS 了）；
- 支持插件扩展、自定义规则
使用 ESLint
ESLint 详尽使用参见官方文档，下面罗列的是由 JSHint 迁移到 ESLint 的一些要点:
配置 ESLint:
- 使用 .eslintrc 文件（支持 JSON 和 YAML 两种语法）
- 在 package.json 中添加 eslintConfig 配置块
- 直接在代码文件中定义
.eslintrc 文件示例：
{
"env": {
"browser": true,
},
"globals": {
"angular": true,
},
"rules": {
"camelcase": 2,
"curly": 2,
"brace-style": [2, "1tbs"],
"quotes": [2, "single"],
"semi": [2, "always"],
"space-in-brackets": [2, "never"],
"space-infix-ops": 2,
}
}
.eslintrc 放在项目根目录，则会应用到整个项目；如果子目录中也包含 .eslintrc 文件，则子目录会忽略根目录的配置文件，应用该目录中的配置文件. 这样可以方便地对不同环境的代码应用不同的规则
package.json
{
"name": "mypackage",
"version": "0.0.1",
"eslintConfig": {
"env": {
"browser": true,
"node": true
}
}
}
代码文件内配置的规则会覆盖配置文件里的规则
禁用 ESLint
/* eslint-disable */
var obj = { key: 'value', }; // I don't care about IE8
/* eslint-enable */
禁用一条规则：
/*eslint-disable no-alert */
alert('doing awful things');
/* eslint-enable no-alert */
调整规则
/* eslint no-comma-dangle:1 */
// Make this just a warning, not an error
var obj = { key: 'value', }
工作流集成
1 .ESLint 可以集成到主流的编辑器和构建工具中，以便我们在编写的代码的同时进行 lint
- 编辑器集成
以 WebStorm 为例，只要全局安装 ESLint 或者在项目中依赖中添加 ESLint ，然后在设置里开启 ESLint 即可.其他编辑可以从官方文档中获得获得具体信息.
- 构建系统集成
在 Gulp 中使用：
var gulp = require('gulp');
var eslint = require('gulp-eslint');
gulp.task('lint', function() {
return gulp.src('client/app/**/*.js')
.pipe(eslint())
.pipe(eslint.format());
});
代码风格检测
在团队协作中，统一的代码风格更具可读性、可维护性 .
ESLint 内置了一系列有关代码风格的规则，可以根据团队的编码规范设置.