VSCode 使用 ESLint + Prettier 格式化代码

在现代的前端开发中，代码质量和一致性是非常重要的。为了确保代码风格的一致性，开发者通常会使用代码格式化工具。ESLint 和 Prettier 是两个非常流行的工具，它们可以帮助开发者自动格式化代码并检查代码中的潜在问题。本文将详细介绍如何在 VSCode 中配置 ESLint 和 Prettier，以实现自动格式化代码的功能。

1. 安装必要的插件

首先，我们需要在 VSCode 中安装以下两个插件：

• ESLint: 用于检查和修复 JavaScript 代码中的问题。
• Prettier - Code formatter: 用于自动格式化代码。

你可以在 VSCode 的扩展市场中搜索并安装这两个插件。

2. 初始化项目

在开始配置之前，确保你已经初始化了一个 Node.js 项目。如果你还没有初始化项目，可以通过以下命令创建一个新的项目：

mkdir my-project
cd my-project
npm init -y

3. 安装 ESLint 和 Prettier

接下来，我们需要在项目中安装 ESLint 和 Prettier 作为开发依赖：

npm install eslint prettier --save-dev

4. 配置 ESLint

4.1 初始化 ESLint 配置

在项目根目录下运行以下命令来初始化 ESLint 配置：

npx eslint --init

这个命令会引导你完成一系列问题，帮助你生成一个 .eslintrc.js 配置文件。你可以根据自己的需求选择配置选项。

4.2 配置 ESLint

生成的 .eslintrc.js 文件可能如下所示：

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint'],
  rules: {},
};

你可以根据需要修改这个配置文件。例如，你可以添加或修改规则来满足你的代码风格要求。

5. 配置 Prettier

5.1 创建 Prettier 配置文件

在项目根目录下创建一个 .prettierrc 文件，用于配置 Prettier 的格式化规则。例如：

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

5.2 创建 Prettier 忽略文件

你还可以创建一个 .prettierignore 文件，用于指定哪些文件或目录不需要被 Prettier 格式化。例如：

node_modules/
dist/

6. 配置 VSCode

6.1 配置 ESLint 和 Prettier 的集成

在 VSCode 中，打开设置（可以通过 Ctrl + , 快捷键打开），然后搜索 eslint 和 prettier，找到以下设置项并进行配置：

• ESLint: Auto Fix On Save: 设置为 true，以便在保存文件时自动修复 ESLint 错误。
• Prettier: Require Config: 设置为 true，以确保 Prettier 使用项目中的配置文件。
• Editor: Format On Save: 设置为 true，以便在保存文件时自动格式化代码。

6.2 配置默认格式化工具

在 VSCode 的设置中，搜索 format，找到 Editor: Default Formatter，并将其设置为 Prettier - Code formatter。

6.3 配置文件关联

如果你使用的是 TypeScript 或 React，你可能需要配置 VSCode 以正确识别文件类型。你可以在 .vscode/settings.json 文件中添加以下配置：

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

7. 解决 ESLint 和 Prettier 的冲突

ESLint 和 Prettier 有时会有一些规则冲突，例如缩进、引号等。为了解决这些冲突，我们可以安装 eslint-config-prettier 和 eslint-plugin-prettier 插件：

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

然后在 .eslintrc.js 文件中添加以下配置：

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended', // 添加这一行
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint', 'prettier'], // 添加 'prettier'
  rules: {
    'prettier/prettier': 'error', // 添加这一行
  },
};

这样，ESLint 和 Prettier 的规则就不会冲突了。

8. 测试配置

现在，你可以打开一个 JavaScript 或 TypeScript 文件，尝试保存文件，看看是否会自动格式化和修复代码中的问题。

9. 总结

通过以上步骤，你已经成功在 VSCode 中配置了 ESLint 和 Prettier，实现了自动格式化代码的功能。这不仅提高了代码的可读性，还减少了代码审查时的不必要讨论。希望这篇文章对你有所帮助，祝你在开发过程中写出更高质量的代码！