」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 為 Angular 18 設定 linter 和 IDE

為 Angular 18 設定 linter 和 IDE

發佈於2024-11-09
瀏覽:145

將 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

更漂亮的環境


加上更漂亮的:

yarn add -D prettier
紗線添加-D更漂亮


讓我們在.prettierrc.json中定義規則:

yarn add -D prettier
{ “bracketSpacing”:true, “列印寬度”:140, 「半」:真實, 「單引號」:正確, “標籤寬度”:2, “useTabs”:假 }


排除 .prettierignore 中不應格式化的所有內容:

yarn add -D prettier
# 在此處新增檔案以忽略較漂亮的格式 / 距離 /覆蓋範圍 /tmp /節點模組 /nginx /.vscode /。主意 包鎖.json 包.json 紗線鎖 .角度 /junit junit.xml /.nx/快取

在 IDE 中更漂亮的設定 - **/*.{js,ts,jsx,tsx,vue,astro,scss,css,html,json}.

Настройка линтеров и IDE для Angular 18

連結

所有來源都在 github 上的存儲庫中 - github.com/Fafnur/buy-and-fly

示範可以在這裡查看 - buy-and-fly.fafn.ru/

我的群組:telegram、medium、vk、x.com、linkedin、site

版本聲明 本文轉載於:https://dev.to/fafnur/nastroika-lintierov-i-ide-dlia-angular-18-2130?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3