ESLint 与 Prettier：自动化 JavaScript 代码规范

ESLint 与 Prettier：代码界的“老妈子”和“洁癖症患者”

各位码友们，有没有经历过这样的场景？你辛辛苦苦写了一段 JavaScript 代码，信心满满地提交到代码仓库，结果 Review 的时候，被同事指出了各种奇奇怪怪的问题：

“这里少了个分号，代码风格不统一啊！”
“这个变量命名太随意了，让人摸不着头脑！”
“缩进用的空格和 Tab 混用，看着好难受！”

当时的心情，估计和吃了只苍蝇差不多。代码质量是保证了，但是也严重影响了摸鱼的心情。

其实，这些问题完全可以通过工具来避免。今天就给大家介绍两位代码界的“老妈子”和“洁癖症患者”—— ESLint 和 Prettier。它们能帮你自动检查和格式化 JavaScript 代码，让你的代码既符合规范，又美观整洁，从此告别代码 Review 的尴尬时刻。

ESLint：代码界的“老妈子”

ESLint 就像一位唠叨的老妈子，时刻盯着你的代码，检查是否存在潜在的问题。它基于规则来分析代码，这些规则涵盖了代码风格、潜在错误、最佳实践等方面。你可以根据自己的喜好配置这些规则，让 ESLint 按照你的标准来检查代码。

ESLint 能做什么？

语法错误检查： ESLint 能发现一些常见的语法错误，例如：
- 使用了未定义的变量
- 缺少分号
- 括号不匹配
代码风格规范： ESLint 能够强制执行一些代码风格规范，例如：
- 缩进使用空格还是 Tab
- 单引号还是双引号
- 变量命名规范
潜在错误检测： ESLint 还能发现一些潜在的错误，例如：
- 使用了 eval() 函数
- 在循环中使用 await
- 没有处理 Promise 的 reject 情况
最佳实践建议： ESLint 还会给出一些最佳实践建议，例如：
- 使用 const 和 let 代替 var
- 避免使用 == 和 !=，而是使用 === 和 !==
- 使用箭头函数简化代码

举个例子：

假设你写了这样一段代码：

function add(a,b) {
  return a + b
}
console.log(add(1, 2))

如果你配置了 ESLint 的规则，要求函数名和括号之间不能有空格，并且语句结尾必须有分号，那么 ESLint 就会提示你：

Function name should not be followed by a space.
Missing semicolon.

然后，你就可以根据 ESLint 的提示，修改代码为：

function add(a, b) {
  return a + b;
}
console.log(add(1, 2));

这样，你的代码就符合了 ESLint 的规范，看起来也更整洁了。

Prettier：代码界的“洁癖症患者”

Prettier 就像一位有洁癖症的患者，它会强制格式化你的代码，让你的代码看起来非常统一和美观。它会按照预设的规则，自动调整代码的缩进、空格、换行、引号等，让你再也不用为代码格式而烦恼。

Prettier 能做什么？

统一代码风格： Prettier 会强制执行一套统一的代码风格，例如：
- 使用统一的缩进方式
- 统一使用单引号或双引号
- 统一在对象字面量中添加空格
自动格式化代码： Prettier 会自动格式化你的代码，例如：
- 自动调整代码的缩进
- 自动换行
- 自动添加或删除空格

举个例子：

假设你写了这样一段代码：

const obj = {  name: "John",age : 30, city: "New York"  };
function greet(name){
return "Hello, " + name + "!";
}

如果你使用 Prettier 格式化这段代码，它会自动调整为：

const obj = {
  name: "John",
  age: 30,
  city: "New York",
};

function greet(name) {
  return "Hello, " + name + "!";
}

可以看到，Prettier 自动添加了空格，调整了缩进，让代码看起来更清晰易读。

ESLint 和 Prettier 的完美配合

ESLint 和 Prettier 虽然都能检查和格式化代码，但它们的侧重点不同。ESLint 更关注代码质量和潜在错误，而 Prettier 更关注代码风格和美观。因此，它们可以完美配合，共同提升代码质量和可读性。

如何配置 ESLint 和 Prettier？

配置 ESLint 和 Prettier 其实很简单，只需要按照以下步骤操作即可：

安装依赖：

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

eslint: ESLint 本身。
prettier: Prettier 本身。
eslint-plugin-prettier: 允许你将 Prettier 作为 ESLint 的一个规则来运行，这样 ESLint 就可以使用 Prettier 的格式化规则来检查代码。
eslint-config-prettier: 禁用所有可能与 Prettier 冲突的 ESLint 规则，确保 ESLint 和 Prettier 不会互相干扰。

配置 ESLint：

在项目根目录下创建一个 .eslintrc.js 文件，并添加以下内容：

module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  env: {
    node: true,
    es6: true,
  },
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
  },
  rules: {
    // 在这里添加自定义的 ESLint 规则
  },
};

extends: 继承 ESLint 的推荐规则，以及 eslint-plugin-prettier 的推荐配置。
env: 指定代码运行的环境，例如 Node.js 和 ES6。
parserOptions: 指定 JavaScript 的版本和模块类型。
rules: 在这里可以添加自定义的 ESLint 规则，例如：

rules: {
  "no-console": "warn", // 禁止使用 console
  "no-unused-vars": "warn", // 禁止定义未使用的变量
}

配置 Prettier：

在项目根目录下创建一个 .prettierrc.js 文件，并添加以下内容：

module.exports = {
  semi: true, // 在语句结尾添加分号
  singleQuote: true, // 使用单引号
  trailingComma: "all", // 在多行逗号分隔的句法结构中，尽可能打印尾随逗号
  printWidth: 120, // 每行代码的最大长度
  tabWidth: 2, // 缩进使用的空格数
};

semi: 是否在语句结尾添加分号。
singleQuote: 是否使用单引号。
trailingComma: 是否在多行逗号分隔的句法结构中添加尾随逗号。
printWidth: 每行代码的最大长度。
tabWidth: 缩进使用的空格数。

你也可以选择使用 .prettierrc.json 或 .prettierrc.yml 文件来配置 Prettier。

配置 package.json：

在 package.json 文件中添加以下脚本：

"scripts": {
  "lint": "eslint . --ext .js",
  "format": "prettier --write ."
}

lint: 运行 ESLint 检查代码。
format: 运行 Prettier 格式化代码。

使用 ESLint 和 Prettier：

在命令行中运行以下命令：

npm run lint: 检查代码是否符合 ESLint 的规范。
npm run format: 格式化代码，使其符合 Prettier 的规范。

你也可以将 ESLint 和 Prettier 集成到你的代码编辑器中，例如 VS Code，这样就可以在编写代码的同时进行检查和格式化。

总结

ESLint 和 Prettier 是 JavaScript 开发中不可或缺的工具。它们能帮你自动检查和格式化代码，让你的代码既符合规范，又美观整洁。有了它们，你就可以告别代码 Review 的尴尬时刻，专注于编写高质量的代码。

想象一下，有了 ESLint 和 Prettier，你的代码就像一位经过精心打理的绅士，举止优雅，风度翩翩，让人赏心悦目。而没有它们的代码，就像一位邋遢的宅男，蓬头垢面，让人不忍直视。

所以，赶紧给你的代码也找一位“老妈子”和一位“洁癖症患者”吧，让它们帮你打造完美的代码！

ESLint 与 Prettier：代码界的“老妈子”和“洁癖症患者”

发表回复 取消回复

发表回复取消回复