애플리케이션에 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: {},
  }
);

기본 린터도 좋지만 더 좋게 만들 수 있습니다!

플러그인 추가:

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

'], ['^\\.']], }, ], '단순-가져오기-정렬/내보내기': '오류', }, }, ], 프로세서: angle.processInlineTemplates, 규칙: { '@angular-eslint/지시문 선택기': [ '오류', { 유형: '속성', 접두사: 'baf', 스타일: 'camelCase', }, ], '@angular-eslint/구성요소 선택기': [ '오류', { 유형: '요소', 접두사: 'baf', 스타일: '케밥 케이스', }, ], '@typescript-eslint/명명 규칙': [ '오류', { 선택기: '기본값', 형식: ['camelCase'], LeadingUnderscore: '허용', trailingUnderscore: '허용', 필터: { 정규식: '^(ts-jest|\\^.*)$', 일치: 거짓, }, }, { 선택기: '기본값', 형식: ['camelCase'], LeadingUnderscore: '허용', trailingUnderscore: '허용', }, { 선택기: '변수', 형식: ['camelCase', 'UPPER_CASE'], LeadingUnderscore: '허용', trailingUnderscore: '허용', }, { 선택기: 'typeLike', 형식: ['PascalCase'], }, { 선택기: 'enumMember', 형식: ['PascalCase'], }, { 선택기: '속성', 형식: null, 필터: { 정규식: '^(호스트)$', 일치: 거짓, }, }, ], 복잡성: '오류', '최대-길이': [ '오류', { 코드: 140, }, ], 'no-new-wrappers': '오류', 'no-throw-literal': '오류', '@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-plugin-import 플러그인은 eslint 9에서 지원되지 않습니다.

github에서 열띤 토론이 있습니다 - 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

# 더 멋진 형식을 지정하지 않으려면 여기에 파일을 추가하세요. /거리 /적용 범위 /tmp /노드_모듈 /nginx /.vscode /.아이디어 패키지-lock.json 패키지.json 원사.자물쇠 .모난 /junit junit.xml /.nx/캐시

IDE의 더 아름다운 설정 - **/*.{js,ts,jsx,tsx,vue,astro,scss,css,html,json}.

모래밭

모든 소스는 github의 저장소(github.com/Fafnur/buy-and-fly)에 있습니다.

데모는 여기에서 볼 수 있습니다 - buy-and-fly.fafn.ru/

내 그룹: 텔레그램, 미디엄, vk, x.com, 링크드인, 사이트