如何使用ESlint

Posted 2020-06-27 翻页工

参考链接：https://github.com/eslint/eslint

一、ESLint跟JSLint和JSHint类似，但有以下区别：

1.使用Espree进行js解析(parse)

2.用AST抽象语法树去识别(evaluate)代码中的模式

3.每个规则都是独立的插件

二、安装

全局安装：

npm install -g eslint

三、使用

如果是第一次使用，eslint --init 命令帮你完成初始化，生成.eslintrc文件

然后eslint test.js test2.js

四、配置

{
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}

提示有三个level：

• "off" or 0 - 关闭这个规则校验
• "warn" or 1 - 开启这个规则校验，但只是提醒，不会退出
• "error" or 2 - 开启这个规则校验，并退出

五、常见问题

1.为什么不用jslint

创建eslint是因为急需插件化的校验工具

2.ESLint跟JSHint、JSCS的比较

ESLint比JSlint要慢2~3倍，因为ESLint在识别代码前需要用Espress构建AST,而JSHint在解析的时候就会识别代码。虽然慢些，但不至于成为痛点。

ESLint比JSCS快，（as ESLint uses a single-pass traversal for analysis whereas JSCS using a querying model.）

3.ESLint仅仅是校验还是也检查代码风格

都有。ESLint does both traditional linting (looking for problematic patterns) and style checking (enforcement of conventions). You can use it for both.

4.支持es6吗？

支持。参考配置http://eslint.org/docs/user-guide/configuring

5.支持JSX？

支持，但并不表示支持React。（Yes, ESLint natively supports parsing JSX syntax (this must be enabled in configuration.). Please note that supporting JSX syntax is not the same as supporting React. React applies specific semantics to JSX syntax that ESLint doesn‘t recognize. We recommend using eslint-plugin-react if you are using React and want React semantics.）

5.支持es7吗？

本身不支持，可以使用babel-eslint

六、下面详细介绍下配置，地址http://eslint.org/docs/user-guide/configuring

1.配置ESLint

主要有两种方法配置

（1）配置注释，直接嵌入到js文件中

（2）配置文件，使用js、json或者yaml文件来为整个目录及其子目录配置。形式有：.eslintrc.*文件，或者在package.json中配置eslintConfig字段，或者在命令行里配置。

配置分几个方面：

（1）环境（env）：设置你的脚本的目标运行环境，如browser，amd，es6，commonjs等，每种环境有预设的全局变量

（2）全局变量：增加的全局变量供运行时使用

（3）规则（rules）：设定的规则及该规则对应的报错level

2.配置解析器选项（Specifying Parser Options）

默认仅支持ES5语法，可以设置为es6 es7 jsx等。

{
    "parserOptions": {
        "ecmaVersion": 6,  // 可选 3 5（默认） 6 7
        "sourceType": "module", // 可选script（默认） module
        "ecmaFeatures": {
            "jsx": true
        },
    },
    "rules": {
        "semi": 2
    }
}

3.配置解析器（Specifying Parser），需要本地npm模块

{
    "parser": "esprima", // Espree(默认) Esprima Babel-ESLint

"rules": { "semi": "error" } }

4.配置环境（Specifying Environments），可以多选

browser - browser global variables.
node - Node.js global variables and Node.js scoping.
commonjs - CommonJS global variables and CommonJS scoping (use this for browser-only code that uses Browserify/WebPack).
shared-node-browser - Globals common to both Node and Browser.
es6 - enable all ECMAScript 6 features except for modules.
worker - web workers global variables.
amd - defines require() and define() as global variables as per the amd spec.
mocha - adds all of the Mocha testing global variables.
jasmine - adds all of the Jasmine testing global variables for version 1.3 and 2.0.
jest - Jest global variables.
phantomjs - PhantomJS global variables.
protractor - Protractor global variables.
qunit - QUnit global variables.
jquery - jQuery global variables.
prototypejs - Prototype.js global variables.
shelljs - ShellJS global variables.
meteor - Meteor global variables.
mongo - MongoDB global variables.
applescript - AppleScript global variables.
nashorn - Java 8 Nashorn global variables.
serviceworker - Service Worker global variables.
atomtest - Atom test helper globals.
embertest - Ember test helper globals.
webextensions - WebExtensions globals.
greasemonkey - GreaseMonkey globals.

如果要在待校验文件里面配置可以这样配置：

/*eslint-env node, mocha */

如果要在配置文件中配置：

{
    "env": {
        "browser": true,
        "node": true
    }
}

如果在package.json中配置：

{
    "name": "mypackage",
    "version": "0.0.1",
    "eslintConfig": {
        "env": {
            "browser": true,
            "node": true
        }
    }
}

如果在YAML中配置：

---
  env:
    browser: true
    node: true

也可以用插件

{
    "plugins": ["example"],
    "env": {
        "example/custom": true
    }
}

5.配置全局变量（Specifying Globals）

 定义了全局变量以后，使用他们，ESLint不会发出警告。

在js文件中定义：

 /*global var1, var2*/ 

设置read only

 /*global var1:false, var2:false*/ 

在配置文件中：

{
    "globals": {
        "var1": true,
        "var2": false
    }
}

6.配置插件（Configuring Plugins）

使用npm安装第三方插件

{
    "plugins": [
        "plugin1",
        "eslint-plugin-plugin2"
    ]
}

7.配置规则（Configuring Rules）

js中配置：

 /*eslint eqeqeq: "off", curly: "error"*/ 

或者：

 /*eslint eqeqeq: 0, curly: 2*/ 

如果规则有多个选项：

 /*eslint quotes: ["error", "double"], curly: 2*/ 

在配置文件中设置：

{
    "rules": {
        "eqeqeq": "off",
        "curly": "error",
        "quotes": ["error", "double"]
    }
}

使用插件：

{
    "plugins": [
        "plugin1"
    ],
    "rules": {
        "eqeqeq": "off",
        "curly": "error",
        "quotes": ["error", "double"],
        "plugin1/rule1": "error"
    }
}

 /*eslint "plugin1/rule1": "error" */ 

 

临时关闭eslint校验：

/*eslint-disable */

//Disable all rules between comments
alert(‘foo‘);

/*eslint-enable */

 

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

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

/*eslint-enable no-alert */

 

在js特定行关闭校验：

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

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

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

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

8.增加共享设置（Adding Shared Settings）

{
    "settings": {
        "sharedData": "Hello"
    }
}

9.使用配置文件

eslint -c myconfig.json myfiletotest.js

10.继承配置文件（Extending Configuration Files）

{
    "extends": [
        "./node_modules/coding-standard/eslintDefaults.js",
        // Override eslintDefaults.js
        "./node_modules/coding-standard/.eslintrc-es6",
        // Override .eslintrc-es6
        "./node_modules/coding-standard/.eslintrc-jsx",
    ],

    "rules": {
        // Override any settings from the "parent" configuration
        "eqeqeq": "warn"
    }
}

11.忽略文件或目录(Ignoring Files and Directories)

建立.eslintignore文件

# /node_modules and /bower_components ignored by default

# Ignore files compiled from TypeScript and CoffeeScript
**/*.{ts,coffee}.js

# Ignore built files except build/index.js
build/
!build/index.js