TypeScript+Vue 项目代码规范利器：ESLint 和 Prettier 完美配置指南

2025/6/27 12:48:02 182 0 0 0

在现代前端开发中，代码风格的一致性至关重要。一个规范的代码库不仅易于阅读和理解，还能减少潜在的错误，提高团队协作效率。在 TypeScript + Vue 项目中，我们可以借助 ESLint 和 Prettier 这两个强大的工具来实现代码风格的自动化管理。

本文将详细介绍如何在 TypeScript + Vue 项目中配置 ESLint 和 Prettier，并提供一些常用的规则建议，助你打造一个高质量的代码库。

1. 准备工作

确保你已经安装了 Node.js 和 npm (或 yarn)。

2. 安装 ESLint 和 Prettier

首先，在你的 Vue 项目根目录下，使用 npm 或 yarn 安装 ESLint、Prettier 以及相关的插件：

npm install eslint prettier eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-prettier -D
# 或者使用 yarn
yarn add eslint prettier eslint-plugin-vue @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-prettier -D

这些依赖包的作用如下：

eslint: ESLint 的核心库。
prettier: Prettier 的核心库，用于代码格式化。
eslint-plugin-vue: ESLint 针对 Vue 的插件，提供 Vue 相关的 linting 规则。
@typescript-eslint/eslint-plugin: ESLint 针对 TypeScript 的插件，提供 TypeScript 相关的 linting 规则。
@typescript-eslint/parser: TypeScript 的 ESLint 解析器，用于解析 TypeScript 代码。
eslint-config-prettier: 禁用所有可能与 Prettier 冲突的 ESLint 规则，确保 Prettier 优先。
eslint-plugin-prettier: 将 Prettier 集成到 ESLint 中，使得 ESLint 可以使用 Prettier 来格式化代码。

3. 配置 ESLint

接下来，我们需要配置 ESLint。在项目根目录下创建一个 .eslintrc.js 文件，并添加以下内容：

module.exports = {
  root: true,
  env: {
    node: true,
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    '@typescript-eslint/recommended',
    'prettier',
  ],
  parserOptions: {
    ecmaVersion: 2021,
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
  },
  plugins: [
    'vue',
    '@typescript-eslint',
    'prettier',
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'prettier/prettier': 'error',
    // 可以根据项目需求添加自定义规则
    // 示例：强制使用单引号
    'quotes': ['error', 'single'],
    // 示例：禁止使用未使用的变量
    '@typescript-eslint/no-unused-vars': 'warn',
  },
};

这个配置文件做了以下几件事：

root: true: 表示这是 ESLint 的根配置文件，停止在父级目录中查找配置文件。
env: 指定代码运行的环境，例如 node、browser 和 es2021。
extends: 继承 ESLint 的推荐规则、Vue 的推荐规则、TypeScript 的推荐规则以及 Prettier 的配置，确保代码风格的一致性。
parserOptions: 指定 ESLint 的解析器选项，包括 ECMAScript 版本、解析器和源代码类型。
plugins: 使用 ESLint 插件，例如 vue、@typescript-eslint 和 prettier。
rules: 自定义 ESLint 规则。你可以根据项目需求添加或修改规则。例如，'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off' 表示在生产环境下，禁止使用 console.log，但在开发环境下允许使用。

常用的规则建议：

quotes: 强制使用单引号或双引号。
semi: 强制使用或禁止使用分号。
comma-dangle: 控制尾随逗号的风格。
no-unused-vars: 禁止使用未使用的变量。
@typescript-eslint/explicit-function-return-type: 强制函数显式声明返回值类型（TypeScript）。
vue/html-self-closing: 强制 HTML 自闭合标签的风格（Vue）。

4. 配置 Prettier

接下来，我们需要配置 Prettier。在项目根目录下创建一个 .prettierrc.js 文件，并添加以下内容：

module.exports = {
  semi: false, // 去掉分号
  singleQuote: true, // 使用单引号
  trailingComma: 'all', // 尽可能使用尾随逗号
  printWidth: 120, // 超过多少字符换行
  tabWidth: 2, // tab 换行
};

这个配置文件指定了 Prettier 的格式化规则。你可以根据项目需求修改这些规则。

常用的配置建议：

semi: 是否使用分号。
singleQuote: 是否使用单引号。
trailingComma: 是否使用尾随逗号。
printWidth: 每行代码的最大长度。
tabWidth: tab 的宽度。

5. 集成 ESLint 和 Prettier

为了方便使用，我们可以在 package.json 文件中添加一些 scripts：

{
  "scripts": {
    "lint": "eslint src/**/*.{js,ts,vue}",
    "lint:fix": "eslint src/**/*.{js,ts,vue} --fix",
    "format": "prettier --write src/**/*.{js,ts,vue}"
  }
}

现在，你可以使用以下命令来检查代码风格和格式化代码：

npm run lint 或 yarn lint: 检查代码风格。
npm run lint:fix 或 yarn lint:fix: 自动修复代码风格问题。
npm run format 或 yarn format: 使用 Prettier 格式化代码。

6. 在 VS Code 中集成

为了在 VS Code 中实时检查代码风格和格式化代码，你可以安装 ESLint 和 Prettier 插件。

ESLint: 在 VS Code 中搜索 ESLint 插件并安装。
Prettier - Code formatter: 在 VS Code 中搜索 Prettier 插件并安装。

安装完成后，需要在 VS Code 的设置中启用自动格式化功能。打开 VS Code 的设置（File -> Preferences -> Settings），搜索 format on save，勾选 Editor: Format On Save。

此外，你还需要配置 VS Code 使用 ESLint 和 Prettier 来格式化代码。在 VS Code 的设置中，搜索 eslint.validate，并添加以下配置：

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

这样，每次保存文件时，VS Code 就会自动使用 ESLint 和 Prettier 来检查代码风格和格式化代码。

7. 忽略文件

有时候，我们希望 ESLint 和 Prettier 忽略某些文件或目录。可以在项目根目录下创建 .eslintignore 和 .prettierignore 文件，并在文件中添加需要忽略的文件或目录。

例如，忽略 node_modules 目录：

# .eslintignore
node_modules/

# .prettierignore
node_modules/

8. 总结

通过以上步骤，你已经成功地在 TypeScript + Vue 项目中配置了 ESLint 和 Prettier。现在，你可以享受到代码风格自动化管理带来的便利，提高代码质量和可维护性。记住，代码规范是一个持续改进的过程，你应该根据项目需求不断调整和优化 ESLint 和 Prettier 的配置。

希望本文对你有所帮助！如有任何问题，欢迎留言讨论。

代码规范大师 TypeScript Vue ESLint