JS `Linting` (ESLint) 与代码格式化 (Prettier)：统一代码风格，提升团队协作

各位靓仔靓女们，晚上好！我是今晚的码农讲师，江湖人称“BUG终结者”。今天咱们不聊高深的算法，也不谈复杂的架构，就来聊聊每个程序员都离不开，但又常常被忽略的两个好伙伴：ESLint 和 Prettier。

这两位可不是什么路人甲，它们可是能让你的代码“改头换面”，统一代码风格，提升团队协作效率的超级英雄！

想象一下，如果没有它们，你的代码可能会变成什么样？

• 变量命名： a, b, temp, data, _result… 满天飞，半年后自己都不知道这些变量是干嘛的。
• 缩进： 两个空格、四个空格、Tab… 乱七八糟，代码像喝醉了酒一样摇摇晃晃。
• 引号： 单引号、双引号、反引号… 随心所欲，代码风格像打了补丁的衣服。
• 分号： 有的分号多余，有的分号缺失… 运行起来可能就给你一个惊喜（BUG）。

这样的代码，你自己看着都头疼，更别说让其他同事来维护了。

所以，是时候请出我们的主角了：ESLint 和 Prettier！

第一部分：ESLint – 代码质量的守护者

ESLint 就像一位严厉的代码审查员，它会扫描你的代码，找出潜在的错误、不规范的写法，并给出修改建议。它不仅能帮你提高代码质量，还能让你养成良好的编码习惯。

1. ESLint 是什么？

简单来说，ESLint 是一个 JavaScript 的代码检查工具。它可以：

• 发现语法错误： 比如未定义的变量、错误的赋值等。
• 强制代码风格： 比如缩进、空格、引号等。
• 检查潜在问题： 比如未使用过的变量、不安全的 eval() 等。

2. 如何安装和配置 ESLint？

首先，你需要安装 Node.js 和 npm (Node Package Manager)。 然后，在你的项目目录下，执行以下命令：

npm install eslint --save-dev

这个命令会将 ESLint 安装到你的项目的开发依赖中。

接下来，你需要创建一个 ESLint 的配置文件 .eslintrc.js (或者 .eslintrc.json, .eslintrc.yml 等等)。你可以使用 ESLint 的初始化工具来创建这个文件：

npx eslint --init

这个命令会引导你回答一些问题，比如你想使用哪种风格规范，你的代码运行在什么环境下等等。根据你的回答，ESLint 会自动生成一个适合你的配置文件。

一个典型的 .eslintrc.js 文件可能长这样：

module.exports = {
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": [
    "@typescript-eslint"
  ],
  "rules": {
    "no-unused-vars": "warn",
    "no-console": "warn",
    "semi": ["error", "always"],
    "quotes": ["error", "double"]
  }
};

这个配置文件定义了 ESLint 的一些基本设置：

• env: 指定代码运行的环境，比如浏览器、Node.js 等。
• extends: 继承一些现有的规则集，比如 eslint:recommended (ESLint 官方推荐的规则) 和 plugin:@typescript-eslint/recommended (TypeScript 官方推荐的规则)。
• parser: 指定代码的解析器，比如 @typescript-eslint/parser (用于解析 TypeScript 代码)。
• parserOptions: 指定解析器的选项，比如 ECMAScript 版本和模块类型。
• plugins: 指定要使用的插件，比如 @typescript-eslint (用于支持 TypeScript 的规则)。
• rules: 定义具体的规则，以及它们的级别。规则的级别可以是：
  • off 或 0: 禁用该规则。
  • warn 或 1: 启用该规则，但只发出警告。
  • error 或 2: 启用该规则，并将其视为错误。

3. ESLint 的常用规则

ESLint 提供了大量的规则，可以满足各种各样的需求。这里列出一些常用的规则：

规则名称	描述	示例
no-unused-vars	禁止使用未使用的变量。
no-console	禁止在代码中使用 console.log 等语句。
semi	强制使用或禁止使用分号。	javascript // 错误示例 const a = 1 // 正确示例 const a = 1; // 可以配置为禁止使用分号，但在某些情况下仍然需要使用分号，比如防止 IIFE 出错 ;(function() { })();