将ESLint和Prettier应用于Angular12

2 年 ago
宇, 华
2 minutes

由于2021年2月份，正式支持Angular12的Linter工具ESLint（angular-eslint）的兼容代码已合并到官方代码库中，所以我们将利用这些工具来为Angular12应用程序应用ESLint，并创建一个骨架项目，以使用Prettier进行代码格式化。

AngularCLI正在使用v12或更高版本的环境。

创建一个Angular12应用程序

首先，执行”ng n my-app”命令创建一个新的Angular12应用程序。

$ ng new my-app
$ cd my-app

将angular-eslint应用

从Angular12开始，新建项目将不再包含默认的Linter。因此，在此阶段运行ng lint命令将输出以下错误。

$ ng lint
Cannot find "lint" target for the specified project.

You should add a package that implements linting capabilities.

For example:
  ng add @angular-eslint/schematics

只需按照错误信息的指示执行命令，即可在2021年2月之后的版本中使用angular-eslint进行项目集成。

$ ng add @angular-eslint/schematics

执行命令后，将创建或更新以下文件。

    • .eslintrc.json

 

    • angular.json

 

    package.json

只要这样，就可以使用ESLint了。

$ ng lint
All files pass linting.

使用VSCode的ESLint扩展功能。

我认为有很多人在使用VSCode这个编辑器。

通过在VSCode中安装ESLint插件，即使不在控制台中运行ng lint命令，也可以在编辑器上显示Linter检测到的错误。

当你在VSCode中显示扩展功能并搜索dbaeumer.vscode-eslint时，会出现ESLint扩展功能，然后你可以点击安装。

工作目录的调整

如果您在除了主目录之外的其他目录中进行工作，ESLint扩展的默认设置是将项目放在主目录下，因此会显示类似于”找不到tsconfig.json”的错误。

修改ESLint扩展的workingDirectories，并更改设置以自动查找tsconfig.json。

因为我只想在VSCode的工作区中启用设置，所以我将编辑工作区目录内的.vscode/settings.json文件如下（如果文件夹或文件不存在，则创建）。

{
  "eslint.workingDirectories": [
    {
      "mode": "auto"
    }
  ]
}

漂亮的适应

接下来，应用Priettier。

有些信息表明ESLint和Prettier最好不要同时使用，原因是ESLint本身会修正编码风格，因此建议将Prettier作为ESLint的插件来执行，而原本的角色应该是将linter负责代码质量，而formatter负责编码风格，目前最理想的做法是分别独立执行它们。

在angular-eslint中，似乎已经采取了一些措施来处理具有控制执行顺序等功能的同时使用时不会出现问题。

安装Prettier

为了在项目中同时使用Prettier和ESLint，我们将引入一套用于解决冲突和调整的调整包。

$ npm i -D @typescript-eslint/eslint-plugin eslint-plugin-prettier prettier prettier-eslint eslint-config-prettier
    • @typescript-eslint/eslint-plugin = ESLintへTypeScriptのルールを適応するためのプラグイン

 

    • eslint-plugin-prettier = ESLintへPrettierのルールを適応し実行するプラグイン

 

    • prettier = Prettier本体

 

    • prettier-eslint = Prettier実行後のコードがESLintに渡されるようにする用にフローを調整する

 

    eslint-config-prettier = Prettierと競合するESLintのルールを無効化

应用angular-eslint

本文中假设在Angular项目中执行lint时使用angular-eslint，因此需要更改配置以确保angular-eslint能正确调用Prettier。

我将修正.eslintrc.json文件中的以下部分。

{
  "overrides":[
    {
      ...
      "extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates",
        "plugin:prettier/recommended" // これを追加
      ]
    },
    ...
    // 下記を追加
    {
      "files": [
        "*.html"
      ],
      "excludedFiles": [
        "*inline-template-*.component.html"
      ],
      "extends": [ "plugin:prettier/recommended" ],
      "rules": {
        "prettier/prettier": [
          "error",
          {
            "parser": "angular"
          }
        ]
      }
    }
  ]
}

在Angular中，采用了扩展格式（HTML模板）作为Html文件，并且为了让Prettier正确工作，需要覆盖一些设置。

更漂亮的规则

将想要适应的Prettier规则写入.prettierrc.json文件中。

{
  "printWidth": 80,
  "useTabs": false,
  "singleQuote": true,
}

对VSCode现有格式化程序的支持

在TypeScript文件和JavaScript文件中，VSCode已经注册了现有的格式化程序。使用这个格式化程序会忽略之前设置好的ESLint+Prettier的格式化，因此我们将禁用现有的格式化程序。

如前所述，由于我只想在VSCode的工作区中启用此设置，因此我将编辑工作区目录中的.vscode/settings.json文件如下所示。

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

为了防止执行现有的格式化程序，我们修改了defaultFormatter。然而，遗憾的是，dbaeumer.vscode-eslint不支持VSCode的代码格式化命令，所以请注意即使执行代码格式化命令，格式化也不会生效。

根据上述设置，我们将在文件保存时执行lint代码操作，并通过运行lint来检查代码质量，并使用Prettier进行代码格式化（同时禁用formatOnSave以确保格式化程序不会在保存时运行）。

bannerAds