ESLint 非权威配置指北（下）-五八三

上文讲解了 ESLint 中的一些选项配置以及它们各自的含义与使用方法，本文带大家从实际的项目出发，看看如何从 0 搭建 ESLint 配置。

搭建 ESLint

手动搭建

开始前，请确保必须存在 package.json 文件。

手动安装 ESLint 包
```
npm install --save-dev eslint
```
添加 .eslintrc.* 配置文件
```
touch .eslintrc.js
```

在 .eslintrc.* 配置文件添加配置

module.exports = {


  "env": {
      "browser": true,
      "node": true
  },
  "extends": "eslint:recommended",
  "parserOptions": {
      "ecmaVersion": "latest",
      "sourceType": "module"
  },
  // 略......
}

启动配置初始化向导（推荐）

如果你使用的是内置 SSL 支持的 Node.js 版本（^12.22.0、^14.17.0 或 >=16.0.0），也可以直接使用以下两个命令中的任意一个来安装并配置 ESLint：

npm init @eslint/config

# 或者
npx eslint --init

第二个命令中的 --init 选项其本质依然是调用第一个命令来启动向导，开发者回答几个问题就可以快速创建 .eslintrc 文件。

安装 ESlint

Need to install the following packages:
  eslint@8.43.0  
Ok to proceed? (y) y

如何使用 ESLint?

? How would you like to use ESLint? ...
  To check syntax only
  To check syntax and find problems
> To check syntax, find problems, and enforce code style

果断选择第三条：检查语法、检测问题并强制代码风格。

项目使用哪种模块?

? What type of modules does your project use? ... 
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

项目非配置代码都是采用的 ES6 模块系统导入导出，选择第一个。

项目使用哪种框架?

? Which framework does your project use? ...       
> React
  Vue.js
  None of these

按自己项目需求选择，比如这里使用 React。

项目是否使用 TypeScript ？
```
Does your project use TypeScript? » No / Yes
```
选择 Yes，ESLint 给我们默认配上支持 Typescript 的 parser 以及插件 plugins 等。
代码在哪个环境运行？
```
? Where does your code run? ...
√ Browser
√ Node
```
都选上，之后可能会编写一些 node 代码。

如何定义项目的 ESLint 风格？

? How would you like to define a style for your project? ... 
> Use a popular style guide
  Answer questions about your style

使用社区已经制定好的代码风格，我们去遵守就行。

选择一款喜欢的社区代码风格
那种
```
? Which style guide do you want to follow? ...
> Standard: https://github.com/standard/eslint-config-standard-with-typescript
  XO: https://github.com/xojs/eslint-config-xo-typescript
```
记得之前有Airbnb、Standard、Google、XO 4种风格，不知道为啥现在只有 2 款了，大家自己配的时候可以留意下，这里我们选择第一个标准版风格。
创建哪种格式的 .eslintrc 配置文件
```
? What format do you want your config file to be in? ...
> JavaScript
  YAML
  JSON
```
选择 JavaScript ，即生成的配置文件是 .eslintrc.js 文件，配置更加灵活。
Would you like to install them now?

现在不装更待何时？Yes
用哪个包管理工具安装？
```
? Which package manager do you want to use? ...
> npm
  yarn
  pnpm
```
看自己项目用的哪个就选哪个。

安装完成后，就会发现项目中多了一个 .eslintrc.js 文件。

module.exports = {


    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "standard-with-typescript",
        "plugin:react/recommended"
    ],
    "overrides": [
        {
            "env": {
                "node": true
            },
            "files": [
                ".eslintrc.{js,cjs}"
            ],
            "parserOptions": {
                "sourceType": "script"
            }
        }
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
    }
}

再打开 package.json 我们可以看到 ESLint 根据我们的选择安装了哪些东西。

{




  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.60.1",
    "eslint": "^8.43.0",
    "eslint-config-standard-with-typescript": "^35.0.0",
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-n": "^15.7.0",
    "eslint-plugin-promise": "^6.1.1",
    "eslint-plugin-react": "^7.32.2",
    "typescript": "^5.1.5"
  }
}

覆盖插件规则

如果你对 ESLint 自动安装的一部分插件规则不满意或者不想使用它的规则，则可以在 rules 中进行重新配置覆盖，需要注意修改插件规则的写法，可以参考指北手册（上）中的 修改插件规则 章节。比如，我们修改插件中的部分规则：

{

  rules: {
    'import/no-extraneous-dependencies': [ERROR, { devDependencies: true }],
    'import/prefer-default-export': OFF,
    'unicorn/better-regex': ERROR,
    'unicorn/prevent-abbreviations': OFF,
    'react/jsx-indent-props': [ERROR, 4],
    'react/jsx-one-expression-per-line': OFF,
  }
}

执行代码检查

在命令行中执行 npx eslint [file|dir|glob]* 命令，即可对文件进行格式校验：

# 检查两个文件
npx eslint file1.js file2.js


# 检查多个文件
npx eslint src/**

此时错误或者警告便会在 shell 终端打印出来，比如：

添加 Scripts 脚本命令

方便起见，我们直接在 package.json 中添加 ESlint 相关的检查命令，并为其添加检查范围：

{




    "scripts": {


        "lint": "eslint ./src",
    }


}

接着执行 npm run lint，ESLint 就只会在 src 目录下进行代码规范的校验。

–ext 指定目标文件

此选项用于指定 ESLint 在目录中匹配目标文件所用扩展。

参数类型：字符串。文件扩展名。
多个参数：支持
默认值：.js 和与配置中 overrides 条目相匹配的文件。

只有在检查模式为目录时才会使用 --ext。如果你使用 glob 模式或文件名，那么会忽略 --ext。例如：

npx eslint "lib/*" --ext .js

结果还是会检查 lib/ 目录下的所有文件，不管扩展名是什么。

关于 ext 的常用示例：

# 仅 .ts 扩展
eslint --ext .ts


# 同时使用 .js 和 .ts
eslint --ext .js --ext .ts


# 也是同时使用 .js 和 .ts
eslint --ext .js,.ts

# 同时使用 src 下的 .js 和 .ts
eslint --ext .js,.ts /src

–fix 自动修复

此项指示 ESLint 尝试修复尽可能多的问题。这些修复是对实际文件本身进行的，只有剩余的未修复的问题才会被输出。

现在命令变成了这样：

{




    "scripts": {


        "lint": eslint --fix --ext .js,.ts,.tsx /src
    }


}

–cache 缓存

存储已处理文件的信息，以便只检查发生更改的文件。启用此选项可以确保只对改变过的文件进行提示，极大地提高 ESLin t的运行时间性能。缓存默认存储在 .eslintcache 中。

完整命令现在长这样：

{




    "scripts": {


        "lint": eslint --cache --fix --ext .js,.ts,.tsx /src
    }


}

这里需要注意一点，如果你的项目需要重置，除了删除 node_modules、package-lock.json外，还要记得删除 .eslintcache。

rm -rf node_modules
rm -rf package-lock.json
rm -rf .eslintcache

npm cache clean --force


npm install

忽略文件

创建 .eslintignore 文件，添加不需要检查的目录或文件路径即可跳过 ESLint 检查：

/node_modules/
/dist/
/static/
/build/
/src/assets/

VSCode 配置文件

在项目中创建 .vscode 文件夹，添加一份 setting.json 文件，即可为当前项目配置专属的 VSCode 编辑器配置。

{




    "editor.formatOnSave": true, // 保存代码时格式化
    "editor.formatOnType": true, // 敲完一行代码自动格式化
    "editor.formatOnPaste": true, //在粘贴时格式化代码
    "editor.codeActionsOnSave": { //当保存的时候，eslint自动帮我们修复错误
        "source.fixAll.eslint": true
    },
    "eslint.enable": true, // 是否开启eslint检测
    "eslint.validate": [ // 能够识别的文件后缀类型
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
        "vue",
        "html"
    ]
}

ESLint 与 Prettier

有卧龙的地方必有凤雏，Prettier 的代码风格可能会与 ESLint 中的某些规范发生冲突。比如，ESLint 要求使用双引号，但是 Prettier 则配置的是单引号，这个时候就会发生冲突。

Prettier 的配置其实并不多，如果发生冲突主要还是取决于开发者最终需要哪种写法，然后再去改其中一个，让卧龙和凤雏能够一起和谐的生活在一起，啊呸，工作在一起。

module.exports = {


    tabWidth: 4, // 缩进
    singleQuote: true, // 使用单引号
    bracketSpacing: true, // 对象前后添加空格
    semi: true, // 句末使用分号
    arrowParens: 'avoid', // 箭头函数 省略() 'always'
    trailingComma: 'es5', // 指定添加尾后逗号的方式 'es5' 'none'
    endOfLine: 'lf',
    printWidth: 100,
};

eslint-config-prettier

eslint-config-prettier 可以关闭所有不必要的或可能与 Prettier 冲突的规则。

请注意，此配置仅关闭规则，因此只有将其与其他配置一起使用才有意义。所以，我们可以像下面这样，将它放在最后面。

{

    extends: [
        'airbnb',
        'eslint:recommended',
        'plugin:react/recommended',
        'prettier'
    ]
}

配置后，就解决了相互冲突的问题。

禁用部分 Prettier

如果不想使用 Prettier 中的某些风格，但是有没有找到相应的配置，可以之用注释将其禁用：

/* prettier-ignore */

比如，在使用箭头函数时，Prettier 会自作多情进行换行：

// 期望
<input type="file" @change="(event) => files = event.target.files" accept=".csv" />

// Prettier 后
<input
    type="file"
    @change="
        (event) =>
            files = event.target.files;
    "
    accept=".csv"
/>

有强迫症的实在是不忍直视，社区已经有人提了这种issues，但目前能做的，只有使用注释将其禁用，希望 Prettier 在后续版本能优化一下吧。

总结

重申一下，规则是改不完的。这两篇文章通篇都没有讲解具体的各种规则，也没有贴出一堆的规则配置，因为每个人的项目规范不尽相同，而且规则也不应该由开发者自己一条一条去配。

我们只有通晓 ESLint 的搭建流程，熟悉选项配置，才不至于被这些一条条爆红的波浪线搞得焦头烂额。

最后，来做个总结：

启动配置初始化向导快速生成 ESLint 配置；
配置命令行实现代码的自动检查、定位和修复；
更友好的 VSCode 配置；
使用可分享配置包关闭 ESLint 与 Prettier 冲突的部分规则；
配置 Prettier。

参考资料

文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。

THE END

# 前端 # 代码规范 # ESLint