एप्लिकेशन में एस्लिंट, प्रीटियर, एनवी जोड़ें।

यह अफ़सोस की बात है कि एंगुलर, डिफ़ॉल्ट रूप से, यह सब स्वयं उत्पन्न नहीं करता है। स्कीमैटिक्स बदलने से कई हजार कोणीय परियोजनाओं की गुणवत्ता में सुधार हो सकता है।

एस्लिंट 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': [ 'गलती', { प्रकार: 'विशेषता', उपसर्ग: 'बफ़', शैली: 'कैमलकेस', }, ], '@angular-eslint/घटक-चयनकर्ता': [ 'गलती', { प्रकार: 'तत्व', उपसर्ग: 'बफ़', शैली: 'कबाब-केस', }, ], '@टाइपस्क्रिप्ट-एसलिंट/नामिंग-कन्वेंशन': [ 'गलती', { चयनकर्ता: 'डिफ़ॉल्ट', प्रारूप: ['कैमलकेस'], लीडिंगअंडरस्कोर: 'अनुमति दें', ट्रेलिंगअंडरस्कोर: 'अनुमति दें', फ़िल्टर: { रेगेक्स: '^(ts-jest|\\^.*)$', मिलान: झूठा, }, }, { चयनकर्ता: 'डिफ़ॉल्ट', प्रारूप: ['कैमलकेस'], लीडिंगअंडरस्कोर: 'अनुमति दें', ट्रेलिंगअंडरस्कोर: 'अनुमति दें', }, { चयनकर्ता: 'चर', प्रारूप: ['कैमलकेस', 'UPPER_CASE'], लीडिंगअंडरस्कोर: 'अनुमति दें', ट्रेलिंगअंडरस्कोर: 'अनुमति दें', }, { चयनकर्ता: 'टाइपलाइक', प्रारूप: ['पास्कलकेस'], }, { चयनकर्ता: 'एनममेम्बर', प्रारूप: ['पास्कलकेस'], }, { चयनकर्ता: 'संपत्ति', प्रारूप: शून्य, फ़िल्टर: { रेगेक्स: '^(होस्ट)$', मिलान: झूठा, }, }, ], जटिलता: 'त्रुटि', 'मैक्स-लेन': [ 'गलती', { कोड: 140, }, ], 'कोई नया रैपर नहीं': 'त्रुटि', 'नो-थ्रो-लिटरल': 'त्रुटि', '@typescript-eslint/consistent-type-definitions': 'त्रुटि', 'नो-शैडो': 'ऑफ़', '@टाइपस्क्रिप्ट-एसलिंट/नो-शैडो': 'त्रुटि', 'नहीं-अमान्य-यह': 'बंद', '@typescript-eslint/no-invalid-this': ['चेतावनी'], '@angular-eslint/no-host-metadata-property': 'बंद', }, }, { फ़ाइलें: ['**/*.html'], विस्तारित: [...angular.configs.templateRecommended, ...angular.configs.templateAccessibility], नियम: {}, }, )

angular.json में एप्लिकेशन उपसर्ग को ऐप से baf में बदलें।

कृपया ध्यान दें कि एस्लिंट-प्लगइन-आयात प्लगइन एस्लिंट 9 में समर्थित नहीं है।

जीथब पर गरमागरम चर्चा चल रही है - github.com/import-js/eslint-plugin-import/issues/2948

सुंदर सेटिंग

सुंदर जोड़ें:

yarn add -D prettier

यार्न ऐड -डी सुंदर

आइए .prettierrc.json में नियमों को परिभाषित करें:

yarn add -D prettier

{ "ब्रैकेटस्पेसिंग": सत्य, "प्रिंटविथ": 140, "अर्ध": सत्य, "सिंगलकोट": सत्य, "टैबविड्थ": 2, "यूज़टैब्स": गलत }

उन सभी चीज़ों को बाहर निकालें जिन्हें .prettierignore में फ़ॉर्मेट नहीं किया जाना चाहिए:

yarn add -D prettier

# फ़ाइलों को सुंदर फ़ॉर्मेटिंग से अनदेखा करने के लिए यहां जोड़ें /जिला /कवरेज /tmp /नोड_मॉड्यूल /nginx /.vscode /।विचार पैकेज-लॉक.जेसन package.json यार्न.ताला .कोणीय /जूनिट जूनिट.xml /.nx/कैश

सुंदर सेटिंग्स में आईडीई में - **/*.{js,ts,jsx,tsx,vue,astro,scss,css,html,json}.

लिंक

सभी स्रोत जीथब पर, रिपॉजिटरी में हैं - github.com/Fafnur/buy-and-fly

डेमो यहां देखा जा सकता है - buy-and-fly.fafn.ru/

मेरे समूह: टेलीग्राम, मीडियम, वीके, एक्स.कॉम, लिंक्डइन, साइट