React + TypeScript 开发环境配置（二）：ESLint、Stylelint 和 Prettier

前言

在上一篇文章中，我们介绍了如何通过 dotfiles 来配置 React + TypeScript 开发环境，包括编辑器的设置、git 的配置等。这些配置可以帮助我们提高开发效率和代码质量。

在本文中，我们将继续介绍如何使用 ESLint、Stylelint 和 Prettier 来进一步提升代码质量和一致性。这些工具可以帮助我们发现代码中的潜在问题，并自动格式化代码，使代码更加整洁易读。

ESLint

ESLint 是一个流行的 JavaScript 代码检查工具，可以帮助我们发现代码中的潜在问题，包括语法错误、逻辑错误、最佳实践违规等。ESLint 可以与各种编辑器集成，并在保存文件时自动检查代码。

要使用 ESLint，我们需要先安装它：

npm install --save-dev eslint

然后，我们需要创建一个 .eslintrc.json 文件来配置 ESLint。这个文件可以放在项目根目录或 src 目录下。

{
  "extends": "eslint:recommended",
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "rules": {
    // ...
  }
}

在 .eslintrc.json 文件中，我们可以指定 ESLint 的各种配置项。例如，我们可以指定要遵守的代码风格指南、要检查的规则等。

我们还可以通过安装 eslint-plugin-react 和 eslint-plugin-react-hooks 插件来支持对 React 代码的检查：

npm install --save-dev eslint-plugin-react eslint-plugin-react-hooks

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

{
  "extends": ["eslint:recommended", "plugin:react/recommended", "plugin:react-hooks/recommended"],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "react", "react-hooks"],
  "rules": {
    // ...
  }
}

Stylelint

Stylelint 是一个流行的 CSS 代码检查工具，可以帮助我们发现 CSS 代码中的潜在问题，包括语法错误、逻辑错误、最佳实践违规等。Stylelint 可以与各种编辑器集成，并在保存文件时自动检查代码。

要使用 Stylelint，我们需要先安装它：

npm install --save-dev stylelint

然后，我们需要创建一个 .stylelintrc.json 文件来配置 Stylelint。这个文件可以放在项目根目录或 src 目录下。

{
  "extends": ["stylelint-config-standard"],
  "plugins": [],
  "rules": {
    // ...
  }
}

在 .stylelintrc.json 文件中，我们可以指定 Stylelint 的各种配置项。例如，我们可以指定要遵守的代码风格指南、要检查的规则等。

我们还可以通过安装 stylelint-config-recommended-scss 插件来支持对 SCSS 代码的检查：

npm install --save-dev stylelint-config-recommended-scss

然后，在 .stylelintrc.json 文件中添加以下配置：

{
  "extends": ["stylelint-config-standard", "stylelint-config-recommended-scss"],
  "plugins": [],
  "rules": {
    // ...
  }
}

Prettier

Prettier 是一个流行的代码格式化工具，可以帮助我们自动格式化代码，使代码更加整洁易读。Prettier 可以与各种编辑器集成，并在保存文件时自动格式化代码。

要使用 Prettier，我们需要先安装它：

npm install --save-dev prettier

然后，我们需要创建一个 .prettierrc.json 文件来配置 Prettier。这个文件可以放在项目根目录或 src 目录下。

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

在 .prettierrc.json 文件中，我们可以指定 Prettier 的各种配置项。例如，我们可以指定缩进方式、行宽、是否使用单引号等。

Husky + Lint-staged

Husky 是一个 git hooks 管理工具，可以帮助我们在 git 提交代码时自动执行一些任务。Lint-staged 是一个 husky 插件，可以帮助我们在 git 提交代码时自动检查和格式化代码。

要使用 Husky 和 Lint-staged，我们需要先安装它们：

npm install --save-dev husky lint-staged

然后，我们需要在项目根目录下创建一个 .husky 文件夹，并在其中创建一个 pre-commit 文件。这个文件可以用来指定在 git 提交代码之前要执行的任务。

#!/bin/sh

npx lint-staged

在 .husky/pre-commit 文件中，我们指定了在 git 提交代码之前要执行 npx lint-staged 命令。这个命令会自动检查和格式化代码。

总结

在本文中，我们介绍了如何使用 ESLint、Stylelint 和 Prettier 来进一步提升 React + TypeScript 开发环境的代码质量和一致性。这些工具可以帮助我们发现代码中的潜在问题，并自动格式化代码，使代码更加整洁易读。配合 Husky 和 Lint-staged，可轻松实现每次提交代码时的自动代码检查和格式化。这些工具可以帮助我们提高开发效率，并确保代码质量。