使用 Angular 配置 Prettier 和 ESLint

每个人都希望能够快速编写出无 bug 的代码，而无需过多考虑代码风格。因此，本文我将讨论如何在Angular项目中配置ESLint和Prettier。

ESLint 有何帮助？

通过静态分析我们的代码，ESLint 可以发现问题并提出修复建议。它甚至还能做得更好，自动修复代码（谁不想要呢？）。

安装和配置 ESLint

在本节中，我将解释如何在 Angular 项目中安装 ESLint，并对其进行配置以更好地符合 Angular 样式指南和社区标准。

打开终端并使用以下命令安装 ESLint 原理图：

ng add @angular-eslint/schematics

就是这样。现在我们已经安装并配置了 ESLint，这要感谢Angular-ESLint**ng add**团队提供的命令。 以下是错误示例以及 ESLint 如何修复它：

我们也可以在终端中运行这个命令：
ng lint --fix
来修复项目中所有可修复的错误。

安装和配置 Prettier

即使我们有 ESLint 来监控代码中的 bug，我们也需要一个工具来更好地设置代码的样式和格式。这就是 Prettier 的作用所在。

Prettier 是一个自以为是的代码格式化程序，可以帮助我们在每次保存代码时以标准化的方式美化代码。

打开终端并输入：
npm install prettier --save-dev
或者如果你使用 yarn ：
yarn add prettier -D

然后我们需要在我们的根项目目录中添加.prettierrc.json和.prettierignore文件。

在.prettierignore中最好添加我们在.gitignore文件中拥有的任何内容。

然后我们可以在项目中运行此命令来格式化它：
npx prettier --write .

在.prettierrc.json中，我们可以通过覆盖默认设置来更改它们。

我最常用的设置是这样的：

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

关于 Prettier 的内容就这些了。但我们还没有结束。

有时 ESLint 和 Prettier 对代码格式和样式会有不同意见。因此我们需要调整这部分。更多信息请点击此处。

配置 Prettier 用作 ESLint 插件

为了使 ESLint 和 Prettier 能够良好地协同工作，我们需要将 Prettier 作为 ESLint 插件运行。这样，我们只需调用ng lint --fixPrettier，ESLint 就会修复错误，并格式化代码。

打开终端并输入：

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

或者如果你使用 yarn：

yarn add prettier-eslint eslint-config-prettier eslint-plugin-prettier -D

现在我们需要编辑.eslintrc.json文件以包含 prettier 插件。

{
  "root": true,
  "overrides": [
    {
      "files": ["*.ts"],
      "extends": [
        ...
        "plugin:prettier/recommended"
      ],
    },
    // NOTE: WE ARE NOT APPLYING PRETTIER IN THIS OVERRIDE, ONLY @ANGULAR-ESLINT/TEMPLATE
    {
      "files": ["*.html"],
      "extends": ["plugin:@angular-eslint/template/recommended"],
      "rules": {}
    },
    // NOTE: WE ARE NOT APPLYING @ANGULAR-ESLINT/TEMPLATE IN THIS OVERRIDE, ONLY PRETTIER
    {
      "files": ["*.html"],
      "excludedFiles": ["*inline-template-*.component.html"],
      "extends": ["plugin:prettier/recommended"],
      "rules": {
        // NOTE: WE ARE OVERRIDING THE DEFAULT CONFIG TO ALWAYS SET THE PARSER TO ANGULAR (SEE BELOW)
        "prettier/prettier": ["error", { "parser": "angular" }]
      }
    }
  ]
}

VSCode 和 Webstorm 快捷方式

就是这样。我们已经完成了配置部分。

编辑文件后，我们需要格式化它并保存。这就是我们现在要为VS Code和Webstorm配置的内容。

首先确保你已经安装了 ESLint 和 Prettier 插件。WebStorm 默认支持这两个插件。

对于 VS Code，我们需要将以下行添加到settings.json：

{
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "editor.formatOnSave": false
  },
  "[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "editor.formatOnSave": false
  },
}

对于 Webstorm：
我们需要检查：在Actions On Save设置页面上运行 eslint --fix ：

您可以在这里找到总结的步骤：Angular ESLint 和 Prettier 配置

如何自动化所有这些配置？

正如您所见，您需要安装和配置很多软件包。我可以自信地告诉您，有一种方法可以自动管理所有这些。NX就是答案。

什么是 NX？
NX 是下一代构建系统，拥有一流的 Monorepo 支持和强大的集成功能。
如果我们将 Angular 应用迁移到 NX Monorepo（有一条简单的迁移路径），我们就可以免费获得所有这些开箱即用的配置。
但 NX 的独特之处在于它拥有一些非常强大的功能，例如计算缓存、智能重建、分布式任务执行、远程构建缓存、强大的代码生成器、编辑器插件等等。

*就是这样。感谢您的阅读！下期再见。
*