185 - 代码检查工具 - Prettier - 与 ESLint 的配合使用

代码检查工具 - Prettier - 与 ESLint 的配合使用

在前端开发的世界里，代码的规范性和一致性是至关重要的。代码检查工具可以帮助我们确保代码符合一定的规范，提高代码的可读性和可维护性。Prettier 和 ESLint 是两个非常流行的代码检查工具，它们各有优势，将它们配合使用能让我们的代码质量更上一层楼。

1. Prettier 和 ESLint 简介

1.1 Prettier

Prettier 是一个专注于代码格式化的工具。它会解析你的代码，按照一套既定的规则重新输出格式化后的代码。Prettier 强调代码风格的一致性，它不关心代码的语法错误或者逻辑问题，只关注代码的外观。例如，它会自动调整代码的缩进、换行、引号的使用等。

// 未格式化的代码
const arr =[1,2,3];
// 使用 Prettier 格式化后的代码
const arr = [1, 2, 3];

1.2 ESLint

ESLint 是一个功能强大的代码检查工具，它可以帮助我们发现代码中的语法错误、潜在的逻辑问题以及不符合编码规范的地方。ESLint 具有高度的可配置性，我们可以根据项目的需求自定义规则。

// ESLint 会检查出这里缺少分号
const message = 'Hello World'
// 修复后的代码
const message = 'Hello World';

2. Prettier 和 ESLint 的区别

3. 为什么要配合使用

虽然 Prettier 和 ESLint 都能对代码进行一定的处理，但它们的侧重点不同。Prettier 负责让代码的格式统一美观，而 ESLint 则专注于代码的质量和潜在问题。单独使用其中一个工具可能无法满足我们的全部需求，将它们配合使用可以取长补短，既保证代码格式的一致性，又能发现和解决代码中的各种问题。

4. 配合使用的步骤

4.1 安装依赖

首先，我们需要在项目中安装 Prettier 和 ESLint。可以使用 npm 或者 yarn 进行安装。

npm install --save-dev prettier eslint

4.2 配置 ESLint

初始化 ESLint 配置文件，可以通过以下命令进行初始化：

npx eslint --init

按照提示选择适合项目的配置选项，ESLint 会生成一个 .eslintrc.js 文件，我们可以在这个文件中自定义规则。

4.3 配置 Prettier

创建一个 .prettierrc.js 文件，用于配置 Prettier 的规则。例如：

module.exports = {
  semi: true, // 句末使用分号
  singleQuote: true, // 使用单引号
  tabWidth: 2 // 缩进为 2 个空格
};

4.4 解决规则冲突

由于 Prettier 和 ESLint 的规则可能会存在冲突，我们需要安装 eslint-config-prettier 来关闭 ESLint 中与 Prettier 冲突的规则。

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

然后在 .eslintrc.js 中添加 prettier 到 extends 数组中：

module.exports = {
  extends: [
    // 其他配置
    'prettier'
  ]
};

4.5 配置脚本

在 package.json 中添加脚本，方便我们运行代码检查和格式化命令。

{
  "scripts": {
    "lint": "eslint src", // 检查 src 目录下的代码
    "format": "prettier --write src" // 格式化 src 目录下的代码
  }
}

4.6 使用

现在我们可以使用以下命令来检查和格式化代码：

npm run lint # 运行 ESLint 检查代码
npm run format # 运行 Prettier 格式化代码

5. 编辑器集成

为了提高开发效率，我们可以将 Prettier 和 ESLint 集成到编辑器中。以 VS Code 为例，我们可以安装 ESLint 和 Prettier - Code formatter 插件，然后在 settings.json 中进行配置：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

这样，在保存文件时，VS Code 会自动运行 ESLint 进行代码检查并修复问题，同时使用 Prettier 进行代码格式化。

6. 总结

Prettier 和 ESLint 是前端开发中不可或缺的两个工具，它们分别从代码格式和代码质量的角度对代码进行处理。通过将它们配合使用，我们可以确保代码既美观又健壮。按照上述步骤进行配置和使用，能够让我们的开发过程更加高效，代码质量更有保障。希望大家在实际项目中能够充分发挥这两个工具的优势，编写出高质量的代码。