eslint学习笔记

介绍

ESLint最初是由Nicholas C. Zakas于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。
因此，ESLint就是一个语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。

安装和使用

先决条件：Node.js（> = 4.x），npm版本2+。
有两种方式安装ESLint：全局安装和本地安装。

本地安装和使用

如果你想让ESLint成为你项目构建系统的一部分，我们建议在本地安装。你可以使用npm：

$ npm install eslint --save-dev
复制代码

紧接着你应该设置一个配置文件：

$ ./node_modules/.bin/eslint --init
复制代码

之后，你可以在你项目根目录运行ESLint：

$ ./node_modules/.bin/eslint yourfile.js
复制代码

全局安装和使用

如果你想使ESLint适用于你所有的项目，我们建议你全局安装ESLint。你可以使用npm：

$ npm install -g eslint
复制代码

紧接着你应该设置一个配置文件：

$ eslint --init
复制代码

之后，你可以在任何文件或目录运行ESLint：

之后，你可以在任何文件或目录运行ESLint：
复制代码

eslintrc文件:

ESLint 支持几种格式的配置文件：

• JavaScript - 使用 .eslintrc.js 然后输出一个配置对象。
• YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。
• JSON - 使用 .eslintrc.json 去定义配置的结构，ESLint 的 JSON 文件允许 JavaScript 风格的注释。
• (弃用) - 使用 .eslintrc，可以使 JSON 也可以是 YAML。
• package.json - 在 package.json 里创建一个 eslintConfig属性，在那里定义你的配置。

如果同一个目录下有多个配置文件，ESLint 只会使用一个。优先级顺序如下：

1. .eslintrc.js
2. .eslintrc.yaml
3. .eslintrc.yml
4. .eslintrc.json
5. .eslintrc
6. package.json

如果项目不同目录下有.eslintrc文件，则利用层叠配置。例如，假如你有以下结构：

your-project
├── .eslintrc.js
├── lib
│ └── source.js
└─┬ tests
  ├── .eslintrc.js
  └── test.js
复制代码

层叠配置使用离要检测的文件最近的 .eslintrc文件作为最高优先级，然后才是父目录里的配置文件，等等。
因此，对于lib/source.js将使用项目根目录里的 .eslintrc.js 文件作为它的配置文件；对于tests/test.js将使用tests/.eslintrc.js和项目根目录的eslintrc.js两个文件的组合作为它的配置文件，并且离的最近的一个优先。

eslint --init运行后，会在你的文件夹下创建.eslintrc文件，
对于我们的项目，可以配置一个独立的 .eslintrc.js 文件，或者直接在 package.json 文件里的 eslintConfig 字段指定配置，ESLint 会查找和自动读取它们,
.eslintrc.js文件内容如：

module.exports = {
  parser: "babel-eslint",//默认使用Espree作为其解析器
  // 解析器配置
  parserOptions: {
    ecmaFeatures: {
      experimentalObjectRestSpread: true,
      legacyDecorators: true,
      jsx: true
    },
    sourceType: "module",
    ecmaVersion: 7
  },
  env: {
    browser: true,
    node: true
  },
  extends: "eslint:recommended",
  globals: {
    document: true,
    window: false
  },
  plugins: [
    "react"
  ],
  rules: {
    semi: "error"
  }
};
复制代码

配置

ESLint被设计为完全可配置的，主要有两种方式来配置ESLint：

1. 内嵌配置：将配置信息以注释的形式写在要检验的文件内
2. 文件配置：利用javascript、json、yml语言的语法，生成名为.eslintrc.*的配置文件，将配置信息写到文件内

文件配置方式

env：指定脚本的运行环境 Environment可以预设好的其他环境的全局变量，如brower、node环境变量、es6环境变量、mocha环境变量等
示例：

'env': {
  'browser': true,
  'commonjs': true,
  'es6': true
}
复制代码

globals：脚本在执行期间访问的额外的全局变量
示例：

globals: {
  vue: true,
  window: true
}
复制代码

rules：启用的规则及其各自的错误级别
示例：

'rules': {
    // no-var
    'no-var': 'error',
    // 要求或禁止 var 声明中的初始化
    'init-declarations': 2,
    // 强制使用单引号
    'quotes': ['error', 'single'],
    // 要求或禁止使用分号而不是 ASI
    'semi': ['error', 'never'],
    // 禁止不必要的分号
    'no-extra-semi': 'error',
    // 强制使用一致的换行风格
    'linebreak-style': ['error', 'unix'],
    // 空格2个
    'indent': ['error', 2, {'SwitchCase': 1}],
    // 指定数组的元素之间要以空格隔开(,后面)， never参数：[ 之前和 ] 之后不能带空格，always参数：[ 之前和 ] 之后必须带空格
    'array-bracket-spacing': [2, 'never'],
    // 在块级作用域外访问块内定义的变量是否报错提示
    'block-scoped-var': 0,
    // if while function 后面的{必须与if在同一行，java风格。
    'brace-style': [2, '1tbs', {'allowSingleLine': true}],
    // 双峰驼命名格式
    'camelcase': 2,
    // 数组和对象键值对最后一个逗号， never参数：不能带末尾的逗号, always参数：必须带末尾的逗号， 
    'comma-dangle': [2, 'never'],
    // 控制逗号前后的空格
    'comma-spacing': [2, {'before': false, 'after': true}],
    // 控制逗号在行尾出现还是在行首出现
    'comma-style': [2, 'last'],
    // 圈复杂度
    'complexity': [2, 9],
    // 以方括号取对象属性时，[ 后面和 ] 前面是否需要空格, 可选参数 never, always
    'computed-property-spacing': [2, 'never'],
    // TODO 关闭 强制方法必须返回值，TypeScript强类型，不配置
    // 'consistent-return': 0
  }
复制代码

extends：一个配置文件可以从基础配置中继承已启用的规则 其属性值可以是：

• 在配置中指定的一个字符串
• 字符串数组：每个配置继承它前面的配置

rules属性可以做下面的任何事情以扩展（或覆盖）规则：

• 启用额外的规则
• 改变继承的规则级别而不改变它的选项：
  • 基础配置："eqeqeq": ["error", "allow-null"]
  • 派生的配置："eqeqeq": "warn"
  • 最后生成的配置："eqeqeq": ["warn", "allow-null"]
• 覆盖基础配置中的规则的选项
  • 基础配置："quotes": ["error", "single", "avoid-escape"]
  • 派生的配置："quotes": ["error", "single"]
  • 最后生成的配置："quotes": ["error", "single"]

值为eslint:recommended"的 extends 属性启用一系列核心规则，这些规则报告一些常见问题，在 规则页面 中被标记为 绿色对号的规则。

值为可共享的配置，即一个npm包，它输出一个配置对象。 extends 属性值可以省略包名的前缀 eslint-config-。
如：eslint-config-standard包

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

则可以用改包的配置。

规则的错误等级

• "off" 或 0 - 关闭规则
• "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
• "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

示例：

'rules': {
    no-cond-assign: ["error", "always"],
}
复制代码

参数说明:

• 参数1：错误等级
• 参数2：处理方式

no-cond-assign：禁止在条件语句中出现赋值操作符，即禁止在 if、for、while 和 do...while 语句中出现模棱两可的赋值操作符。
因为在条件语句中，很容易将一个比较运算符（像 ==）错写成赋值运算符（如 =）
错误示例：

var x;
if (x = 0) {
    var b = 1;
}
function setHeight(someNode) {
    "use strict";
    do {
        someNode.height = "100px";
    } while (someNode = someNode.parentNode);
}
复制代码

行内注释

可以像写代码注释一样，来启用或禁止规则
如：在你的文件中使用以下格式的块注释来临时禁止规则出现警告：

/* eslint-disable */

alert('foo');

/* eslint-enable */
debugger;
console.log('hahaha');
复制代码

可以对指定的规则启用或禁用警告:

/* eslint-disable no-alert, no-console */

alert('foo');
console.log('bar');

/* eslint-enable no-alert, no-console */
console.log('hahaha');
复制代码

如果在整个文件范围内禁止规则出现警告，将 /* eslint-disable */ 块注释放在文件顶部：

/* eslint-disable */

alert('foo');
debugger;
console.log('hahaha');
复制代码

你也可以对整个文件启用或禁用警告:

/* eslint-disable no-alert */

// Disables no-alert for the rest of the file
alert('foo');
复制代码

可以在你的文件中使用以下格式的行注释或块注释在某一特定的行上禁用所有规则：

alert('foo'); // eslint-disable-line

// eslint-disable-next-line
alert('foo');

/* eslint-disable-next-line */
alert('foo');

alert('foo'); /* eslint-disable-line */
复制代码

在某一特定的行上禁用某个指定的规则：

alert('foo'); // eslint-disable-line no-alert

// eslint-disable-next-line no-alert
alert('foo');

alert('foo'); /* eslint-disable-line no-alert */

/* eslint-disable-next-line no-alert */
alert('foo');
复制代码

在某个特定的行上禁用多个规则：

alert('foo'); // eslint-disable-line no-alert, quotes, semi

// eslint-disable-next-line no-alert, quotes, semi
alert('foo');

alert('foo'); /* eslint-disable-line no-alert, quotes, semi */

/* eslint-disable-next-line no-alert, quotes, semi */
alert('foo');
复制代码

vscode中使用

按照上述配置好，并不能让我们写代码的时候在编辑器中看到提醒，因此需安装并启用eslint扩展应用

例如：设置在使用JSX时，没有引入React，错误级别为2（即是错误），则会在vscode中标红提示错误，一眼就能看出来问题所在。

react 项目配置 eslint

需安装 eslint-plugin-react

在项目中预处理错误（eslint-loader）

希望在项目开发的过程当中，每次修改代码，它都能够自动进行ESLint的检查。因为在我们改代码的过程中去做一次检查，如果有错误，我们就能够很快地去定位到这个问题，由于是我们刚刚改过的，因此立马把它修复掉就OK了。这就避免了我们每次改了一大堆代码之后，要去提交的时候，再去跑一次ESLint。

这个时候需要在命令行中安装东西了 $ npm i eslint-loader babel-eslint --save-dev

执行完上述操作后，我们需要跳转到.eslintrc文件里面配置一下：

{
  parser: "babel-eslint"
}
复制代码

为什么我们要配置parser呢？因为我们的项目是基于webpack的，项目里的代码都是需要经过babel去处理的。babel处理的这种语法可能对ESLint不是特别的支持，然后我们使用loader处理ESLint的时候就会出现一些问题。所以一般来说，我们用webpack和babel来进行开发的项目，都会指定它的parser使用babel-eslint。

然后在webpack的配置文件的module中加入一个对象：

{
    loaders: [
        //在babel-loader处理js、jsx文件之前对代码进行一次检测
        {
            test: /\.js[x]?$/,
            loader: "eslint-loader",
            enforce:'pre',
            exclude: /(node_modules|bower_components)/
        },
        //babel-loader处理js或jsx文件
        {
            test: /\.js[x]?$/,
            exclude: /(node_modules|bower_components)/,
            loader: 'babel-loader'
        }
    ]
}
复制代码

enforce:'pre'预处理的作用：在babel-loader处理js或jsx文件之前对代码进行一次检测，如果代码检测不通过，babel-loader就不需要处理了，直接报错。

stylelint

stylelint是一个强大的现代 CSS 检测器，可以让开发者在样式表中遵循一致的约定和避免错误。其拥有超过150条的规则，包括捕捉错误、最佳实践、控制可以使用的语言特性和强制代码风格规范。它支持最新的CSS语法，并且灵活可配置。支持less、sass。

使用

1. 编辑器中使用，以VS Code为例

安装相应的扩展：stylelint，并启用，在根目录下建.stylelintrc配置文件即可
.stylelintrc如：

{
  "extends": "stylelint-config-standard",//需安装此包，继承一些规范，不用自己一个一个定义了
  "rules": {
    "block-no-empty": null,
    "color-no-invalid-hex": true,
    "comment-empty-line-before": [ "always", {
      "ignore": ["stylelint-commands", "after-comment"]
    } ],
    "declaration-colon-space-after": "always",
    "max-empty-lines": 2,
    "rule-empty-line-before": [ "always", {
      "except": ["first-nested"],
      "ignore": ["after-comment"]
    } ],
    "color-hex-case": "lower",
    "unit-whitelist": ["px", "em", "rem", "%", "s"]
  }
}
复制代码

如果使用的不合规范会立即显示出来，且提示不符合哪条规则，如：

2. 命令行中使用

需安装stylelint npm包，两种安装方式

• 本地安装

npm install stylelint --save-dev
复制代码

• 全局安装

npm install stylelint -g
复制代码

使用方式

stylelint "foo/*.css" //对foo文件下的所有css文件进行检测
stylelint **/*.less //对根目录下的所有less文件进行检测
复制代码

建议两个配合使用，编辑器中可以直接看到标红错误，而命令行的可以在pre-commit中配置，提交前检测，若不合规范则不允许提交。

pre-commit配置及使用

pre-commit是git的钩子，顾名思义就是在提交前运行，如果程序员gg/mm没有遵守团队的代码规范，不符合风格就会提交失败，并给出对应的提示。

安装

npm install --save-dev pre-commit
复制代码

配置

在package.json加如下配置

"scripts": {
    "precommit-msg": "echo 'Pre-commit checks.........' && exit 0",
    "lint": "eslint --ext .js --ext .jsx src",
    "lesslint": "stylelint **/*.less"
  },
"pre-commit": ["precommit-msg", "lint"]
复制代码

在commit时先执行配置的precommit-msg、lint和lesslint命名，如果执行通过则提交，否则提交失败，并给出具体的提示。

文档链接

• eslint英文版
• eslint中文版
• stylelint
• csslint
• htmlHint

转载于:https://juejin.im/post/5be237e36fb9a049fa0f3b6d