eslint学习笔记

时间  2019-12-07
标签 eslint 学习 笔记 繁體版
原文   原文链接

介绍

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

安装和使用

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

本地安装和使用

若是你想让ESLint成为你项目构建系统的一部分，咱们建议在本地安装。你可使用npm：html

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

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

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

以后，你能够在你项目根目录运行ESLint：java

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

全局安装和使用

若是你想使ESLint适用于你全部的项目，咱们建议你全局安装ESLint。你可使用npm：node

$ npm install -g eslint
复制代码

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

$ eslint --init
复制代码

以后，你能够在任何文件或目录运行ESLint：webpack

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

eslintrc文件:

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

  • 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命名，若是执行经过则提交，不然提交失败，并给出具体的提示。

文档连接

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程