eslint 学习笔记

本文同步自个人博客 https://joeray61.com

安装

局部：

npm install eslint --save-dev

全局：

npm install eslint -g

初始化

eslint --init

Note: 此处及之后都假设全局安装eslint或者在npm script中使用eslint

使用eslint进行校验

eslint file.js

配置

parser

指定eslint使用的 parser，默认是Espree，除此以外经常使用的还有：

• Esprima

• Babel-ESLint

.eslintrc示例：

{
    "parser": "esprima"
}

parserOptions

指定传给 parser 的信息

.eslintrc示例：

{
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    }
}

env

指定程序运行的环境，这关系到有哪些预先定义好的全局变量

• browser - 浏览器中的全局变量

• node - nodejs中的全局变量

• es6 - 启用 es6 中除了模块以外的其余特性（这会自动将parserOptions.ecmaVersion设置为6）

• worker - web worker中的全局变量

• mocha - mocha 测试框架中的全局变量

• ...

Note: 能够同时定义多个env

.eslintrc示例:

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

globals

全局变量申明，true表示容许改写，false表示不容许改写

.eslintrc示例：

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

plugins

声明使用了哪些插件，插件名能够默认忽略eslint-plugin-前缀，这些插件能够用于rules、env和extends等配置中

.eslintrc示例：

{
    "plugins": [
        "example" // or "eslint-plugin-example"
    ],
    "env": {
        "example/custom": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:example/recommended"
    ],
    "rules": {
       "example/rule1": "error"
    }
}

extends

继承一套基础配置

.eslintrc示例：

{
    "extends": "eslint:recommended"
}

rules

具体校验规则的配置

.eslintrc示例：

{
    "rules": {
       "no-set-state": "off"
    }
}

能够参考 http://eslint.org/docs/rules/ 了解更多rule

settings

共享的配置，配置中的信息将会被传递给全部要执行的规则（rule）

.eslintrc示例：

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

注释配置

注释配置是指在js文件中经过注释来单独指定一些校验信息

env

/* eslint-env node, mocha */

global

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

rule

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

• "off" or 0: 关闭这条规则

• "warn" or 1: 开启规则，若是校验有问题则抛出警告

• "error" or 2: 开启规则，若是校验有问题则抛出错误

关闭/开启全部规则校验

/* eslint-disable */

alert('foo');

/* eslint-enable */

关闭/开启校验部分具体的规则校验

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

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

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

关闭当前行的全部规则校验

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

关闭下一行的全部规则校验

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

关闭当前行的具体规则校验

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

关闭下一行的具体规则校验

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