Angular 18+ 高级教程 – Prettier, ESLint, Stylelint

前言

不熟悉 Prettier, ESLint, Stylelint 的朋友可以先看这篇工具 – Prettier、ESLint、Stylelint。

首先，Angular 没有 built-in 支持 Prettier、ESLint、Stylelint 中的任何一个。

Angular CLI 唯一做的事情是提供了一个接口，然后让我们去实现。

这个接口是这样的，有一个 ng lint command，输入它后会链接到 angular.json 里的 lint 配置

然后启动 builder，这个 builder 就是我们要去实现的，builder 里面大致上就是去跑 eslint --fix 之类的 command。大体上是这样啦。

社区贡献了 angular-eslint for ESLint，这个非常多人用，可靠。

Stylelint 则有一个 weekly download 仅 1.2k 的 Angular ESLint + Stylelint Linter，感觉靠不住啊...

Prettier

如果只是想通过 Command-line 或者 VS Code Plugin 的方式使用 Prettier，那按照这篇工具 – Prettier、ESLint、Stylelint 做就可以了。

因为 Command-line 和 VS Code Plugin 都不需要 bundler 支持嘛。

那如果想在 Angular ng build 时自动跑 Prettier 的话，那是不可能的。还在自己在 ng build 之前跑个 Command-line Prettier 吧。

唯一比较接近的做法是使用 ESLint + Prettier。

如果 Angular 要使用 Prettier plugin sort imports 需要做一些额外的配置

添加 importOrderParserPlugins

typescript 和 decorators-legacy 一定要，classProperties 我不是很确定。

ESLint

Angular 虽然没用 built-in ESLint，但社区提供的实现 (angular-eslint) 非常 Angular，所以基本上可以把它当 built-in 的来使用。

When to Use Eslint?

创建项目

ng new eslint --ssr=false --routing=false --skip-tests --style=scss

把 App 组件 selector 从 'app-root' 换成 uppercase 'APP-ROOT'

运行 ng serve

效果

是的，大小写完全不会影响最终效果。

但是！不规范啊。

Angular Coding Style 已经写明，selector 要用 kebab-case。

尽管不一定非要遵循 Angular Coding Style 才算正确，但如果我们本身没用 Coding Style 的话，跟随它总比完全没有 Coding Style 来的更容易维持代码整洁。

angular-eslint 就是一个能帮助我们检测代码是否符合 Angular Coding Style 的利器。

Setup angular-eslint

安装 angular-eslint

ng add @angular-eslint/schematics

它会创建 .eslintrc.json，还有在 angular.json 和 package.json 添加一些配置。

运行 command

ng lint

ng lint 是 Angular CLI 特别保留给 linting tools 的 command，不一定要是 ESLint，只要是 linting tool 都可以配置使用。

效果

安装 VS Code ESLint 插件

效果

ng lint 和 ng serve

ng serve 和 ng lint 是完全无关的，如果我们希望在 ng serve 之前做一轮 ESLint 检测，可以在 package.json 这样配置

有人建议过 Angular Team 把这个配置交给 Angular CLI 负责，但是最后 Angular Team 婉拒了这个建议。

ESLint 和 Prettier

angular-eslint 没有搭配 Prettier

我们可以自己加

yarn add prettier --dev

yarn add eslint-config-prettier --dev

yarn add eslint-plugin-prettier --dev

接着运行 ng lint 就可以了。

ESLint for Application and Library

参考 Docs – Using ESLint by default when generating new Projects within your Workspace

如果一个 workspace 里有多个 Application 或 Library 则需要特别处理。

在创建 Application 和 Librayr 之前添加 @angular-eslint

ng add @angular-eslint/schematics

接着使用

ng g @angular-eslint/schematics:application my-app --skip-tests --ssr=false --style=scss

来创建 Application

使用

ng g @angular-eslint/schematics:library stooges --prefix=stg

来创建 Library。

Stylelint

和 Prettier 一样，如果只是想通过 Command-line 或者 VS Code Plugin 的方式使用 Stylelint，那按照这篇工具 – Prettier、ESLint、Stylelint 做就可以了。

那如果想像 ESLint 那样通过 ng lint 启动的话...也不是不行，只是这个插件 Angular ESLint + Stylelint Linter 使用人数太少，感觉不太可靠。

所以个人建议还是通过 Command-line 和 VS Code Plugin 的方式使用 Stylelint 就好。