ESLint + Prettier 项目实践指南

目录

• 本文你将可以学到
• 前言
• 解决方案
  • 针对单文件处理
  • 针对批量处理
  • 额外的错误处理
• 小结

本文你将可以学到

1. 如何配置 ESLint 与 Prettier 结合
2. 如何批量处理 ESLint 错误
3. 如何解决 ESLint 错误

前言

最近接手了一个项目，这个项目之前没有使用 ESLint 进行管理，但项目自身是有相应的 .eslintrc.json 相应的配置的，估计之前的人就是没有开启 ESLint 插件，导致诸多文件有这样的报错。

解决方案

针对单文件处理

作者自身配置了 prettier + eslint 的方式来修复代码，针对个别文件只需要简单的保存一下即可。

关于如何配置 Prettier 与 ESLint 结合

在 settings.json 下，设置只有保存时才会执行自动修复

注意: settings.json 一般会有两个，一个是针对当前项目的，一个是针对用户的，更改时注意区分，优先级为 当前项目设置 > 用户设置

添加保存时执行 ESLint 修复：

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "explicit"
    }
}

针对 TypeScript 文件的配置：

{
    "[typescript]": {
        "editor.formatOnSave": false,
        "editor.defaultFormatter": "dbaeumer.vscode-eslint"
    }
}

针对不想走 ESLint 的文件配置：

{
    "[javascript]": {
        "editor.formatOnSave": false,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

工作原理

当保存文件时：

• editor.formatOnSave 会触发 Prettier 格式化
• source.fixAll.eslint 会运行 ESLint 自动修复
• 由于 Prettier 规则已经集成到 ESLint 中，所以最终的代码既符合 Prettier 的格式化规则，也符合 ESLint 的代码规则

针对批量处理

因为项目中涉及的文件过多，不可能每个文件打开，然后 Ctrl+S 一下，我们可以通过配置命令来批量处理。

在 package.json 中添加批量处理命令：

{
    "scripts": {
        "eslint": "eslint \"src/app/implementation/programs/pct/**/!(*.spec).{ts,tsx}\" --fix"
    }
}

命令说明：处理 src/app/implementation/programs/pct 下的所有 .ts、.tsx 文件，但不包含 .spec.ts 文件。

重要提示：避免执行过程中出现问题，强烈建议新建一个分支进行操作

执行命令：

npm run eslint

额外的错误处理

执行完 npm run eslint 后，可能还会有一些问题没有解决：

这些错误通常分为几类：

• max-len（字符过长）
• no-shadow（变量遮蔽/覆盖） 等...

解决方式

1. 更改 .eslintrc.json（不推荐）
   • 因为团队的 .eslintrc.json 都是统一的
   • 更改配置本身就是一件不符合规范的事情
2. 针对各个文件进行手动修改（推荐）
   • 遵循团队规范
   • 提高代码质量

小结

注意事项

• 批量修复前要做好代码备份
• 某些错误需要手动处理以确保代码质量
• 保持团队配置的一致性

规范的代码风格，不仅可以提高代码的可读性和可维护性，还能减少团队协作中的摩擦，提升开发效率。