如何快速上手Angular ESLint：10分钟从零开始配置完整lint环境

如何快速上手Angular ESLint：10分钟从零开始配置完整lint环境

【免费下载链接】angular-eslint:sparkles: Monorepo for all the tooling related to using ESLint with Angular项目地址: https://gitcode.com/gh_mirrors/an/angular-eslint

Angular ESLint是一个专为Angular项目打造的Monorepo工具集，它能帮助开发者在Angular应用中集成ESLint进行代码质量检查。本指南将展示如何在10分钟内完成从环境准备到完整配置的全过程，让你的Angular项目快速拥有专业的代码检查能力。

准备工作：安装Angular CLI

在开始配置Angular ESLint之前，需要确保你的开发环境中已安装Angular CLI。如果你还没有安装，可以按照Angular官方的本地环境和工作区设置指南进行安装。

第一步：创建新的Angular项目

使用Angular CLI创建一个新的Angular工作区，你可以根据需要添加额外的命令行参数：

ng new # --maybe --some --other --flags --here

按照提示完成项目创建后，进入新创建的工作目录。

第二步：一键添加Angular ESLint

Angular ESLint提供了便捷的ng add命令，可以自动完成所有依赖安装和配置工作。在项目根目录下运行：

ng add angular-eslint

这个命令会自动检测你的工作区情况，安装所有相关依赖，并为你配置好基本的ESLint环境。安装完成后，你会发现在angular.json文件中添加了如下配置：

"cli": { "schematicCollections": ["angular-eslint"] }

这将确保后续在工作区中生成新项目时默认使用ESLint。

为现有项目添加ESLint配置

如果你需要为一个没有配置任何linter的现有Angular CLI项目添加ESLint，可以使用以下命令：

ng g angular-eslint:add-eslint-to-project {{YOUR_PROJECT_NAME_GOES_HERE}}

如果你在工作区中只有一个项目，项目名称参数是可选的

配置ESLint

Angular ESLint支持两种配置方式，你可以根据项目需求选择适合的配置方法：

• Flat Config（ESLint v9默认，强烈推荐新项目使用）：docs/CONFIGURING_FLAT_CONFIG.md
• ESLintrc风格配置（ESLint v8默认，已在ESLint v9中弃用，但现有项目仍可使用）：docs/CONFIGURING_ESLINTRC.md

运行Lint检查

配置完成后，你可以使用Angular CLI命令运行Lint检查：

ng lint

这将对你的Angular项目进行全面的代码质量检查，包括TypeScript代码和Angular模板文件。

设置默认使用ESLint生成新项目

为了确保后续在工作区中生成的新项目自动使用ESLint，你可以设置schematicCollections：

ng config cli.schematicCollections "[\"angular-eslint\"]"

设置完成后，你可以像往常一样使用ng g app或ng g lib命令生成新项目，它们将自动配置ESLint。

了解Angular ESLint的核心包

Angular ESLint项目包含多个核心包，它们共同协作提供完整的ESLint支持：

• angular-eslint：核心包，为Angular CLI工作区提供ESLint集成 packages/angular-eslint
• @angular-eslint/builder：Angular CLI构建器，用于执行ESLint检查 packages/builder
• @angular-eslint/eslint-plugin：包含Angular项目特定的ESLint规则 packages/eslint-plugin
• @angular-eslint/eslint-plugin-template：提供Angular模板特定的lint规则 packages/eslint-plugin-template
• @angular-eslint/schematics：用于添加和更新ESLint配置的Schematics packages/schematics
• @angular-eslint/template-parser：解析Angular模板的ESLint解析器 packages/template-parser

所有这些包都以相同的版本号发布，便于版本管理和协调。

在VSCode中使用Angular ESLint

为了获得最佳的开发体验，我们强烈推荐使用v3或更高版本的vscode-eslint扩展。对于使用ESLint v9但仍使用eslintrc配置文件的项目，需要在.vscode/settings.json中添加：

"eslint.useFlatConfig": false

总结

通过本指南，你已经了解了如何快速为Angular项目配置ESLint环境。Angular ESLint提供了简单易用的工具，让你能够在几分钟内为项目添加强大的代码质量检查能力。无论是新创建的项目还是现有项目，都可以通过简单的命令完成配置，开始享受ESLint带来的代码质量提升。

如需了解更多关于Angular ESLint的高级配置和自定义规则编写，可以参考官方文档：

• 编写自定义ESLint规则
• 需要类型信息的规则
• 从TSLint迁移

【免费下载链接】angular-eslint:sparkles: Monorepo for all the tooling related to using ESLint with Angular项目地址: https://gitcode.com/gh_mirrors/an/angular-eslint