WebStorm + React 项目，配置 ESLint

ESLint 简介

ESLint是一个开源的JavaScript代码检查工具，其作者是大名鼎鼎的“红宝书”《JavaScript高级程序设计》作者 Nicholas C. Zakas。Nicholas C. Zakas 在他的多部著作中都有涉及到JavaScript的代码风格问题，而eslint正是用来统一JavaScript代码风格的工具。

代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查，一般来说编译程序会内置检查工具。

JavaScript 是一个动态的弱类型语言，在开发中比较容易出错。因为没有编译程序，为了寻找 JavaScript 代码错误通常需要在执行过程中不断调试。像 ESLint 这样的可以让程序员在编码的过程中发现问题而不是在执行的过程中。

ESLint 的初衷是为了让程序员可以创建自己的检测规则。ESLint 的所有规则都被设计成可插入的。ESLint 的默认规则与其他的插件并没有什么区别，规则本身和测试可以依赖于同样的模式。为了便于人们使用，ESLint 内置了一些规则，当然，你可以在使用过程中自定义规则。

ESLint 使用 Node.js 编写，这样既可以有一个快速的运行环境的同时也便于安装。

ESLint 哲学

所有都是可拔插的

• 内置规则和自定义规则共用一套规则 API
• 内置的格式化方法和自定义的格式化方法共用一套格式化 API
• 额外的规则和格式化方法能够在运行时指定
• 规则和对应的格式化方法并不强制捆绑使用

每条规则:

• 各自独立
• 可以开启或关闭（没有什么可以被认为“太重要所以不能关闭”）
• 可以将结果设置成警告或者错误

另外:

• ESLint 并不推荐任何编码风格，规则是自由的
• 所有内置规则都是泛化的

项目:

• 通过丰富文档减少沟通成本
• 尽可能的简单透明
• 相信测试的重要性

先看一下代码优化效果

请点开图片看大图

 

image

按照以上提示，Alt+Enter 之后，会弹出以下窗口：

 

image

选择 Fix Current file，之后，优化的代码差异如下：

 

image

使用 ESLint 带来的好处

统一代码风格，减少review成本和低级错误的出现

eslint可以配置在开发环境中，帮助我们找出项目中不符合规则的代码并给出提示。在我们的开发环境中，开发者每次修改代码，都会先用eslint检查代码，再进行babel和react的编译，一旦eslint发现error级别的错误，那么报错文件不会进行后续的编译。这样可以让eslint随时提醒开发者代码是否符合规范，从而减少了我们花费在review代码风格上的时间，降低了低级bug的出现。

支持ES6

同类型的代码检查工具还有jslint和jshint，和它们相比，eslint对ES6语法支持更好，可以通过eslint在团队内快速统一ES6的语法，精简产品代码，提高开发效率。

丰富的插件

eslint除了上面说的支持ES6语法之外，还支持各种插件，可以让我们添加自己需要的语法规则。比如项目引入了react，那么最好使用eslint-plugin-jsx-a11y和eslint-plugin-react 这两个插件来检查代码，使基于react的代码更符合规范。

配置并在项目中使用

• 添加 eslint 依赖。全局或者仅在项目安装 ESLint（二选一），并运行 eslint --init
  • 仅在项目安装，执行 npm i eslint --save-dev，如果是开源项目，推荐这种方式。
  • 全局安装 npm i eslint -g
• 项目如果用的是 webpack，则加入对应的插件 eslint-loader
• 在项目根目录下创建配置文件 .eslintrc.*，参考：Configuring ESLint（该文对如何配置写得非常详细）。

使用命令生成配置文件 .eslintrc.yml

在 cmd 窗口，进入项目根目录，执行 eslint --init。如果用 WebStorm 打开的项目，直接在 Terminal 窗口执行命令即可（默认路径就是项目根目录）。

 

image

通过以上操作，最终在项目根目录下生成文件 .eslintrc.yml，内容如下：

env:
  browser: true
  commonjs: true
  es6: true
extends: 'eslint:recommended'
parserOptions:
  ecmaFeatures:
    jsx: true
  ecmaVersion: 2018
  sourceType: module
plugins:
  - react
rules:
  # 缩进风格：这里设置的是用4个空格缩进。
  # 至于要用几个空格来缩进，需要根据团队的编码规范来。
  # 如果是研究别人的开源项目，建议根据开源项目的实际情况来设置。
  indent:
    - error
    - 4
  linebreak-style:
    - error
    - windows
  quotes:  # 引号：设置成双引号
    - error
    - double
  semi:   # 分号：语句末尾需要有分号
    - error
    - always

这里有一份配置文件的详细解说，点击前往。

实践

WebStorm 提示 Error: No ESLint configuration found.

• 需要配合 ESLint 的配置文件，如果不想配置，可以临时在 WebStorm 中将 ESLint 禁用掉。Ctrl+Alt+s -> Languages & Frameworks -> Code Quality Tools -> ESLint -> Enable，将 Enable 前面的复选框设置为非勾选状态。
• 参考上面，添加配置文件。

ESLint 是否全局安装，决定 WebStorm 如何配置

• 如果 ESLint 是配置到 package.json，即仅项目下安装，而不是全局安装，则 Configuration file，勾选 Automatic search 即可。
• 如果 ESLint 是全局安装，则要指定配置文件，勾选 Configuration file: 并在其后指定配置文件。
  
   

  

  image

eslint-plugin-react 依赖

在执行 eslint --init 初始化配置文件的时候，如果选择了要使用 react，则需要安装依赖 eslint-plugin-react，否则会提示： Error: Failed to load plugin react: Cannot find module 'eslint-plugin-react'。

解决此类问题，最基本的原则是，缺什么依赖，就安装什么依赖。只是要注意区分，是全局安装还是仅项目安装。

eslint-plugin-react 是否全局安装，与 ESLint 是否全局安装相关：

• 如果 ESLint 是全局安装的，eslint-plugin-react 也要全局安装，安装命令： cnpm install eslint-plugin-react -g。
• 同理，如果 ESLint 只是在项目下安装，安装命令： cnpm install eslint-plugin-react --save-dev。

关于 ESLint 与 eslint-plugin-react 的搭配安装，官方文档是这样描述的：If you installed ESLint globally, you have to install React plugin globally too. Otherwise, install it locally.

switch 缩进配置

如下，配置缩进为两个空格，没有配置 SwitchCase 的情况下，switch 语句会报缩进不对。

rules:
  indent:
    - error
    - 2

 

image

解决：在配置文件里设置 switch case 的缩进，如下：

rules:
  indent:
    - error
    - 2
    - SwitchCase: 1

json 格式配置如下：

'rules': {
  // other config
  'indent': ['error', 2, {'SwitchCase': 1}],
  // ...
}

让webpack在打包文件之前，对除第三方外的js文件用eslint进行检查。

preLoaders: [
    {
        test: /.js$/,  // 检测所有的js文件
        loader: "eslint-loader", // 使用eslint插件
        exclude: [   // 排除第三方文件
            /node_modules/,
            /app/lib/
        ]
    }
]

完成上述配置后，webpack在构建时就能自动对js代码用eslint进行检查了。

注：由于webpack在默认配置下遇到error并不会抛出错误终止代码打包，需要在webpack命令上添加bail参数让webpack抛出错误：

webpack --bail --progress --colors --config webpack.config.js

添加插件

如果需要react和jsx的语法检查，可以引入eslint-plugin-jsx-a11y和eslint-plugin-react这两个插件并在.eslintrc文件中添加入plugins的配置：

"plugins": [
    "react",
    "jsx-a11y"
]

规则格式是<插件名称>/<规则名称>: <告警级别>：

{
    "rules": {
        "react/jsx-uses-react": "error",
        "jsx-a11y/no-static-element-interactions": "warn"
    }
}

rules 配置说明

以下配置仅列举一部分，详细说明请参考：ESLint 配置文件 .eslintrc 示例及说明

'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'],
    // 关闭 强制方法必须返回值，TypeScript强类型，不配置
    // 'consistent-return': 0
  }

规则格式是<规则名称>: <告警级别>，告警级别分为三种:

1. "0"表示忽略问题，等同于"off";
2. "1"表示给出警告，等同于"warn";
3. "2"表示直接报错，等同于"error"。

配置第三方规则 airbnb

除了支持插件外，eslint还支持通过扩展来快速的引入开源的JavaScript代码规则，减少了我们选择规则的时间，例如eslint官方推荐的规则：

extends: 'eslint:recommended'

这里安装前端圈内很流行的 airbnb，参考：eslint-config-airbnb。

前提是要先引入 airbnb 的插件。airbnb 的规则不仅包含了官方推荐的大部分规则，还加入了jsx、react和import的相关规则，能帮助我们一键完成react应用的代码规则配置。

如果扩展引入的有些规则不符合所在团队的开发习惯，可在.eslintrc的rules中用自己的配置覆盖掉扩展中的默认值。

引入扩展的目的是减少我们挑选规则的时间，但这些规则不一定切合团队和项目的具体情况。如果一味地让团队去遵守别人制定的规则，很可能造成对现存代码的大范围修改，反而降低了开发效率。因此，建议先依据团队现有的良好的风格挑选出最符合现有开发习惯的规则，保证已有的好习惯不被破坏的基础上，再添加一些希望在团队中推广的规则。

实际操作

安装依赖

C:workspace
eact
eact-full-stack-learning>npx install-peerdeps --dev eslint-config-airbnb
npx: installed 82 in 48.041s
install-peerdeps v1.9.0
Installing peerdeps for eslint-config-airbnb@latest.
npm install eslint-config-airbnb@17.1.0 eslint@^5.3.0 eslint-plugin-import@^2.14.0 eslint-plugin-jsx-a11y@^6.1.1 eslint-plugin-react@^7.11.0 --save-dev

实际运行的时候，报错：Unhandled rejection RangeError: Maximum call stack size exceededill install loadIdealTree，换成 cnpm 安装会成功，可能因为其它依赖都是用 cnpm 安装的缘故吧。

cnpm install eslint-config-airbnb@17.1.0 eslint@^5.3.0 eslint-plugin-import@^2.14.0 eslint-plugin-jsx-a11y@^6.1.1 eslint-plugin-react@^7.11.0 --save-dev

或者，运行以下命令，查看依赖，然后在 package.json 文件配置好，再用命令 cnpm i 安装依赖。

npm info "eslint-config-airbnb@latest" peerDependencies
{ 
  eslint: '^4.19.1 || ^5.3.0',
  'eslint-plugin-import': '^2.14.0',
  'eslint-plugin-jsx-a11y': '^6.1.1',
  'eslint-plugin-react': '^7.11.0' 
}

修改官方扩展为 airbnb

extends: airbnb

扩展阅读

Airbnb React/JSX 编码规范

参考

• ESLint 标准规则
• eslint-plugin-react 规则
• Configuring ESLint
• Getting Started with ESLint
• ESLint 中文网站
• eslint使用心得
• eslint 常用配置

作者：AndyChen
链接：https://www.jianshu.com/p/d2ddab8777f7