ESLint 静态代码检查

时间 2019-11-17

原文原文链接

ESLint简介

ESLint是一个用来识别 ECMAScript 而且按照规则给出报告的代码检测工具，使用它能够避免低级错误和统一代码的风格。若是每次在代码提交以前都进行一次eslint代码检查，就不会由于某个字段未定义为undefined或null这样的错误而致使服务崩溃，能够有效的控制项目代码的质量。html

在许多方面，它和 JSLint、JSHint 类似，除了少数的例外：vue

ESLint 使用 Espree 解析 JavaScript。
ESLint 使用 AST 去分析代码中的模式。
ESLint 是彻底插件化的。每个规则都是一个插件而且你能够在运行时添加更多的规则。

使用

安装

ESLint 支持多种安装方式，能够经过 npm 来安装，也能够在 webpack(eslint-loader) 和 Gulp.js(gulp-eslint) 中使用。node

全局安装

npm i -g eslint
复制代码

局部安装（推荐）

npm i -D eslint
复制代码

初始化

安装完毕后，接下来新建一个配置文件.eslintrc.js，或者使用以下的命令行来自动生成，命令以下：webpack

eslint --init
复制代码

配置

注意：若是你以前使用的版本低于 1.0.0，请查看迁移指南。运行 eslint --init 以后，.eslintrc 文件会在你的文件夹中自动建立。文件的内容大致以下：es6

{
    "env": {
        "es6": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "sourceType": "script"
    },
    "rules": {
        "no-console": 0,
        "no-unused-vars": "error",
        "no-use-before-define": "error",
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "always"
        ],
        "curly": ["error", "all"],
        "default-case": "error",
        "no-else-return": "error",
        "no-empty-function": "error",
        "no-implicit-coercion": "error",
        "no-invalid-this": "error",
        "no-loop-func": "error",
        "no-multi-spaces": "error",
        "no-new-func": "error",
        "no-useless-return": "error",
        "global-require": "error",
        "no-path-concat": "error",
        "no-sync": "error",
        "array-bracket-spacing": [
            "error",
            "never" 
        ],
        "block-spacing": [
            "error",
            "always"
        ],
        "brace-style": [
            "error",
            "1tbs"
        ],
        "camelcase": "error",
        "comma-dangle": [
            "error",
            "always-multiline"
        ],
        "comma-spacing": [
            "error",
            { "before": false, "after": true }
        ],
        "comma-style": [
            "error",
            "last"
        ],
        "key-spacing": [
            "error", 
            { "beforeColon": false, "afterColon": true }
        ],
        "lines-around-comment": [
            "error",
            { "beforeBlockComment": true }
        ],
        "newline-after-var": [
            "error",
            "always"
        ],
        "newline-before-return": "error",
        "no-multi-assign": "error",
        "max-params": [1, 3],
        "new-cap": [
            "error",
            {
                "newIsCap": true,
                "capIsNew": false
            }
        ],
        "no-multiple-empty-lines": [
            "error",
            {
                "max": 2
            }
        ],
        "no-shadow-restricted-names": "error",
        "no-undef-init": "error",
        "keyword-spacing": "error",
        "space-before-blocks": [
            "error",
            "always"
        ]
    }
}

复制代码

ESlint支持的可配置信息主要分为3类：web

Environments：Javascript 脚步将要运行在什么环境中（如：nodejs，browser，commonjs等）,ESlint支持的全部环境均可以在官网查到。
Globals：执行代码时脚步须要访问的额外全局变量。
Rules：开启某些规则，也能够设置规则的等级。

检测规则

接下来，能够在配置文件中设置一些规则。ESLint规则的三种级别：npm

"off" 或者 0：关闭规则。
"warn" 或者 1：打开规则，而且做为一个警告（不影响exit code）。
"error" 或者 2：打开规则，而且做为一个错误（exit code将会是1）。

例如，下面的一些配置规则：json

"console":"off" 禁用 console。
"no-unused-vars":2 禁止出现未使用过的变量。
"no-use-before-define":2 不容许在变量定义以前使用它们。
"linebreak-style":[2, "unix"] 强制使用一致的换行风格。
"quotes": ["error", "single"] 强制使用一致的单引号。
"semi":["error", "always"] 控制行尾部分号。
"curly":["error", "all"] 强制全部控制语句使用一致的括号风格。
"default-case": "error" switch 语句强制 default 分支，也可添加 // no default 注释取消这次警告。
"no-else-return":"error" 禁止 if 语句中有 return 以后有 else。
"no-implicit-coercion": "error" 禁止出现空函数.若是一个函数包含了一条注释，它将不会被认为有问题。
"no-invalid-this": "error" 禁止 this 关键字出如今类和类对象以外。
"no-loop-func":"error" 禁止在循环中出现 function 声明和表达式。
"no-multi-spaces":"error" 禁止使用多个空格。
"no-new-func":"error" 禁止对空Function 对象使用 new 操做符。
"no-useless-return":"error" 禁止没有任何内容的return;
"global-require": "error" 要求 require() 出如今顶层模块做用域中。
"no-path-concat": "error" 禁止对 dirname 和 filename进行字符串链接
"no-sync": "error" 禁用同步方法。
"array-bracket-spacing": ["error", "never"] 指定数组的元素之间要以空格隔开(, 后面)， never参数：[ 以前和 ] 以后不能带空格，always参数：[ 以前和 ] 以后必须带空格。
"block-spacing": ["error", "always"] 禁止或强制在单行代码块中使用空格(禁用)。
"brace-style": ["error", "1tbs"]
"camelcase": "error" 强制驼峰法命名。
"comma-dangle": ["error", "always-multiline"] 数组和对象键值对最后一个逗号， never参数：不能带末尾的逗号, always参数：必须带末尾的逗,always-multiline：多行模式必须带逗号，单行模式不能带逗号号。
"comma-spacing": ["error", { "before": false, "after": true }] 控制逗号先后的空格。
"comma-style": ["error", "last"] 控制逗号在行尾出现仍是在行首出现 (默认行尾)。
"key-spacing": ["error", { "beforeColon": false, "afterColon": true }] 该规则规定了在对象字面量语法中，key和value之间的空白，冒号前不要空格，冒号后面须要一个空格。
"lines-around-comment": ["error", { "beforeBlockComment": true }] 要求在注释周围有空行 ( 要求在块级注释以前有一空行)。
"newline-after-var": ["error", "always"] 要求或禁止 var 声明语句后有一行空行。
"newline-before-return": "error" 要求 return 语句以前有一空行。
"no-multi-assign": "error" 连接变量的赋值可能会致使意外的结果并难以阅读，不容许在单个语句中使用多个分配。
"max-params": [1, 3] function 定义中最多容许的参数数量。
"new-cap": ["error", { "newIsCap": true, "capIsNew": false}] 构造函数首字母大写。
"no-multiple-empty-lines": ["error", {"max": 2}] 空行不可以超过2行。
"no-shadow-restricted-names": "error" 禁止对一些关键字或者保留字进行赋值操做，好比NaN、Infinity、undefined、eval、arguments等。
"no-undef-init": "error" 禁止把undefined赋值给一个变量。
"keyword-spacing": "error" keyword 先后须要空格。
"space-before-blocks": ["error","always"] 强制在块以前使用一致的空格。

忽略检测

既然有检测的规则，那么必然有忽略检测的配置。要新增忽略检测的规则，首先要在项目根目录建立一个 .eslintignore 文件告诉 ESLint 去忽略掉不须要检测的文件或者目录。gulp

或者经过package.json文件设置须要忽略检测的对象，例如：数组

{
  "name": "my_project",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": ""
  },
  "eslintConfig": { // 也可配置eslint
    "env": {
      "es6": true,
      "node": true
    }
  },
  "eslintIgnore": ["test.js"]
}
复制代码

Gulp中使用ESLint

除了npm方式以外，ESLint还支持Gulp插件方式使用，使用以前须要先安装插件。

npm install gulp-eslint
复制代码

若是要使用gulp-eslint进行eslint规则的校验，可使用下面的方式：

var gulp = require('gulp');
var eslint = require('gulp-eslint');
gulp.task('lint',function(){
    return gulp.src(['app/**/*.js']) //指定的校验路径
        .pipe(eslint({configFle:"./.eslintrc"})) //使用你的eslint校验文件
        .pipe(eslint.format())
});
复制代码

ESLint技巧

eslint-config-standard

eslint-config-standard是一个标准的ESLint规则检测库，所以只须要安装这个库就能够省去配置ESLint规则。

而后，在项目的根目录里面手动建立一个.eslintrc文件，而后在里面添加以下代码：

{
  "extends": "standard"
}
复制代码

执行完以上步骤，就可使用ESLint这个工具来校验项目里的代码。

在Vue项目里，.vue文件写的是相似于html的格式，不是标准的JavaScript文件，ESLint没法直接识别.vue文件里的JavaScript代码，那么这个时候咱们须要去安装一个工具，安装命令以下：

npm i eslint-plugin-html -D
复制代码

由于在vue文件里面写JavaScript代码也是写在script标签里面的，这个插件的做用就是识别一个文件里面script标签里面的JS代码，官方也是这么推荐的。因此咱们要在.eslintrc文件里面新增一段脚本：

{
  "extends": "standard",
  "plugins": [
    "html"
  ]
}

复制代码

执行完以上步骤后，咱们跳转到package.json文件里面的scripts里面新增一条命令：

"lint": "eslint --ext .js --ext .jsx --ext .vue src/"

复制代码

在上面的脚本命令中，ext后面须要写上指定检测文件的后缀，如.js、.jsx、 .vue等，紧接着后面要写上一个参数，这个参数就是咱们要检测哪一个目录下面的文件，通常项目文件都在src下面，因此在后面写上src/就好。

如今咱们就能够到terminal里面输入$ npm run lint，来检验项目里的代码是否符合ESLint的规则。

ESLint自动修复报错

通常来讲，当咱们使用命令“npm run lint”检测JavaScript的时候，基本上都会出现很是的多报错，基本上就是满屏的error和warning。

在报这么多的错误以后，若是咱们一条一条地去修复，就会变的很是的麻烦，相信刚接触ESLint的童鞋都深有体会。其实这些错误均可以让ESLint帮助咱们自动地修复。具体来讲，只须要在package.json文件里面的scripts里面新增一条命令便可：

"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"

复制代码

当咱们再去terminal中执行命令：$ npm run lint-fix，你会发现没有那么多飘红的报错，也没有满屏的error和warning了。

固然，还有一种万能方法，就是在报错的JS文件中第一行写上/* eslint-disable */，具体能够参考Command line Interface

eslint-loader

有时候，咱们但愿在项目开发的过程中，每次修改代码都可以自动进行ESLint的检查。由于在咱们改代码的过程当中去作一次检查，若是有错误，咱们就可以很快地去定位到问题并解决问题。这时候咱们能够借助eslint-loader插件。

npm i eslint-loader babel-eslint -D
复制代码

执行完安装操做后，咱们还须要在.eslintrc文件里面配置以下脚本：

{
  "extends": "standard",
  "plugins": [
    "html"
  ],
  "parser": "babel-eslint"
}

复制代码

为何咱们要配置parser呢？由于咱们的项目是基于webpack的，项目里的代码都是须要通过babel去处理的。babel处理的这种语法可能对ESLint不是特别的支持，而后咱们使用loader处理ESLint的时候就会出现一些问题。因此通常来讲，咱们用webpack和babel来进行开发的项目，都会指定它的parser使用babel-eslint。

同时，使用webpack方式构建的项目，还须要在webpack.config.base.js的module下面的rules里面添加一个以下脚本：

rules: [
  {
    test: /\.(vue|js|jsx)$/,
    loader: 'eslint-loader',
    exclude: /node_modules/,
    enforce: 'pre'
  },
  ......
]

复制代码

而后咱们就可使用命令 $ npm run dev就能够在开发环境进行ESLint错误检测。

附： cn.eslint.org/ www.imooc.com/article/322…