Ajoutez eslint, plus joli, env à l'application.

C'est dommage qu'Angular, par défaut, ne génère pas tout cela lui-même. La modification des schémas peut améliorer la qualité de plusieurs milliers de projets Angular.

Configuration d'Eslint 9

Connecter Eslint :

yarn ng add @angular-eslint/schematics

Trois packages ont été ajoutés à package.json :

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

Et dans la cible dans angulaire.json :

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

Le fichier eslint.config.js a également été créé :

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

Les linters de base sont bons, mais vous pouvez les améliorer !

Ajouter un plugin :

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

Incluons plusieurs règles :

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

'], ['^\\.']], }, ], 'simple-import-sort/exports' : 'erreur', }, }, ], processeur : angulaire.processInlineTemplates, règles: { '@angular-eslint/directive-selector' : [ 'erreur', { tapez : 'attribut', préfixe : 'baf', style : 'camelCase', }, ], '@angular-eslint/component-selector' : [ 'erreur', { tapez : 'élément', préfixe : 'baf', style: 'kebab-case', }, ], '@typescript-eslint/naming-convention' : [ 'erreur', { sélecteur : 'par défaut', format : ['camelCase'], LeadUnderscore : 'autoriser', trait de soulignement : 'autoriser', filtre : { regex : '^(ts-jest|\\^.*)$', correspondance : faux, }, }, { sélecteur : 'par défaut', format : ['camelCase'], LeadUnderscore : 'autoriser', trait de soulignement : 'autoriser', }, { sélecteur : 'variable', format : ['camelCase', 'UPPER_CASE'], LeadUnderscore : 'autoriser', trait de soulignement : 'autoriser', }, { sélecteur : 'typeLike', format : ['PascalCase'], }, { sélecteur : 'enumMember', format : ['PascalCase'], }, { sélecteur : 'propriété', format : nul, filtre : { expression régulière : '^(hôte)$', correspondance : faux, }, }, ], complexité : « erreur », 'max-len' : [ 'erreur', { code: 140, }, ], 'no-new-wrappers' : 'erreur', 'no-throw-literal' : 'erreur', '@typescript-eslint/consistent-type-definitions' : 'erreur', 'pas d'ombre' : 'off', '@typescript-eslint/no-shadow' : 'erreur', 'no-invalid-this' : 'off', '@typescript-eslint/no-invalid-this' : ['avertir'], '@angular-eslint/no-host-metadata-property' : 'off', }, }, { fichiers : ['**/*.html'], extends : [...angular.configs.templateRecommended, ...angular.configs.templateAccessibility], règles: {}, }, )

Modifiez le préfixe d'application dans angulaire.json de app à baf.

Veuillez noter que le plugin eslint-plugin-import n'est pas pris en charge dans eslint 9.

Il y a une discussion animée sur github - github.com/import-js/eslint-plugin-import/issues/2948

Cadre plus joli

Ajouter plus joli :

yarn add -D prettier

fil ajouter -D plus joli

Définissons les règles dans .prettierrc.json :

yarn add -D prettier

{ "supportSpacing": vrai, "largeur d'impression": 140, "semi" : vrai, "singleQuote": vrai, "tabWidth": 2, "useTabs": faux }

Exclure tout ce qui ne doit pas être formaté en .prettierignore :

yarn add -D prettier

# Ajoutez des fichiers ici pour les ignorer d'un formatage plus joli /dist /couverture /tmp /node_modules /nginx /.vscode /.idée package-lock.json package.json fil.lock .angulaire /junit junit.xml /.nx/cache

Dans l'IDE dans les paramètres les plus jolis - **/*.{js,ts,jsx,tsx,vue,astro,scss,css,html,json}.

Links

Toutes les sources sont sur github, dans le référentiel - github.com/Fafnur/buy-and-fly

La démo peut être consultée ici - buy-and-fly.fafn.ru/

Mes groupes : télégramme, support, vk, x.com, linkedin, site