إضافة eslint، أجمل، env إلى التطبيق.

من المؤسف أن Angular، افتراضيًا، لا تولد كل هذا بنفسها. يمكن أن يؤدي تغيير المخططات إلى تحسين جودة عدة آلاف من مشاريع Angular.

إعداد إسلينت 9

ربط الخط:

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: {},
  }
);

الفرشات الأساسية جيدة، ولكن يمكنك تحسينها!

إضافة مكون إضافي:

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/directive-selector': [ 'خطأ'، { اكتب: "السمة"، البادئة: "باف"، النمط: 'camelCase'، }, ]، '@angular-eslint/محدد المكونات': [ 'خطأ'، { النوع: "عنصر"، البادئة: "باف"، النمط: "حافظة الكباب"، }, ]، '@typescript-eslint/اتفاقية التسمية': [ 'خطأ'، { المحدد: "افتراضي"، التنسيق: ['camelCase']، الرائدة التسطير السفلي: "السماح"، زائدة تسطير أسفل السطر: "السماح"، الفلتر: { التعبير العادي: '^(ts-jest|\\^.*)$'، المباراة: كاذبة، }, }, { المحدد: "افتراضي"، التنسيق: ['camelCase']، الرائدة التسطير السفلي: "السماح"، زائدة تسطير أسفل السطر: "السماح"، }, { المحدد: "متغير"، التنسيق: ['camelCase'، 'UPPER_CASE']، الرائدة التسطير السفلي: "السماح"، زائدة تسطير أسفل السطر: "السماح"، }, { المحدد: 'typeLike'، التنسيق: ['PascalCase']، }, { المحدد: "enumMember"، التنسيق: ['PascalCase']، }, { المحدد: "خاصية"، التنسيق: خالي، الفلتر: { التعبير العادي: '^(المضيف)$'، المباراة: كاذبة، }, }, ]، التعقيد: "خطأ"، "ماكس لين": [ 'خطأ'، { الكود: 140، }, ]، "لا توجد أغلفة جديدة": "خطأ"، 'عدم رمي حرفي': 'خطأ'، '@typescript-eslint/consistent-type-definitions': 'خطأ'، "بدون ظل": "إيقاف"، '@typescript-eslint/no-shadow': 'خطأ', "لا-هذا غير صالح": "إيقاف"، '@typescript-eslint/no-invalid-this': ['تحذير']، '@angular-eslint/no-host-metadata-property': 'إيقاف'، }, }, { الملفات: ['**/*.html']، يمتد: [...angular.configs.templateRecommened، ...angular.configs.templateAccessibility]، قواعد: {}، }, )

تغيير بادئة التطبيق في angular.json من التطبيق إلى baf.

يرجى ملاحظة أن المكون الإضافي eslint-plugin-import غير مدعوم في eslint 9.

هناك نقاش ساخن حول جيثب - github.com/import-js/eslint-plugin-import/issues/2948

إعداد أجمل

إضافة أجمل:

yarn add -D prettier

يضيف الغزل -D أجمل

دعونا نحدد القواعد في .prettierrc.json:

yarn add -D prettier

{ "bracketSpacing": صحيح، "عرض الطباعة": 140، "شبه": صحيح، "اقتباس مفرد": صحيح، "عرض علامة التبويب": 2، "useTabs": خطأ }

استبعاد كل ما لا ينبغي تنسيقه بتنسيق .prettierignore:

yarn add -D prettier

# أضف الملفات هنا لتجاهلها من التنسيق الأجمل / حي / التغطية /تمب /node_modules /nginx /.vscode /.فكرة package-lock.json package.json غزل. قفل .angular /junit junit.xml /.nx/cache

في IDE في الإعدادات الأجمل - **/*.{js,ts,jsx,tsx,vue,astro,scss,css,html,json}.

روابط

جميع المصادر موجودة على جيثب، في المستودع - github.com/Fafnur/buy-and-fly

يمكن الاطلاع على العرض التوضيحي هنا - buy-and-fly.fafn.ru/

مجموعاتي: telegram، Medium، vk، x.com، LinkedIn، site