为 Angular 18 设置 linter 和 IDE

首页 > 编程 > 为 Angular 18 设置 linter 和 IDE

为 Angular 18 设置 linter 和 IDE

发布于2024-11-09

将 eslint、prettier、env 添加到应用程序中。

遗憾的是，Angular 默认情况下不会自行生成这一切。更改原理图可以提高数千个 Angular 项目的质量。

设置 eslint 9

连接 eslint:

yarn ng add @angular-eslint/schematics

package.json中添加了三个包：

{
  "devDependencies": {
       …,      
       "angular-eslint": "18.0.1",
       "eslint": "^9.3.0",
       "typescript-eslint": "8.0.0-alpha.20" 
   }
}

并在 angular.json 中的目标中：

{
  "projects": {
    "buy-and-fly": {
      "architect": {
        …,
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": [
              "src/**/*.ts",
              "src/**/*.html"
            ]
          }
        }
      }
    }
  },
  "cli": {
    "schematicCollections": [
      "@angular-eslint/schematics"
    ]
  }
}

还创建了 eslint.config.js 文件：

// @ts-check
const eslint = require("@eslint/js");
const tseslint = require("typescript-eslint");
const angular = require("angular-eslint");

module.exports = tseslint.config(
  {
    files: ["**/*.ts"],
    extends: [
      eslint.configs.recommended,
      ...tseslint.configs.recommended,
      ...tseslint.configs.stylistic,
      ...angular.configs.tsRecommended,
    ],
    processor: angular.processInlineTemplates,
    rules: {
      "@angular-eslint/directive-selector": [
        "error",
        {
          type: "attribute",
          prefix: "app",
          style: "camelCase",
        },
      ],
      "@angular-eslint/component-selector": [
        "error",
        {
          type: "element",
          prefix: "app",
          style: "kebab-case",
        },
      ],
    },
  },
  {
    files: ["**/*.html"],
    extends: [
      ...angular.configs.templateRecommended,
      ...angular.configs.templateAccessibility,
    ],
    rules: {},
  }
);

基本的 linter 很好，但你可以让它们变得更好！

添加插件：

yarn add -D eslint-plugin-simple-import-sort

让我们加入几条规则：

// @ts-check
const eslint = require('@eslint/js');
const tseslint = require('typescript-eslint');
const angular = require('angular-eslint');
const simpleImportSort = require('eslint-plugin-simple-import-sort');

module.exports = tseslint.config(
  {
    files: ['**/*.ts'],
    extends: [
      eslint.configs.recommended,
      ...tseslint.configs.recommended,
      ...tseslint.configs.stylistic,
      ...angular.configs.tsRecommended,
      {
        plugins: {
          'simple-import-sort': simpleImportSort,
        },
        rules: {
          'simple-import-sort/imports': [
            'error',
            {
              groups: [['^\\u0000'], ['^@?(?!baf)\\w'], ['^@baf?\\w'], ['^\\w'], ['^[^.]'], ['^\\.']],
            },
          ],
          'simple-import-sort/exports': 'error',
        },
      },
    ],
    processor: angular.processInlineTemplates,
    rules: {
      '@angular-eslint/directive-selector': [
        'error',
        {
          type: 'attribute',
          prefix: 'baf',
          style: 'camelCase',
        },
      ],
      '@angular-eslint/component-selector': [
        'error',
        {
          type: 'element',
          prefix: 'baf',
          style: 'kebab-case',
        },
      ],
      '@typescript-eslint/naming-convention': [
        'error',
        {
          selector: 'default',
          format: ['camelCase'],
          leadingUnderscore: 'allow',
          trailingUnderscore: 'allow',
          filter: {
            regex: '^(ts-jest|\\^.*)$',
            match: false,
          },
        },
        {
          selector: 'default',
          format: ['camelCase'],
          leadingUnderscore: 'allow',
          trailingUnderscore: 'allow',
        },
        {
          selector: 'variable',
          format: ['camelCase', 'UPPER_CASE'],
          leadingUnderscore: 'allow',
          trailingUnderscore: 'allow',
        },
        {
          selector: 'typeLike',
          format: ['PascalCase'],
        },
        {
          selector: 'enumMember',
          format: ['PascalCase'],
        },
        {
          selector: 'property',
          format: null,
          filter: {
            regex: '^(host)$',
            match: false,
          },
        },
      ],
      complexity: 'error',
      'max-len': [
        'error',
        {
          code: 140,
        },
      ],
      'no-new-wrappers': 'error',
      'no-throw-literal': 'error',
      '@typescript-eslint/consistent-type-definitions': 'error',
      'no-shadow': 'off',
      '@typescript-eslint/no-shadow': 'error',
      'no-invalid-this': 'off',
      '@typescript-eslint/no-invalid-this': ['warn'],
      '@angular-eslint/no-host-metadata-property': 'off',
    },
  },
  {
    files: ['**/*.html'],
    extends: [...angular.configs.templateRecommended, ...angular.configs.templateAccessibility],
    rules: {},
  },
)

'], ['^\\.']], }, ], '简单导入排序/导出'：'错误'， }, }, ], 处理器： angular.processInlineTemplates，规则：{ '@angular-eslint/指令选择器': [ '错误'， { 类型：'属性'，前缀：'baf'，样式： '驼峰式', }, ], '@angular-eslint/组件选择器': [ '错误'， { 类型：'元素'，前缀：'baf'，风格： 'kebab-case', }, ], '@typescript-eslint/命名约定': [ '错误'， { 选择器：'默认'，格式：['驼峰命名法'], 前导下划线: '允许', 尾随下划线：'允许'，筛选： { 正则表达式: '^(ts-jest|\\^.*)$', 匹配：假， }, }, { 选择器：'默认'，格式：['驼峰命名法'], 前导下划线: '允许', 尾随下划线：'允许'， }, { 选择器：'变量'，格式：['驼峰式', 'UPPER_CASE'], 前导下划线: '允许', 尾随下划线：'允许'， }, { 选择器：'typeLike'，格式：['帕斯卡命名法'], }, { 选择器：'enumMember'，格式：['帕斯卡命名法'], }, { 选择器：'属性'，格式：空，筛选： { 正则表达式：'^(主机)$', 匹配：假， }, }, ], 复杂性：'错误'， '最大长度': [ '错误'， { 代码：140， }, ], '无新包装'：'错误'， '无抛出文字'：'错误'， '@typescript-eslint/一致类型定义': '错误', '无阴影'：'关闭'， '@typescript-eslint/no-shadow': '错误', 'no-invalid-this': '关闭', '@typescript-eslint/no-invalid-this': ['警告'], '@angular-eslint/no-host-metadata-property': '关闭', }, }, { 文件：['**/*.html'], 扩展：[... angular.configs.templateRecommended，... angular.configs.templateAccessibility]，规则：{}， }, ）

将 angular.json 中的应用程序前缀从 app 更改为 baf。

请注意，eslint 9 不支持 eslint-plugin-import 插件。

github上有热烈讨论 - github.com/import-js/eslint-plugin-import/issues/2948

更漂亮的环境

添加更漂亮的：