Typescript 是一种强类型的 JavaScript 变体，在前端开发中变得越来越流行。然而，在使用 Typescript 进行开发时，如何保证代码质量和规范是一个常见的问题。常用的工具是 ESLint 和 Prettier，它们可以自动检查和格式化代码，让开发者更专注于业务逻辑。在本文中，我们将深入探讨如何使用 ESLint 和 Prettier 来规范 Typescript 代码，以及各自的优点。

安装和配置

首先，我们需要在项目中安装 ESLint 和 Prettier。可以使用 npm 安装它们：

npm install --save-dev eslint prettier

接下来，我们需要安装针对 Typescript 的 ESLint 插件：

npm install --save-dev eslint-plugin-typescript

在项目的根目录下，创建一个 .eslintrc.js 文件，并添加如下内容：

-- -------------------- ---- -------
-------------- - -
  ------- ----------------------------
  ---- -
    -------- -----
    ---- -----
    ----- -----
  --
  -------- -----------------------
  -------- -
    ---------------------
    -----------------------------------------------
    ----------------------------------------
    ------------------------------
    ------------------------------
  --
  -------------- -
    ------------ -----
    ----------- ---------
  --
  ------ ---
--

这个配置文件告诉 ESLint 使用 Typescript 解析器，同时加载了一些推荐的规则，并且引入了 Prettier。

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

{
  "singleQuote": true,
  "trailingComma": "all",
  "tabWidth": 2,
  "printWidth": 120,
  "arrowParens": "avoid"
}

这将按照我们的偏好设置代码格式。例如，我们将使用单引号代替双引号来表示字符串，逗号后面加一个空格，并且使用 2 个空格作为一个缩进。

ESLint 规则

ESLint 是一个强大的静态代码分析工具，可以帮助我们发现代码中的潜在问题和错误。它可以通过上述 .eslintrc.js 文件配置。

我们可以在规则中定义一些代码风格偏好，也可以通过规则禁用某些特定的错误和约束。以下是一些我们可能要在 ESLint 中设置的规则：

rules: {
  '@typescript-eslint/ban-ts-comment': 'off',
  '@typescript-eslint/explicit-module-boundary-types': 'off',
  '@typescript-eslint/no-explicit-any': 'off',
  '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
  'prettier/prettier': ['error', {}, { usePrettierrc: true }],
}

这里我们关闭了一些比较繁琐的 Typescript 相关的规则，例如 '@typescript-eslint/explicit-module-boundary-types'。同时，我们定义了前缀为 '_' 的变量忽略 '@typescript-eslint/no-unused-vars' 规则，并且加入了 Prettier 的规则。

Prettier 规则

Prettier 是一个代码格式化工具，可以自动格式化代码，并按照配置文件中的规则进行操作。在上面的 .prettierrc.json 文件中，我们定义了如下规则：

{
  "singleQuote": true,
  "trailingComma": "all",
  "tabWidth": 2,
  "printWidth": 120,
  "arrowParens": "avoid"
}

这里，我们使用单引号，逗号后面有一个空格，在每个文件有一个缩进，每行有 120 个字符的限制。此外，我们避免使用括号，如：(x) => x。

注意，这里的 Prettier 规则将仅修改出现在 ES6+ 的语法中。在传统 JavaScript 中的语法将不会被修改。

示例代码

假设你有如下的示例代码：

-- -------------------- ---- -------
--------- ---- -
  ---------- -------
  --------- -------
-

-------- --------------- ----- -
  ------------------- - - -------------- - - - - ---------------
-

----------- ---------- ------- --------- ----- ---

使用以上工具，我们可以使代码更加规范：

-- -------------------- ---- -------
--------- ---- -
  ---------- -------
  --------- -------
-

-------- --------------- ------ ---- -
  ------------------- ----------------- -------------------
-

----------- ---------- ------- --------- ----- ---

结论

ESLint 和 Prettier 可以提高代码质量并使代码风格统一，从而使团队更加协作。ESLint 和 Prettier 的入门配置很简单，但是如果需要更加深入的配置，可以查阅官方文档。通过本文所提供的示例，相信你可以在 TypeScript 项目中更好地使用 ESLint 和 Prettier 进行代码规范化。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/674a40aca1ce006354855f46

Typescript 使用 ESLint 及 Prettier 规范代码

安装和配置

ESLint 规则

Prettier 规则

示例代码

结论

纠错反馈