尝试在Angular项目中引入ESLint和Prettier

2 年 ago
清, 扬
3 minutes

现在在前端开发项目中，我认为 ESLint 和 Prettier 已成为不可或缺的存在。
即使在我目前参与的项目中（使用 Ionic 框架和 Angular），我们也引入了 ESLint 和 Prettier 来统一编码规则和格式化。
本文将简单总结引入 ESLint 和 Prettier 到项目中的好处，并概述在实际的 Angular 项目中如何引入它们。

安装ESLint和Prettier的好处

ESLint 和 Prettier 都是为开发者提供辅助的工具。
它们各自的作用如下所述：
◆ ESLint
▶︎ 可以检测语法错误和违规项。
◆ Prettier
▶︎ 可以将代码格式化为易读性好的样式。

关于代码格式化，仅使用ESLint已经可以进行代码格式化，但是Prettier会填补ESLint无法覆盖的部分。

ESLint是一个工具。

ESLint（拼音：Yī Sī ）是一个用于 JavaScript 和 TypeScript 的静态验证工具。
它可以检查语法错误和编码规则的违反，并指出错误和违反位置，帮助开发人员进行辅助开发。
其引入的好处包括：

    • プログラムを動かす前にコードの問題点を指摘してくれるので、効率的に品質の高い開発を行うことができる。

 

    • いろいろなルールをカスタマイズして設定することができるので、プロジェクトに合わせた運用を行うことができる。

 

    複数人で開発において、コーディングに一貫性を持たせることができる。

在Visual Studio Code（VS Code）中，可以通过安装ESLint插件来实现实时指出错误位置。

◆更漂亮

Prettier（发音：普莉提亚）是一个支持多种编程语言格式化的工具，包括JavaScript、TypeScript、HTML和CSS等。如果设置了编码规则，Prettier会根据规则执行格式化操作，使代码统一。在团队开发中，可以统一个人习惯，例如注释的写法、空格和缩进的使用方式，从而创建出整洁易读的源代码。

尝试引入ESLint和Prettier。

在整理了各自的角色之后，我想要实际创建一个Angular项目，并尝试引入这两个东西。
以下是我将在本次示例项目中使用的各组件的版本。

$ ng version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 14.2.8
Node: 16.13.1
Package Manager: npm 8.19.2 
OS: darwin x64

Angular: 14.2.9
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1402.8
@angular-devkit/build-angular   14.2.8
@angular-devkit/core            14.2.8
@angular-devkit/schematics      14.2.8
@angular/cli                    14.2.8
@schematics/angular             14.2.8
rxjs                            7.5.7
typescript                      4.7.4

设置ESLint

添加ESLint

那么让我们实际在Angular项目中引入ESLint。
首先创建一个合适的Angular项目。
创建后进入项目文件夹，并执行以下命令。

$ ng lint

以下的命令是运行linter的命令，但由于尚未引入ESLint，因此linter不会被执行。
相反，可能会显示类似于以下消息：
“是否要添加ESLint？” 确认后，请输入Y执行。

$ ng lint
Cannot find "lint" target for the specified project.
You can add a package that implements these capabilities.

For example:
  ESLint: ng add @angular-eslint/schematics

Would you like to add ESLint now? (Y/n) Y

确认是否要继续通过schematics进行安装，然后输入Y进行执行。

Would you like to add ESLint now? Yes
ℹ Using package manager: npm
✔ Found compatible package version: @angular-eslint/schematics@14.1.2.
✔ Package information loaded.

The package @angular-eslint/schematics@14.1.2 will be installed and executed.
Would you like to proceed? (Y/n) Y

如果显示类似以下消息，则表示已成功添加ESLint。

请注意：此回答假设您要将原句翻译成简体中文。如果您需要翻译成繁体中文，请告知。

✔ Packages successfully installed.
    
    All @angular-eslint dependencies have been successfully installed ?
    
    Please see https://github.com/angular-eslint/angular-eslint for how to add ESLint configuration to your project.
    
    We detected that you have a single project in your workspace and no existing linter wired up, so we are configuring ESLint for you automatically.
    
    Please see https://github.com/angular-eslint/angular-eslint for more information.
    
CREATE .eslintrc.json (984 bytes)
UPDATE package.json (1422 bytes)
UPDATE angular.json (3443 bytes)
✔ Packages installed successfully.

执行上述操作后，您可以在项目的根目录下检查，确认是否已添加名为「.eslintrc.json」的ESLint配置文件。

尝试运行ESLint检查。

因为已经添加了 ESLint，所以当您再次执行下面的命令时，将会执行 ESLint 的检查。

$ ng lint
All files pass linting.

由于显示「所有文件通过了检测」，所以检测似乎没有问题。
我还希望确认当检测有问题时会如何显示。
ESLint规则在配置文件「.eslintrc.json」中进行了设置，在刚安装完成后，应该是以下设置。

{
  "root": true,
  "ignorePatterns": [
    "projects/**/*"
  ],
  "overrides": [
    {
      "files": [
        "*.ts"
      ],
      "parserOptions": {
        "project": [
          "tsconfig.json"
        ],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": {
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "app",
            "style": "camelCase"
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "app",
            "style": "kebab-case"
          }
        ]
      }
    },
    {
      "files": [
        "*.html"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended"
      ],
      "rules": {}
    }
  ]
}

在上述的内容中，规则属性中所列出的内容是ESLint检查的规则。例如，对于component-selector规则，设置”prefix”: “app”，这意味着如果将组件选择器的前缀设置为非app的名称，将会被提示为Lint错误。

$ ng lint

[プロジェクトのパス]/src/app/app.component.ts
  4:13  error  The selector should start with one of these prefixes: "app" (https://angular.io/guide/styleguide#style-02-07)  @angular-eslint/component-selector

✖ 1 problem (1 error, 0 warnings)

Lint errors found in the listed files.

看起来已经进行了仔细的检查了！

在VS Code中安装ESLint插件，并实时检查是否有违反的情况。

image.png
image.png

设置Prettier

接下来，我想设置Prettier。

添加Prettier

为了与Prettier和ESLint一起使用，您可以使用以下命令来安装多个软件包。

npm install --save-dev prettier eslint-config-prettier @typescript-eslint/eslint-plugin
    • prettier： Prettierの本体。

 

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

 

    @typescript-eslint/eslint-plugin：ESLintでTypeScriptのルールを適用するためのプラグイン。

在ESLint的配置文件中添加Prettier的信息。

为了能够同时使用ESLint和Prettier，将ESLint配置文件“.eslintrc.json”修改如下。

{
  "root": true,
  "ignorePatterns": [
    "projects/**/*"
  ],
  "overrides": [
    ・・・ 省略 ・・・
      "extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates",
        "prettier" // これを追加
      ],
　　　　　・・・ 省略 ・・・

创建Prettier的配置文件

创建一个名为 “.prettierrc.json” 的 Prettier 配置文件，并在其中录入规则设置。

{
  "printWidth": 120, // 折り返す行の長さ
  "singleQuote": true, // ダブルクォートの代わりにシングルクォートを使用
}

执行格式化器

我打算在进行ESLint检查之后运行格式化程序，所以我要在”package.json”文件中设置命令。

  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint",
    "lint-fix": "eslint --cache --fix src/ && prettier --write src/"// ここを追加
  },

在设置了 scripts 之后，执行以下命令，就可以在 ESLint 检查之后执行代码格式化工具！

npm run lint-fix

总结

本文简要介绍了ESLint和Prettier，并总结了在Angular项目中引入它们的步骤。
由于细节规则的设置仍未完全整理清楚，我希望能够在以后的某个时间里再进行整理。

✖
广告
将在 10 秒后关闭
bannerAds