使用 ESLint 和 Prettier 让你的 Angular 代码更整洁-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，代码的可读性和可维护性是非常重要的。随着项目规模的增长，代码的复杂程度也会增加，这时候使用工具来统一代码风格、格式化代码，就显得尤为重要了。

本文将介绍如何使用 ESLint 和 Prettier，来使你的 Angular 代码更整洁。

ESLint

ESLint 是一个 JavaScript 代码检查工具，可以发现和修复代码中的问题。它可以找到常见的编码错误，也可以发现不符合代码风格指南的代码。

在 Angular 项目中，我们可以使用 eslint-plugin-angular 这个插件来检查我们的代码。

安装 ESLint

首先，我们需要安装 ESLint：

$ npm install --save-dev eslint eslint-plugin-angular

配置 ESLint

在项目的根目录下，创建 .eslintrc.json 文件，配置基本规则：

// javascriptcn.com 代码示例
{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "prettier/@typescript-eslint"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

在这个配置中，我们使用了 eslint:recommended 和 plugin:@typescript-eslint/recommended 这两个默认配置，还加入了 plugin:prettier/recommended 和 prettier/@typescript-eslint 插件来使 ESLint 和 Prettier 协同工作。

我们还指定了 @typescript-eslint/parser 来解析 TypeScript 文件，并且使用了 prettier/prettier 规则，保证代码风格一致。

细节说明

在使用 ESLint 时，通常需要注意以下几个细节：

在 Angular 项目中，不要使用全局变量 $scope，而应该使用 private 或 public 修饰符。

在模板中，使用 *ngFor 时，必须指定 trackBy 函数。例如：

<ul>
  <li *ngFor="let item of items; trackBy: trackByFn">{{ item.name }}</li>
</ul>

trackByFn(index: number, item: any): number {
  return item.id;
}

在组件类中，使用参数装饰器的时候，第一个参数必须是 ViewChild 或 ViewChildren。例如：
```
@ViewChild('myDiv', { static: true }) myDiv: ElementRef<HTMLDivElement>;
```
在模板中使用事件绑定时，事件名应该采用驼峰式命名，并且应该把事件处理函数写在组件类中。例如：
```
<button (click)="onClick()">Click Me</button>
```
```
onClick() {
  console.log('Button is clicked.');
}
```

Prettier

Prettier 是一款代码格式化工具，它可以帮助我们快速地将代码格式化为统一的风格。

与 ESLint 不同的是，Prettier 不关心代码是否符合规则，而是专注于代码格式的统一。

安装 Prettier

首先，我们需要安装 Prettier：

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

配置 Prettier

在项目的根目录下，创建 .prettierrc.json 文件，配置基本规则：

{
  "printWidth": 120,
  "singleQuote": true
}

在这个配置中，我们指定了打印宽度为 120、单引号为字符串的分隔符。

使用 Prettier

在使用 Prettier 时，我们可以单独使用它：

$ npx prettier --write "**/*.ts"

或者配合 ESLint 使用：

// javascriptcn.com 代码示例
{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "prettier/@typescript-eslint"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint", "prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

在这个配置中，我们使用了 prettier/prettier 规则来指定 Prettier 的格式化方式。

细节说明

在使用 Prettier 时，我们通常需要注意以下几个细节：

在模板中，尽可能使用单引号作为字符串的分隔符。

在多行函数调用时，尽可能使用缩进对齐，例如：

const result = someFunction(arg1, arg2, arg3)
  .then((response) => {
    // ...
  })
  .catch((error) => {
    // ...
  });

在多行数组、对象字面量时，尽可能使用缩进对齐，例如：

// javascriptcn.com 代码示例
const items = [
  {
    id: 1,
    name: 'Item 1',
  },
  {
    id: 2,
    name: 'Item 2',
  },
  {
    id: 3,
    name: 'Item 3',
  },
];

总结

本文介绍了如何使用 ESLint 和 Prettier 来检查和格式化 Angular 代码。通过它们的协作，我们可以使代码更整洁、更统一，从而提高代码的可读性和可维护性。

我们还介绍了一些使用细节，希望能够帮助读者更好地应用这些工具。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65857380d2f5e1655d016bd3