JavaScript Lint

1. Linter

$a.$ 基本概念

Linter 是一种静态代码分析工具，它会像一位严格的“代码审查员”一样，扫描代码并根据预设的规则集报告问题。

Linter 的工作原理是，它首先将代码解析成一个抽象语法树 (Abstract Syntax Tree, AST)。然后，Linter 会遍历这棵树的各个节点，检查每个节点是否符合已定义的规则。例如，当它访问到一个变量声明节点时，就可以检查这个变量是否在后续代码中被使用了。

以目前最流行的 JavaScript Linter ESLint 为例，它的作用远不止检查代码风格：

发现潜在错误：捕获常见的编码错误，如使用未声明的变量、在 switch 语句中缺少 break、函数中有无法访问到的代码等。
统一代码风格：确保代码遵循风格指南，如缩进、引号、空格等。
强制最佳实践：提示开发者避免使用一些不推荐的语法（如 with 语句），或鼓励使用更现代的写法。

$b.$ ESLint 使用指南

安装：ESLint 应作为项目的开发依赖进行安装。

npm install eslint --save-dev

初始化：运行初始化命令，它会引导你完成一系列问题，并自动生成一个配置文件。

npx eslint --init

这会创建一个 .eslintrc.js (或 .json) 文件。

运行检查：在 package.json 中添加一个 scripts 命令来方便地运行检查。

"scripts": {
    "lint": "eslint ."
}

现在我们就可以通过 npm run lint 来检查整个项目。

4. Formatter

$a.$ 与 Linter 的区别

Formatter 与 Linter 的功能有重叠，但侧重点不同：

Linter (如 ESLint)：主要关注代码质量和逻辑错误，同时也包含一些格式化规则。
Formatter (如 Prettier)：只关注代码的格式。它会拿走你的代码，完全忽略其内容，然后根据它自己的规则重新“打印”出来，确保所有代码的布局（缩进、间距、换行）都完全一致。

如果说 Linter 是指出你“文章中这个句子语法不通”的编辑，那么 Formatter 就是负责将你的手稿排版成精美书籍的印刷工人，它只关心字体、边距和行距。

$b.$ Prettier

Prettier 是一个非常流行且“固执”（opinionated）的代码格式化工具。它的大部分规则都是预设且不可更改的。这样做的好处是，团队无需再为“两个空格还是四个空格”这类问题争论不休，一切都交给 Prettier 决定。

Prettier 的使用方法如下：

安装：同样作为开发依赖安装。官方推荐使用 --save-exact 来锁定版本，防止自动更新破坏格式一致性。

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

配置：创建一个 .prettierrc.json 文件来配置少数可用的选项。

{
    "semi": true,
    "singleQuote": true,
    "tabWidth": 2,
    "trailingComma": "es5"
}

运行格式化：在 package.json 中添加脚本。

"scripts": {
    "format": "prettier --write ."
}

运行 npm run format 会直接修改文件，使其符合 Prettier 的格式。

5. ESLint 与 Prettier 的协同工作

由于 ESLint 和 Prettier 都包含格式化规则，当它们一起使用时，规则可能会发生冲突。例如，ESLint 要求单引号，而 Prettier 配置了双引号。

解决方案是让它们“分工合作”：让 Prettier 专门负责代码格式化，而 ESLint 负责代码质量检查。

我们需要一个插件来关闭 ESLint 中所有与 Prettier 冲突的格式化规则。

安装 eslint-config-prettier：

npm install eslint-config-prettier --save-dev

修改 .eslintrc.js：将 prettier 添加到 extends 数组的最后。

// .eslintrc.js
module.exports = {
    // ...其他配置
    extends: [
        'eslint:recommended',
        'airbnb-base', // 假如你使用了 airbnb 规则
        'prettier', // 确保 prettier 是最后一个，它会覆盖前面的格式规则
    ],
    // ...
};

现在，ESLint 不会再报告任何格式问题，这些问题已完全交由 Prettier 处理。

JavaScript Lint

1. Linter

a.a.a. 基本概念

b.b.b. ESLint 使用指南