格式化工具介绍

Prettier 作为 代码格式化 工具
ESLint 代码质量 方面的语法检查
EditorConfig 负责统一各种编辑器的配置，所有和编辑器相关的配置 (行尾、缩进样式、缩进距离...) 都交给它

本文介绍在react项目配置eslint与prettier

ESLint规则

ESLint中的规则有3种设置：off、warn和error。

"off"可以替换成0，代表关闭该规则

"warn"可以替换成1，代表打开规则，提示警告，但不会报错

"error"可以替换成2，代表打开规则，直接报错

在.eslintrc文件中，新增一个rules属性，为JSON对象类型。

给项目安装 ESLint

给项目安装 ESLint 为引用知乎文章，详细安装ESLint介绍可查看 zhuanlan.zhihu.com/p/184951182 或者查看安装ESLint

先决条件：Node.js (>=6.14), npm version 3+。

// 新建demo工程目录，初始化 npm 项目
npm init

// 安装 eslint    推荐安装为项目的开发依赖
npm i -D eslint

// 初始化 eslint 配置文件    因为不是安装到全局的，所以不能直接使用 eslint --init
./node_modules/.bin/eslint --init

在初始化的过程中，会让你选择一些配置，譬如如何使用 ESLint？我们选择第三项，功能最多。

逐一选择完 ESLint 的使用配置后，会在项目根目录生成 .eslintrc.js 配置文件，同时会安装需要的 npm 包。 demo 中安装的 npm 包有：

eslint-config-standard、eslint-plugin-import、eslint-plugin-node、eslint-plugin-promise、eslint-plugin-standard

demo 中选择如下所示：

初始化后，生成的配置内容如下所示，具体配置项的含义，后面我们再聊

安装ESLint

eslint只有开发阶段需要，因此添加到开发阶段的依赖中即可

npm install eslint --save-dev

在VS Code中安装eslint插件，以在开发中自动进行eslint校验

配置ESLint

引入Airbnb规则（可选）

eslint-config-airbnb

为了规范团队成员代码格式，以及保持统一的代码风格，项目采用当前业界最火的Airbnb规范

安装ESLint官方提供的react插件

eslint-plugin-import：此插件主要为了校验 import/export 语法，防止错误拼写文件路径以及导出名称的问题
eslint-plugin-jsx-a11y：提供 jsx 元素可访问性校验
eslint-plugin-react：校验 React
eslint-plugin-react-hooks：根据 Hooks API 校验 Hooks 的使用
eslint-config-airbnb: airbnb的eslint 规范（可选）

执行以下命令

npm i -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

添加elint配置文件

下面，让我们需要根据 Eslint 的文档来配置这些插件。在控制台运行下面命令：

./node_modules/.bin/eslint --init

我们可以根据项目的需求，来选则相应的配置。执行完毕之后可以看到项目的根目录多了一个 .eslintrc.js 文件。

Eslint 支持多种格式的配置文件，优先级如下：

1、 .eslintrc.js
2、 .eslintrc.yaml
3、 .eslintrc.yml
4、 .eslintrc.json
5、 .eslintrc
6、 package.json

我们使用官方推荐的 .eslintrc.js 格式就好。

接下来，让我们使用喜欢的编辑器来打开这个文件，为了便于理解，我增加了一些注释：

module.exports = {
    // 为我们提供运行环境，一个环境定义了一组预定义的全局变量
    "env": {
        "browser": true,
        "es6": true
    },
    // 一个配置文件可以被基础配置中的已启用的规则继承。
    "extends": [
        "airbnb"
    ],
    // 自定义全局变量
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly",
        "_": true,
        "$": true,
    },
    // ESLint 默认使用Espree作为其解析器，你可以在配置文件中指定一个不同的解析器
    // "parser": "@typescript-eslint/parser",
    // 配置解析器支持的语法
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    // ESLint 支持使用第三方插件。在使用插件之前，你必须使用 npm 安装它。
    // 在配置文件里配置插件时，可以使用 plugins 关键字来存放插件名字的列表。插件名称可以省略 eslint-plugin- 前缀。
    "plugins": [
        "react",
        // "@typescript-eslint"
    ],
    // ESLint 附带有大量的规则。你可以使用注释或配置文件修改你项目中要使用的规则。要改变一个规则设置，你必须将规则 ID 设置为下列值之一：
    // "off" 或 0 - 关闭规则
    // "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
    // "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
    "rules": {
        semi: 0,
        'no-unused-vars': [
            1,
            {
                vars: 'all',
                args: 'after-used',
                ignoreRestSiblings: true,
                varsIgnorePattern: '^_',
                argsIgnorePattern: '^_|^err|^ev' // _xxx, err, error, ev, event
            }
        ],
        'no-useless-escape': 2,
    }
};

Prettier

我们可以借助 Eslint 来提高我们编码的质量，但是却无法保证统一代码风格。一个统一的代码风格对于团队来说是很有价值的，所以为了达到目的，我们可以选择使用 Prettier 在保存和提交代码的时候，将代码修改成统一的风格。这样做同时也降低了 Code Review 的成本。它不会代替 Eslint，所以需要和 Eslint 搭配使用。

配置应用

安装以下依赖包

prettier
eslint-plugin-prettier
eslint-config-prettier 解决eslint与prettier冲突问题

1、安装依赖

npm i -D prettier eslint-config-prettier eslint-plugin-prettier

2、修改 Exlint 配置，打开 .eslintrc.js 文件，在扩展中增加 "plugin:prettier/recommended" ：

    "extends": [
        "airbnb",
        "plugin:prettier/recommended"
    ]

3、增加 prettier 配置文件，在根目录创建 .prettierrc.js ：

module.exports = {
  "printWidth": 120, //一行的字符数，如果超过会进行换行，默认为80
  "tabWidth": 2, //一个tab代表几个空格数，默认为2
}

到此就完成了eslint和prettier的配置

配置 VS Code 编辑器（如果需要保存时自动格式化可以配置）

1、在 VS Code 商店中寻找并安装插件 ESlint，Prettier

2、编辑 settings.json，通过下面路径，可以找到相应的配置文件：

Windows %APPDATA%\Code\User\settings.json
macOS $HOME/Library/Application Support/Code/User/settings.json
Linux $HOME/.config/Code/User/settings.json

然后增加如下参数：

  "files.autoSave": "onFocusChange",
  "editor.formatOnSave": true, // 保存时自动格式化
  "editor.formatOnType": true,
  "eslint.autoFixOnSave": true,// 保存时自动修复
  "eslint.enable": true,

这样当我们在保存文件的时候，就会自动优化文件格式了。后续更新EditorConfig

react项目配置eslint与prettier