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
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+ 高级教程 – 目录
喜欢请点推荐👍,若发现教程内容以新版脱节请评论通知我。happy coding 😊💻