工具

ESLint

代码质量检查工具

• 检查 JavaScript/TypeScript 代码中的错误
• 发现潜在问题（未使用变量、错误的 API 使用等）
• 强制执行代码规范
• 包含一部分的代码格式功能

安装和使用

• 安装

npm install eslint -D

• 使用
  • 在项目目录下面创建 eslint.config.mjs 文件，配置eslint相关的规则(具体参考官网)
  • 创建index.js测试文件，书写一些代码
  • 在控制台通过 npx eslint index.js 检测当前文件是否符合规范
  • 如果不符合规范，通过 npx eslint --fix index.js 修复当前文件不合法的地方

Prettier

代码格式化工具

• 自动格式化代码（缩进、换行、引号等）
• 保持团队代码风格一致
• 不检查代码逻辑错误

安装和使用

• 安装

npm install prettier -D

• 使用
  • 在项目目录下面创建 .prettierrc 文件，可以配置相关规则，也可以不写，为空也行，后续再添加
  • 还是使用上面的index文件做测试
  • 在控制台通过 npx prettier index.js --check 检测当前文件是否符合规范
  • 如果不符合规范，通过 npx prettier index.js --write 修复当前文件不合法的地方

解决两者的冲突

eslint-config-prettier 官方地址

关闭所有与 Prettier 冲突的 ESLint 规则
具体说明：

1. 为什么需要它：
   • ESLint 有很多代码格式相关的规则（比如 indent、quotes、semi 等）
   • Prettier 也会处理这些格式问题
   • 两者规则可能会冲突，导致 ESLint 报错但 Prettier 又能自动修复
2. 它的作用：
   • 自动关闭所有可能与 Prettier 冲突的 ESLint 规则
   • 让 Prettier 专心负责格式化
   • ESLint 专注于代码质量检查（比如未使用变量、错误的 API 使用等）
3. 使用方式：

 // eslint.config.js (flat config)
   import eslintConfigPrettier from 'eslint-config-prettier'
   
    export default [
     // ...其他配置
     eslintConfigPrettier, // 必须放在最后，覆盖前面的格式规则
    ]

4. 实践
   未配置的情况下

抛出了自定义的不合法规则

配置之后，原来的自定义规则的报错也没了。关闭了eslint和prettier冲突的规则。

eslint-plugin-prettier 官方地址

将 Prettier 作为 ESLint 规则运行 具体来说：

1. 集成 Prettier 到 ESLint：让你可以在 ESLint 的规则体系中使用 Prettier 的代码格式化规则
2. 统一代码检查和格式化：不需要单独运行 Prettier，ESLint 就能同时做代码质量检查和格式化
3. 配合 prettier-eslint 使用：通常还会配合 eslint-config-prettier 来关闭所有与 Prettier 冲突的 ESLint 规则

简单说，它让你能在 ESLint 工作流中无缝使用 Prettier 的格式化能力，一次运行同时搞定代码质量和格式。

配置之后，抛出的错误提示里面指出了prettier的规则

使用npx eslint --fix index.js 修复之后，以prettier为准了，即使两者冲突了，还是以prettier的标准修复了代码。

为什么要使用

eslint-config-prettier 只做一件事：

• 关闭与 Prettier 冲突的 ESLint 规则
• 不会把 Prettier 集成到 ESLint 中

eslint-plugin-prettier 做的事：

• 把 Prettier 作为 ESLint 规则运行
• 在 ESLint 运行时自动格式化代码
• 可以在 ESLint 检查中看到 Prettier 的错误

最佳实践

• 两个一起使用。既能使用规则又能解决提示的报错
• 只使用eslint-config-prettier可能会导致规则遗漏。
• 只使用eslint-plugin-prettier某些报错可能还是提示

结合VS Code编辑器使用

通过终端输入命令行来执行操作也可以，但是很频繁，很麻烦。因此结合编辑器的插件，可以实现代码保存，自动检查和修复代码不符合规则的地方

VS Code编辑器安装如下两个插件

ESLint 插件

"source.fixAll.eslint": "explicit" 因为这个配置需要这个插件，所以必须安装，如果不用这个配置，可以卸载掉这个插件

安装之后，在index测试文件，直接会有红色提示，不用通过命令行来查看不符合的地方

会有红色波浪线

通过修改编辑器的配置文件 setting.json 文件，配置如下

{
  // 开启编辑器保存自动格式化
  "editor.formatOnSave": true,
  // 保存文件时，自动执行某些某些操作，比如：代码修复
  // 这个操作可以避免挨个手动修复
  "editor.codeActionsOnSave": {
     // 自动修复eslint抛出的问题
    "source.fixAll.eslint": "explicit"
  },
}

按照以上配置，保存代码时，会自动使用eslint来检查和修复代码不符合的地方

Prettier插件

"source.fixAll.prettier": "explicit" 因为这个配置需要这个插件，所以必须安装，如果不用这个配置，可以卸载掉这个插件

安装插件之后，通过配置setting.json 文件可以实现保存自动格式化代码

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
     // 自动修复prettier抛出的问题
    "source.fixAll.prettier": "explicit"
  },
}

两者同时配置

{
 "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",  // 先执行
    "source.fixAll.prettier": "explicit"  // 再执行
    // 执行顺序从上到下
  },
}

这样配置，执行会有重复性的问题，同理，安装 eslint-plugin-prettier
安装完之后，就不在需要配置 "source.fixAll.prettier": "explicit"相应的插件也可以卸载了
因为执行eslint格式化的时候，代码质量是按eslint来，格式化风格是按prettier
因此只要配置一个就可以了(同时编辑器的插件prettier也可以卸载了，用不到了)