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 就好。

 

 

目录

上一篇 Angular 18+ 高级教程 – Library

下一篇 Angular 18+ 高级教程 – 学以致用

想查看目录,请移步 Angular 18+ 高级教程 – 目录

喜欢请点推荐👍,若发现教程内容以新版脱节请评论通知我。happy coding 😊💻

 

posted @ 2024-02-17 19:03  兴杰  阅读(471)  评论(0编辑  收藏  举报