代码规范工具 -- eslint

Posted on | In |

安装

  • 在根目录下运行命令 npm install eslint -g
  • 本例中使用eslint进行js代码检验，需引入 gulp-eslint，执行命令 npm install gulp-eslint
  • 在es6环境下使用gulp-eslint，还需要安装 babel-eslint，npm install babel-eslint

使用方法

  • 使用 .eslintrc 文件（支持 JSON 和 YAML 两种语法）对项目进行配置

.eslintrc 放在项目根目录，则会应用到整个项目；如果子目录中也包含 .eslintrc 文件，则子目录会忽略根目录的配置文件，应用该目录中的配置文件。这样可以方便地对不同环境的代码应用不同的规则。

.eslintrc 文件示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
{
  "parser": "babel-eslint",
  "env": {
    "browser": true,
    "node": true,
    "es6": true,
    "jquery": true,
    "jasmine": true
  },
  "extends": "standard",
  "globals": {
    "angular": false,
    "$": false,
    "_": false,
    "Handlebars": false,
    "moment": false,
    "alasql": false,
    "inject": false,
    "getJSONFixture": false
  },
  "rules": {
    "semi": [
      2,
      "always"
    ],
    "space-before-function-paren": [
      2,
      {
        "anonymous": "always",
        "named": "never",
        "asyncArrow": "always"
      }
    ]
  }
}
  • 在 gulp 中添加 eslint 代码校验任务

task 代码块示例：

1
2
3
4
5
6
7
8
var eslint = require('gulp-eslint');
gulp.task('eslint',function(){
  return gulp.src(['src/app/pages/**/*.js','src/app/pages/*.js']) //指定的校验路径
    .pipe(eslint({configFle:"./.eslintrc"})) //使用你的eslint校验文件
    .pipe(eslint.format())
    .pipe(eslint.failAfterError());
});

为 eslint 添加实时监听：

1
2
3
gulp.task('serve', ['eslint','watch'], function () {
  browserSyncInit([path.join(conf.paths.tmp, '/serve'), conf.paths.src]);
});

启动

  • 在命令面板中执行 gulp eslint

运行结果

若代码做有不规范的地方，则会出现如以下的报错：

报错示例