Eslint 使用和配置

[shaozj]

eslint 使用和配置

安装依赖三件套

可以全局安装，基本所有前端工程都会用到

eslint
babel-eslint
eslint-plugin-react

sublime 配置，安装：
SublimeLinter
SublimeLinter-contrib-eslint

vscode eslint 插件

配置文件解析

文件格式

支持 JavaScript, JSON 或 YAML。

root 配置

"root": true

不向上层文件夹继续寻找 eslint 配置文件。

parser 配置

eslint 默认 parser 为espree。
基于 es6 的工程，parser 按如下设置：

"parser": "babel-eslint"

需要我们手动安装 babel-eslint。

Parser Options 配置

语法解析器配置。

"parserOptions": {
    "ecmaVersion": 6,       // ECMAScript 版本
    "sourceType": "module", // 支持 ECMAScript modules 
    "ecmaFeatures": {       // 额外的语言特性支持
      "jsx": true           // 支持 jsx 语法
    }
}

Plugins 配置

第三方插件配置。

"plugins": [
    "react"  // 支持 react 代码
]

需要我们手动安装 eslint-plugin-react

Globals 配置

全局变量配置。配置后变量不会被认为未定义。

"globals": {
    "$": true
}

Environments 配置

环境配置。定义不同环境下预定义的全局变量。

"env": {
    "browser": true,  // 浏览器全局变量
    "amd": true,      // 定义 require() 和 define() 全局变量 
    "es6": true,      // es6 modules 相关的全局变量（且自动设置 "ecmaVersion": 6）
    "node": true,     // nodejs 全局变量
    "mocha": true     // mocha 测试框架全局变量
}

Rules 配置

关键配置，代码格式检查规则。

• "off" or 0 // 关闭规则
• "warn" or 1 // warning 提示
• "error" or 2 // 错误提示

"rules": {
    "semi": 1,                  // 语句末尾分号
    "quotes": [1, "single"],    // 单引号
    "comma-dangle": 1,          // 不允许末位逗号
    "no-undef": 1,              // 不许使用未定义变量，除了在 globals 中配置的
    "global-strict": 0,         // 全局 strict 模式 
    "no-extra-semi": 1,         // 不允许不必要的分号
    "no-underscore-dangle": 0,  // 标志符后面不能跟下划线
    "no-console": 1,            // 不准出现 console
    "no-unused-vars": 1,        // 不准出现未被使用的变量
    "no-trailing-spaces": [1, { "skipBlankLines": true }], // 行末不准空格
    "no-unreachable": 1,        // 不允许不可达代码（return, throw, continue, and break 语句之后）
    "no-alert": 0,              // 不准 alert
    "react/jsx-uses-react": 1,  // 防止 React 被错误地标识为 unused
    "react/jsx-uses-vars": 1    // 防止 JSX 使用的变量被错误地标识为 unused
  }

完整配置参考

// .eslintrc.js

'use strict';

module.exports = {
  "root": true,
  "parser": "babel-eslint",
  "plugins": [
    "react"
  ],
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "globals": {
    "$": true
  },
  "env": {
    "browser": true,
    "amd": true,
    "es6": true,
    "node": true,
    "mocha": true
  },
  "rules": {
    "semi": 1,
    "quotes": [1, "single"],
    "comma-dangle": 1,
    "no-undef": 1,
    "global-strict": 0,
    "no-extra-semi": 1,
    "no-underscore-dangle": 0,
    "no-console": 1,
    "no-unused-vars": 1,
    "no-trailing-spaces": [1, { "skipBlankLines": true }],
    "no-unreachable": 1,
    "no-alert": 0,
    "react/jsx-uses-react": 1,
    "react/jsx-uses-vars": 1
  }
};

官网

https://eslint.org/docs/user-guide/configuring