使用ESLint和Prettier配置Angular项目

type

status

date

slug

summary

安装并配置ESLint

ESLint 是一个插件化并且可配置的 JavaScript 语法规则和代码风格的检查工具。ESLint 通过静态分析我们的代码，可以发现问题并修复它们，帮我们轻松写出高质量的 JavaScript 代码。

在这里我并没有选择 eslint 和 @typescript-eslint/eslint-plugin 的方式，而是使用了 @angular-eslint，它添加了一系列适用于 Angular 的 rules，使我们写出来的 Angular 代码更符合社区标准。

只需要执行下面的命令，ng add 会自动安装并且配置好 ESLint。

如果你的项目是基于 tslint 的，@angular-eslint 也可以帮你做迁移，详见 Migrating an Angular CLI project from Codelyzer and TSLint

这个命令对项目主要有三个改动：

添加了一系列 devDependencies

添加了 .eslintrc.json 文件

多了一个 lint 命令

具体的改动内容可以查看示例代码的 commit history，每一个步骤都对应一个提交记录。

之后，如果我们的代码有错误，ESLint 就会提示我们。

我们也可以通过 ng lint 检查项目中所有的错误，或者 ng lint --fix 来自动修复所有可以修复的错误。

安装并配置Prettier

虽然 ESLint 也自带一些代码格式的检查，但主要还是针对代码中的错误。我们还需要 Prettier 来更好的格式化我们的代码。

首先我们来安装 Prettier：

之后创建一个 .prettierrc.json 文件并写入一些常见的配置。

再创建一个 prettierignore 文件，把 gitignore 文件（如果有）中的内容复制过去。

现在，我们可以使用 Prettier 命令来格式化我们的文件：

将ESLint和Prettier结合

为了将 ESLint 和 Prettier 一起使用，我们还需要安装两个插件。

eslint-config-prettier ：它会关闭所有不必要或者可能与 Prettier 冲突的 ESLint 规则。

eslint-plugin-prettier ：它会将 Prettier 作为 ESLint 规则运行。

之后把 plugin:prettier/recommended 添加在 .eslintrc.json 中 extends 数组的最后。

这样我们再运行 ng lint --fix 的时候，Prettier 的规则也会被执行并且自动 fix。

配置HTML模板

此外，如果我们使用了 eslint-plugin-prettier，那么还需要添加下面的代码来保证 Angular 的 HTML 模板能够被正常格式化。

.eslintrc.json

如果使用 VS Code 并且添加了 dbaeumer.vscode-eslint 扩展，那么还需要在 settings.json 文件中添加下面的代码：

配置VS Code

接下来以 VS Code 为例，配置一下自动保存并格式化代码。

首先我们需要安装 ESLint 和 Prettier 扩展，在扩展里搜索 dbaeumer.vscode-eslint 和 esbenp.prettier-vscode 并安装。

我们也可以把这两个插件添加到推荐的扩展里，在 extensions.json 文件中添加这两个扩展，这样其他人 clone 你的代码并在 VS Code 中打开的时候会提示安装这些扩展。

安装好扩展之后，把下面的代码添加到 settings.json 文件中。

这样每次在我们保存文件的时候，代码都会自动被格式化并保存。

配置 Git Hooks

在实际的项目开发中，在提交代码的时候，我们一般会对要提交的文件进行 lint 检查。

安装 husky 和 lint-staged：

在 package.json 的 scripts 中添加：

在 package.json 中添加 lint-staged 命令：

这样我们每次提交代码的时候都会先运行 eslint --fix 来修复代码中的错误，如果全部修复，代码提交成功，如果自动修复失败，VS Code 会报错，提交失败。

总结

到现在为止，我们有了一个比较完整的 lint 配置，至于具体的代码风格和规则，则需要整个团队一起制定了。可以看到，为项目配置 lint 还是比较繁琐的，但是可以为你的团队协作带来很大的收益，大家共用同一套代码规范，不合格的提交也会被扼杀在摇篮里。

值得一提的是，在未来的 Angular 版本中，ESLint 将会是开箱即用的，但是像 Prettier、Husky 和 lint-staged 还是需要你自己来安装。

这就是本文的全部内容了，你可以在 Github 上找到文章中的实例代码，如果对你有帮助，记得点个赞再走～

😀

这里写文章的前言：一个简单的开头,简述这篇文章讨论的问题、目标、人物、背景是什么？并简述你给出的答案。

可以说说你的故事：阻碍、努力、结果成果，意外与转折。

📝 主旨内容

观点1

引用的话语

观点2

引用的话语

🤗 总结归纳

总结文章的内容

📎 参考文章

一些引用

引用文章

💡

有关Notion安装或者使用上的问题，欢迎您在底部评论区留言，一起交流~