ESLint 团队协作规范使用

eslint.png

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

  1. 编辑器集成

以 WebStorm 为例,只要全局安装 ESLint 或者在项目中依赖中添加 ESLint ,然后在设置里开启 ESLint 即可.其他编辑可以从官方文档中获得获得具体信息.

  1. 构建系统集成

在 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 内置了一系列有关代码风格的规则,可以根据团队的编码规范设置.

出自:ESLint 团队协作规范使用



回到顶部