TypeScript 项目中无缝集成 ESLint、Prettier 和 Lint-Staged

在 TypeScript 项目中，维持代码风格和最佳实践至关重要。Eslint、Prettier 和 Lint-Staged 这三个强大的工具可以帮助我们实现这一目标，确保代码一致、无错误且符合行业标准。

在本文中，我们将深入了解如何将这些工具无缝集成到 TypeScript 项目中，让您轻松地提高代码质量和可维护性。

前置条件

确保您的项目已使用 TypeScript，并已安装 Node.js 和 npm。

1. 安装 ESLint

ESLint 是一个用于查找 JavaScript 和 TypeScript 代码中问题的 linter。它通过一组可自定义的规则检查代码，这些规则可以帮助我们识别错误、代码风格问题和潜在的漏洞。

要安装 ESLint，请在您的终端中运行以下命令：

npm install --save-dev eslint

2. 配置 ESLint

安装完成后，在项目根目录创建一个名为 .eslintrc.js 的文件。此文件将包含 ESLint 规则的配置。

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
  ],
};

3. 安装 Prettier

Prettier 是一个代码格式化工具，可自动格式化代码，确保一致的代码风格。

要安装 Prettier，请运行以下命令：

npm install --save-dev prettier

4. 配置 Prettier

在项目根目录创建一个名为 .prettierrc 的文件。此文件将包含 Prettier 的配置。

{
  "semi": false,
  "trailingComma": "none",
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "endOfLine": "lf"
}

5. 安装 Lint-Staged

Lint-Staged 是一个 Git 预提交挂钩，可在提交代码之前运行 linter 和格式化程序。

要安装 Lint-Staged，请运行以下命令：

npm install --save-dev lint-staged

6. 配置 Lint-Staged

在项目根目录创建一个名为 lint-staged.config.js 的文件。此文件将包含 Lint-Staged 的配置。

module.exports = {
  '*.{js,ts,json,vue}': ['eslint --fix', 'prettier --write'],
};

7. 运行 Linter 和 Formatter

现在，我们已经配置了所有工具，我们可以通过以下命令运行 linter 和 formatter：

npx lint-staged

该命令将在每次提交代码之前运行 ESLint 和 Prettier。