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.
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
Ajouter plus joli :
yarn add -D prettierfil 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}.
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
Clause de non-responsabilité: Toutes les ressources fournies proviennent en partie d'Internet. En cas de violation de vos droits d'auteur ou d'autres droits et intérêts, veuillez expliquer les raisons détaillées et fournir une preuve du droit d'auteur ou des droits et intérêts, puis l'envoyer à l'adresse e-mail : [email protected]. Nous nous en occuperons pour vous dans les plus brefs délais.
Copyright© 2022 湘ICP备2022001581号-3