Angular ESLint 项目教程

Angular ESLint 项目教程

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-eslint/
├── .github/
├── .vscode/
├── packages/
│   ├── builder/
│   ├── eslint-plugin/
│   ├── eslint-plugin-template/
│   ├── schematics/
│   ├── template-parser/
│   └── utils/
├── scripts/
├── .editorconfig
├── .gitignore
├── .prettierrc
├── LICENSE
├── README.md
├── package.json
└── tsconfig.json

目录介绍

• .github/: 包含 GitHub 相关的配置文件，如 GitHub Actions 的工作流配置。
• .vscode/: 包含 Visual Studio Code 的配置文件，如推荐扩展和设置。
• packages/: 包含 Angular ESLint 的核心包，每个子目录对应一个独立的 npm 包。
  • builder/: 提供 Angular CLI 构建器，用于执行 ESLint。
  • eslint-plugin/: 包含特定于 Angular 项目的 ESLint 规则。
  • eslint-plugin-template/: 包含特定于 Angular 模板文件的 ESLint 规则。
  • schematics/: 提供 Angular 项目的脚手架工具。
  • template-parser/: 提供 Angular 模板文件的解析器。
  • utils/: 包含一些通用的工具函数。
• scripts/: 包含一些用于开发和构建的脚本。
• .editorconfig: 定义代码格式化规则。
• .gitignore: 指定 Git 忽略的文件和目录。
• .prettierrc: 定义 Prettier 代码格式化规则。
• LICENSE: 项目的开源许可证。
• README.md: 项目的介绍和使用说明。
• package.json: 项目的 npm 配置文件，包含依赖和脚本。
• tsconfig.json: 项目的 TypeScript 配置文件。

项目的启动文件介绍

Angular ESLint 项目没有传统意义上的“启动文件”，因为它主要是一个工具集，而不是一个应用程序。不过，你可以通过以下命令来使用 Angular ESLint：

npx @angular/cli new your-angular-project
cd your-angular-project
ng add @angular-eslint/schematics

这些命令将引导你创建一个新的 Angular 项目，并添加 Angular ESLint 的配置。

项目的配置文件介绍

package.json

package.json 文件包含了项目的依赖、脚本和其他元数据。以下是一些关键部分：

{
  "name": "angular-eslint",
  "version": "0.0.1",
  "scripts": {
    "build": "tsc -p tsconfig.json",
    "lint": "eslint ."
  },
  "dependencies": {
    "@angular-eslint/builder": "^18.0.0",
    "@angular-eslint/eslint-plugin": "^18.0.0",
    "@angular-eslint/eslint-plugin-template": "^18.0.0",
    "@angular-eslint/schematics": "^18.0.0",
    "eslint": "^9.0.0"
  },
  "devDependencies": {
    "typescript": "^4.0.0"
  }
}

tsconfig.json

tsconfig.json 文件定义了 TypeScript 编译器的配置：

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"]
}

.eslintrc.json

.eslintrc.json 文件定义了 ESLint 的配置规则：

{
  "root": true,
  "parser": "@angular-eslint/template-parser",
  "plugins": [
    "@angular-eslint/eslint-plugin",
    "@angular-eslint/eslint-plugin-template"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@angular-eslint/recommended",
    "plugin:@angular-eslint/template/process-inline-templates

angular-eslint:sparkles: Monorepo for all the tooling related to using ESLint with Angular项目地址:https://gitcode.com/gh_mirrors/an/angular-eslint