ESLint + Prettier：代码洁癖者必备工具！

在前端工程的团队协作中，随着代码内容不断增多、协作人员日益增加，代码规范愈发必不可少。规范的代码不仅能提升代码的可读性与可维护性，还能极大地提高团队协作效率。当下，常用的规范技术栈选择为 ESLint 和 Prettier，它们二者在保障代码质量、统一代码风格方面发挥着重要作用。

1. 认识ESLint和Prettier

简而言之，Prettier专注于代码格式化，而ESLint除了代码格式规范外，还能用于代码质量检查，比如：提示未使用的变量、函数等。
另外，ESLint拥有大量的规则，涵盖了语法错误检查、代码风格约束和代码质量控制等多个方面。规则可以根据项目需求进行精细配置，例如可以规定变量命名的风格（如驼峰命名法、下划线命名法）、函数的最大长度、是否允许使用某些特定的语法等；
Prettier规则相对较少且侧重于代码的格式细节，它的规则是固定的，不允许用户自定义规则的逻辑，用户只能调整一些基本的格式选项，如缩进的空格数、每行代码的最大长度、是否使用分号等。
在Prettier官网中，有这样一句话， use Prettier for formatting and linters for catching bugs!，ESLint 更像是一个 “代码警察”，重点关注代码的正确性和质量，帮助开发者发现和解决代码中的问题；而 Prettier 则像是一个 “代码美容师”，专注于让代码看起来更加整洁、美观，统一代码的格式风格。
在实际项目中，通常会将两者结合使用，以达到最佳的代码规范效果。

提醒：无论是修改 ESLint 配置，还是调整 Prettier 设置，都务必要重启 IDE。否则，这些修改有时无法生效，会让你误以为是自己配置出错了！

2. 安装ESLint

官网

2.1. 安装

1
npm init @eslint/config@latest

运行命令后，系统会提出以下问题，随后创建文件eslint.config.js。

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
npm init @eslint/config@latest
Need to install the following packages:
@eslint/create-config@1.5.0
Ok to proceed? (y) y
> project-name@1.0.0 npx
> create-config

@eslint/create-config: v1.5.0

√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · javascript
√ Where does your code run? · browser
The config that you've selected requires the following dependencies:

eslint, globals, @eslint/js, eslint-plugin-vue
√ Would you like to install them now? · No / Yes
√ Which package manager do you want to use? · npm
☕️Installing...

added 82 packages, and audited 524 packages in 15s

188 packages are looking for funding
  run `npm fund` for details

2 moderate severity vulnerabilities

To address all issues, run:
  npm audit fix

Run `npm audit` for details.
Successfully created project-name\path\eslint.config.js file.

该过程增加依赖有：

1
2
3
4
"@eslint/js": "^9.21.0",
"eslint": "^9.21.0",
"eslint-plugin-vue": "^10.0.0",
"globals": "^16.0.0",

2.2. 配置文件eslint.config.js

文件内容：

1
2
3
4
5
6
7
8
9
10
11
12
import globals from "globals";
import pluginJs from "@eslint/js";
import pluginVue from "eslint-plugin-vue";


/** @type {import('eslint').Linter.Config[]} */
export default [
  {files: ["**/*.{js,mjs,cjs,vue}"]},
  {languageOptions: { globals: globals.browser }},
  pluginJs.configs.recommended,
  ...pluginVue.configs["flat/essential"],
];

2.3. 配置脚本

在package.json文件的scripts中增加：

1
2
3
"scripts": {
    "lint": "eslint --ext .js,.vue src"
}

其中，

  • eslint 这是命令的主体，代表要调用 ESLint 工具；
  • --ext 是 ESLint 的一个命令行选项，其全称为 –extentions，用于指定 ESLint 要检查的文件扩展名;
  • .js,.vue 指定了 ESLint 要检查的文件扩展名;
  • src 指定要检查的文件或目录路径;
    eslint --ext .js,.vue src 命令的作用是让 ESLint 检查 src 目录下所有扩展名为 .js 和 .vue 的文件，根据 ESLint 的配置规则对这些文件中的代码进行分析，并报告不符合规则的代码问题；

2.4. 执行脚本

在终端执行脚本：

1
npm run lint

报告内容：

1
2
3
4
5
6
7
8
9
10
11
XXX\ase.js
   35:12  error  'data' is not defined                          no-undef
  155:21  error  'de' is already defined                        no-redeclare
  186:13  error  'height' is assigned a value but never used    no-unused-vars
  214:9   error  Unexpected lexical declaration in case block   no-case-declarations
  214:13  error  'gaodeMap' is assigned a value but never used  no-unused-vars

XXX\Demo.vue
  1:1  error  Component name "Demo" should always be multi-word  vue/multi-word-component-names

✖ 12 problems (12 errors, 0 warnings)

运行此脚本，便能轻松定位我们所写代码的具体问题所在。

2.5. 忽略某些文件检查

忽略文件-官网

1
2
3
{
    ignores: ["src/utils/noimportant/*"]
}

该配置可以在执行脚本时忽略配置的文件。

3. 安装Prettier

3.1. 安装

1
npm install --save-dev --save-exact prettier

3.2. 配置文件

配置文件支持多种形式，详细内容见配置文件-官网。
创建配置文件prettier.config.mjs

1
2
3
4
5
6
7
8
const config = {
  tabWidth: 2, // 缩进2个空格
  semi: false, // 不加分号
  singleQuote: true, // 使用单引号
  trailingComma: 'none' // 末尾不加逗号
}

export default config

3.3. 配置脚本

在package.json文件的scripts中增加：

1
2
3
"scripts": {
    "prettier": "prettier --write \"**/*.{js,vue}\""
}
  • prettier 要调用的工具名称;
  • --write Prettier 的一个命令行选项，其作用是让 Prettier 把格式化后的代码直接写回到原文件中;
  • "**/*.{js,vue}" 一个文件路径模式，用于指定 Prettier 要处理哪些文件;
  • **/表示递归匹配项目中的所有目录，不管目录层级有多深;
  • *.{js,vue} 表示匹配所有扩展名为 .js 或者 .vue 的文件;

3.4. 执行脚本

在终端执行脚本：

1
npm run prettier

格式化所有有问题的文件

3.5. 忽略某些文件检查

忽略文件-官网
创建文件.prettierignore，在文件中增加忽略的文件路径

1
src/utils/noimportant/*

4. ESLint与Prettier集成

ESLint与Prettier集成时会有规则上的冲突，为了解决冲突，可以配置eslint-config-prettier，这个插件的主要作用就是关闭 ESLint 中所有不必要的或者可能与 Prettier 冲突的规则。它提供了一个 ESLint 配置，当你将其集成到 ESLint 的配置中时，会自动禁用那些与 Prettier 格式化规则冲突的 ESLint 规则，从而让 ESLint 和 Prettier 能够和谐共处。

4.1. 安装eslint-config-prettier

1
npm i -D eslint-config-prettier

4.2. 配置eslint-config-prettier

在 ESLint 的配置文件中，将 eslint-config-prettier 添加到 extends 数组中，通常将其放在数组的最后一项，以确保它能覆盖其他可能冲突的规则。

1
2
3
4
5
6
7
import someConfig from "some-other-config-you-use";
import eslintConfigPrettier from "eslint-config-prettier";

export default [
  someConfig,
  eslintConfigPrettier,
];

4.3. 安装eslint-plugin-prettier

为了进一步增强 ESLint 和 Prettier 的集成，通常还会搭配使用 eslint-plugin-prettier。eslint-plugin-prettier 会将 Prettier 的格式化结果作为 ESLint 的规则来运行，这样在使用 ESLint 检查代码时，也会检查代码是否符合 Prettier 的格式化规则，并且可以使用 ESLint 的 –fix 选项来自动修复不符合 Prettier 规则的代码。

1
npm install --save-dev eslint-plugin-prettier

4.4. 配置eslint-plugin-prettier

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
import globals from 'globals'
import pluginJs from '@eslint/js'
import pluginVue from 'eslint-plugin-vue'
import eslintConfigPrettier from 'eslint-config-prettier'
import eslintPluginPrettier from 'eslint-plugin-prettier'

/** @type {import('eslint').Linter.Config[]} */
export default [
  { files: ['**/*.{js,mjs,cjs,vue}'] },
  { languageOptions: { globals: globals.browser } },
  pluginJs.configs.recommended,
  ...pluginVue.configs['flat/essential'],
  {
    ignores: ['src/utils/smap/*'],
  },
  {
    files: ['**/*.{js,mjs,cjs,vue}'],
    plugins: {
      prettier: eslintPluginPrettier,
    },
    rules: {
      ...eslintConfigPrettier.rules,
      'prettier/prettier': 'error',
    },
  },
]

5. VSCode集成

在插件库安装插件： ESLint 和 Prettier - Code formatter
可以通过在文件右键选择【格式化文档】进行单个文件的格式化；