Koodo Reader 代码质量飞升：ESLint + Prettier 最佳实践

在前端项目开发中，特别是像 Koodo Reader 这种需要长期维护和迭代的项目，代码质量至关重要。统一的代码风格不仅能提高团队协作效率，还能减少潜在的 Bug。本文将深入探讨如何使用 ESLint 和 Prettier 来规范 Koodo Reader 的代码，提升整体的代码质量。

问题场景：风格不统一的困扰

在没有代码规范约束的项目中，开发者往往会按照自己的习惯编写代码，导致代码风格迥异。比如，有人喜欢使用单引号，有人喜欢使用双引号；有人习惯在语句末尾添加分号，有人则认为分号是多余的。这种不统一的风格会给代码阅读和维护带来很大的麻烦。更严重的是，在代码 Review 环节，过多的精力被消耗在代码风格的讨论上，而忽略了代码逻辑本身的正确性。

底层原理：ESLint 与 Prettier 的分工协作

ESLint 和 Prettier 是两个强大的代码质量工具，但它们的功能侧重点有所不同。

• ESLint 主要用于检查代码中的错误和潜在问题，例如未使用的变量、未定义的函数、错误的语法等。它还可以强制执行代码风格规则，例如缩进、空格、换行等。ESLint 的核心在于它的 Rule 机制，开发者可以自定义 Rule 来满足特定的代码规范需求。
• Prettier 则专注于代码格式化，它可以自动将代码格式化成统一的风格，例如统一缩进、统一引号、统一换行等。Prettier 采用了一种“opinionated”的策略，即它只提供有限的配置选项，旨在减少风格争论，让开发者专注于代码逻辑。

在实际项目中，ESLint 和 Prettier 通常会配合使用，ESLint 负责代码检查和部分风格约束，Prettier 负责代码格式化，从而实现代码质量的全面提升。

代码/配置解决方案：ESLint 与 Prettier 的集成

下面以 Koodo Reader 项目为例，介绍如何配置 ESLint 和 Prettier。

1. 安装依赖

   首先，需要在项目中安装 ESLint、Prettier 以及相关的插件。

   

   npm install eslint prettier eslint-plugin-prettier eslint-config-prettier --save-dev
   # 或者使用 yarn
   yarn add eslint prettier eslint-plugin-prettier eslint-config-prettier -D
   

   • eslint-plugin-prettier: 将 Prettier 集成到 ESLint 中，让 ESLint 可以使用 Prettier 来格式化代码。
   • eslint-config-prettier: 禁用 ESLint 中与 Prettier 冲突的规则，避免出现冲突。

2. 配置 ESLint

   在项目根目录下创建 .eslintrc.js 文件，并进行如下配置：

   // .eslintrc.js
   module.exports = {
     env: {
       browser: true, // 浏览器环境
       es2021: true,  // ES2021 语法支持
       node: true,    // Node.js 环境
     },
     extends: [
       'eslint:recommended',
       'plugin:prettier/recommended', // 使用 prettier 插件
     ],
     parserOptions: {
       ecmaVersion: 12, // ES 版本
       sourceType: 'module', // 模块类型
     },
     rules: {
       // 自定义规则
       'no-unused-vars': 'warn', // 未使用变量警告
     },
   };
   

3. 配置 Prettier

   

   在项目根目录下创建 .prettierrc.js 文件，并进行如下配置：

   // .prettierrc.js
   module.exports = {
     semi: false,           // 去掉分号
     singleQuote: true,     // 使用单引号
     trailingComma: 'all',  // 尽可能使用尾随逗号
     printWidth: 120,       // 超过多少字符换行
     tabWidth: 2,           // tab 宽度
     useTabs: false,        // 不使用 tab
   };
   

4. 配置 VS Code 自动格式化

   在 VS Code 中安装 ESLint 和 Prettier 插件，并在 settings.json 文件中添加如下配置：

   

   {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.formatOnSave": true,
     "eslint.validate": [
       "javascript",
       "javascriptreact",
       "typescript",
       "typescriptreact"
     ],
     "files.eol": "\n", // 统一换行符
   }
   

   这样，在保存文件时，VS Code 就会自动使用 ESLint 和 Prettier 来格式化代码。

5. 添加 npm script

   在 package.json 文件中添加如下 script：

   {
     "scripts": {
       "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
       "lint:fix": "eslint . --ext .js,.jsx,.ts,.tsx --fix",
       "format": "prettier --write ."
     }
   }
   

   • npm run lint: 检查代码中的错误和潜在问题。
   • npm run lint:fix: 自动修复代码中的错误和潜在问题。
   • npm run format: 格式化代码。

实战避坑经验总结

1. 避免 ESLint 和 Prettier 规则冲突： eslint-config-prettier 的作用就是禁用 ESLint 中与 Prettier 冲突的规则，确保 ESLint 和 Prettier 能够和谐共处。如果仍然出现冲突，需要仔细检查 ESLint 和 Prettier 的配置，找到冲突的规则并进行调整。
2. 逐步引入代码规范： 如果项目已经存在大量的代码，一次性引入严格的代码规范可能会导致大量的代码需要修改。建议逐步引入代码规范，先从一些简单的规则开始，例如统一缩进、统一引号等，然后逐步增加规则的复杂度。这样可以减少引入代码规范的阻力。
3. 团队协作与沟通： 在引入代码规范之前，需要与团队成员充分沟通，达成共识。代码规范不是一成不变的，可以根据团队的实际情况进行调整。重要的是，团队成员需要理解代码规范的目的，并自觉遵守代码规范。
4. 结合 Git Hooks 使用： 可以使用 husky 和 lint-staged 等工具，在 Git commit 之前自动运行 ESLint 和 Prettier，确保提交的代码符合规范。这可以有效地防止不符合规范的代码进入代码仓库。

通过以上配置，可以有效地提升 Koodo Reader 的代码质量，减少 Bug，提高开发效率。 类似 Nginx 配置，需要考虑反向代理、负载均衡、并发连接数等因素， Koodo Reader 代码质量同样需要持续关注和优化。