Skip to content

Latest commit

 

History

History
170 lines (111 loc) · 5.14 KB

eslint-quickstart.md

File metadata and controls

170 lines (111 loc) · 5.14 KB
Raw

ESLint 快速入门

ESLint 是一种用于识别和报告 ECMAScript / JavaScript 代码中发现的模式的工具，目的是使代码更加一致并避免错误。

安装

本地安装

如果要将 ESLint 作为项目构建系统的一部分，我们建议在本地进行安装。你可以使用 npm：

$ npm install eslint --save-dev

然后您应该设置一个配置文件：

$ ./node_modules/.bin/eslint --init

之后，您可以在项目的根目录中运行 ESLint，如下所示：

$ ./node_modules/.bin/eslint yourfile.js

您使用的任何插件或可共享配置也必须在本地安装以与本地安装的 ESLint 配合使用。

全局安装

如果要使 ESLint 可用于跨所有项目运行的工具，我们建议在全局安装 ESLint。你可以使用 npm：

$ npm install -g eslint

然后您应该设置一个配置文件：

$ eslint --init

之后，您可以在任何文件或目录下运行 ESLint，如下所示：

$ eslint yourfile.js

您使用的任何插件或可共享配置也必须全局安装，才能使用全局安装的 ESLint。

注意：eslint --init 旨在根据每个项目设置和配置 ESLint，并将 ESLint 及其插件的本地安装运行在其运行的目录中。如果您希望使用 ESLint 的全局安装，则配置中使用的任何插件也必须全局安装

配置

运行 eslint --init 后，您的目录中将有一个 .eslintrc 文件。在其中，您将看到一些如下配置的规则：

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

"semi" 和 "quotes" 是 ESLint 中规则的名称。第一个值是规则的错误级别，可以是以下值之一：

"off" or 0 -  关闭规则

"warn" or 1 -  将规则作为警告（不影响退出代码）

"error" or 2 -  将规则作为错误（退出代码将为 1）

这三个错误级别允许您细分控制 ESLint 如何应用规则（有关更多配置选项和详细信息，请参阅配置文档）。

您的 .eslintrc 配置文件也将包括以下行：

"extends": "eslint:recommended"

由于这一行，规则页面上的所有打钩的规则都将被打开。或者，您可以通过在  npmjs.com 上搜索 “eslint-config” 来使用其他人创建的配置。 ESLint 不会删除您的代码，除非您从共享配置中扩展或在配置中明确地打开规则。

实战

React 项目中，通常会使用 React、JSX、ES6 等特性，所以 ESLint 推荐的检查规则可能还不能满足我们对代码检查的需要。

ESLint 集成 Airbnb

业界比较流行的 Airbnb JavaScript Style 可以说是一个不错的选择。

那么如何让 ESLint 支持 Airbnb 呢？

下面将一一道来。

eslint-config-airbnb

eslint-config-airbnb 该包将 Airbnb 的规则作为 ESLint 可扩展的共享配置。

安装方法一

执行 eslint --init 命令，依次选择 Use a popular style guide -> Airbnb

ESLint 会自动下载 Airbnb 扩展所需的所有插件。

安装方法二

ESLint 默认的下载地址是 https://registry.npmjs.org/ ，由于是外网，可能会很慢。

如果你使用淘宝的 cnpm，也可以自己下载 Airbnb 扩展所需的插件：

执行安装命令：

$ cnpm i -D eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-config-airbnb

babel-eslint

由于 React 项目往往会使用 ES6 特性。ES6 若想识别 ES6 特性，需要相应的解析器，babel-eslint 是比较流行的选择。

执行安装命令：

$ cnpm i -D babel-eslint

配置

ESLint 支持几种格式的配置文件，个人推荐使用 .eslintrc.js ，这是官方优先级最高的配置文件。

配置文件中配置 Airbnb 有几个重点项：

{
  // 指定校验的环境
  'env': {
    'browser': true,
    'node': true,
    'es6': true,
    'commonjs': true
  },
  // 指定扩展标准
  'extends': ['airbnb'],
  // 指定解析器
  'parser': 'babel-eslint',
  // 指定插件
  'plugins': [
    'import',
    'jsx-a11y',
    'react'
  ],
  'rules': {
    ...
  }
}

Airbnb 的检查规则是比较严格的，如果你认为有些检查项没有必要，也可以自行在 rules 中修改。

实例

这里，我抛砖引玉一下，给大家提供一个我自己的 DEMO 项目：Demo

我在 config/.eslintrc.js 中基于 eslint-config-airbnb 修改了一些定制的规则。