Eslint代码检查及格式化

发表于 | 分类于

资源列表：
Eslint官网（中文）

Configure ESLint, Prettier, and Flow in VS Code for React Development

React开发，在VS Code中配置ESLint, Prettier, and Flow（上篇译文）

Airbnb’s JavaScript Github Repo

airbnb es6 官方文档

airbnb es6 规范文档（中文）

Prettier官网

babel-esling npm库

代码规范及格式化

本文档使用create-react-app脚手架创建一个新项目，从零开始继承所需要的工具，并完成所有的配置。操作系统为macOS，Windows下快捷键及安装方式可能有差异，不过不影响工具集成。

采用eslint-config-airbnb es6版，具有完整的中英文文档（详见资源列表），以及在此基础上定制规则。

VSCode扩展插件安装

请自行安装一下扩展插件，暂时不必添加任何配置

  • Eslint
  • Prettier JavaScript Formatter
  • Babel ES6/ES7

Eslint

ESLint 是一个开源的 JavaScript 代码检查工具，由 Nicholas C. Zakas
于2013年6月创建。代码检查是一种静态的分析，常用于寻找有问题的模式或者代码，并且不依赖于具体的编码风格。对大多数编程语言来说都会有代码检查，一般来说编译程序会内置检查工具。

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

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

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

Prettier

Prettier 一个 JavaScript 格式化工具. 它的灵感来源于 refmt，它对于 ES6、ES7、 JSX 和 Flow的语言特性有着高级的支持。通过将 JavaScript 解析为 AST 并且基于 AST 美化和打印，Prettier会丢掉几乎全部的原始的代码风格，从而保证 JavaScript 代码风格的一致性。

解析器(babel-eslint)

Specifying Parser
ESLint 默认使用Espree作为其解析器，你可以在配置文件中指定一个不同的解析器，只要该解析器符合下列要求：

  • 它必须是本地安装的一个 npm 模块。
  • 它必须有兼容 Esprima 的接口（它必须输出一个 parse() 方法）
  • 它必须产出兼容 Esprima 的 AST 和 token 对象。
  • 注意，即使满足这些兼容性，也不能保证一个外部解析器可以与 ESLint 正常工作，ESLint 也不会修复与其它解析器不兼容的相关 bug。

为了表明使用该 npm 模块作为你的解析器，你需要在你的 .eslintrc 文件里指定 parser 选项。例如，下面的配置指定了 Esprima 作为解析器：

1
2
3
4
5
6
{
    "parser": "esprima",
    "rules": {
        "semi": "error"
    }
}

以下解析器与 ESLint 兼容：

  • Esprima

  • Babel-ESLint - 对Babel解析器的包装使其与 ESLint 兼容。

  • typescript-eslint-parser(实验) - 一个把 TypeScript 转换为 ESTree 兼容格式的解析器，这样就它就可以在 ESLint 中使用了。这样的目的是允许通过 ESLint （尽管不一定要通过所有的 ESLint 规则）来解析 TypeScript 文件。

注意，当使用自定义解析器时，为了使 ESLint 在非 ECMAScript 5 特性下正常工作，配置属性 parserOptions 仍然是必须的。解析器被传入 parserOptions，可能会也可能不会使用它们来决定开启哪个特征。

项目初始化及模块安装

创建项目：

1
2
$create-react-app eslint_test
$cd eslint_test

全局安装 eslint

1
$ npm install -g eslint

查看当前eslint-config-airbnb 所依赖的最新包：

1
2
3
4
5
6
7
$ npm info "eslint-config-airbnb@latest" peerDependencies

{ eslint: '^4.9.0',
  'eslint-plugin-import': '^2.7.0',
  'eslint-plugin-jsx-a11y': '^6.0.2',
  'eslint-plugin-react': '^7.4.0' 
 }

建议手动的方式安装，需要注意的是eslint-plugin-jsx-a11y指定5.1.1版本，在更好版本中，存在bug，详见#2930

1
2
3
4
$ yarn add eslint-plugin-import
$ yarn add eslint-plugin-jsx-a11y@5.1.1
$ yarn add eslint-plugin-react
$ yarn add eslint-config-airbnb

安装$ yarn add babel-eslint

1
$ yarn add babel-eslint

安装 prettier-eslint
yarn add prettier-eslint

创建.eslintrc文件，其配置如下

1
2
3
4
5
{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "plugins": ["react", "jsx-a11y", "import"]
}

VSCode通用设置

在使用prettier时，默认table宽度是两空格，这里设置成四空格

  • 打开设置，mac下快捷键为cmd + ,

  • "prettier.tabWidth": 4//Table宽度设为四个空格

  • "editor.formatOnSave": true,//保存时自动格式化代码

  • "javascript.format.enable": false,//禁用自带的js格式化

  • "prettier.eslintIntegration": true,//使用'prettier-eslint' 代替 'prettier'

自定义规则

红色下划线波浪，是eslint的提示，将鼠标移到该出可以看到具体的信息提示。

提示是因为eslint-config-airbnb推荐采用的是.jsx作为jsx文件的后缀名以及
当前的组件可以采用纯函数的写法。

在自定义规则中，我们忽略文件后缀以及缩进宽度设置为4空格，当缩进不满足要求时，eslint提示为error。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
{
    "parser": "babel-eslint",
    "extends": "airbnb",
    "plugins": ["react", "jsx-a11y", "import"],
    "rules": {
        "indent": [
            "error",
            4,
            {
                "SwitchCase": 1,
                "VariableDeclarator": 1,
                "outerIIFEBody": 1,
                "FunctionDeclaration": {
                    "parameters": 1,
                    "body": 1
                },
                "FunctionExpression": {
                    "parameters": 1,
                    "body": 1
                },
                "CallExpression": {
                    "arguments": 1
                },
                "ArrayExpression": 1,
                "ObjectExpression": 1,
                "ImportDeclaration": 1,
                "flatTernaryExpressions": false,
                "ignoredNodes": ["JSXElement", "JSXElement *"]
            }
        ],
        "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
    }
}

当eslint正常工作的时候，更多优点等待挖掘

后续

采用的eslint-config-airbnb 有完整的规则文档，但在实际生产中，具体的规则需要重新配置，这部分需要大家参与了，反馈提交，然后补充完善规则。

git commit 时执行脚本，自动格式化代码并检查不符合eslint规则，不能提交。

git commit 规范化，并输出成文档，集成 emoji 表情，这是下一个议题了。

Flow工作流

Flow is a static type checker for your JavaScript code. It does a lot of work to make you more productive. Making you code faster, smarter, more confidently, and to a bigger scale.

官网

配置

在 create react app 中使用，详见官方文档。

鉴于目前项目的复杂度，暂不集成。