हम प्रिटियर, हस्की और लिंट-स्टेज के साथ ESLint पर कोणीय परियोजना को पोर्ट करते हैं

Prettier और ESLint

• स्वरूपण - कोड को एक दृश्य में लाने के लिए: लाइन की लंबाई, अल्पविराम, अर्धविराम, आदि।
• कोड गुणवत्ता - समस्याग्रस्त कोड टेम्प्लेट खोजना: अनावश्यक कोड, त्रुटियां।

eslint example.ts --fix

output:
error    This line has a length of 97. Maximum allowed is 80

ESLint सेटअप

स्थापना

• एस्लिन्ट - लिंटर ही,
• @ कोणीय-अनुलग्‍नक / निर्माता  - कोणीय CLI बिल्डर को मानक एनजी लिंट कमांड का उपयोग करते हुए कोणीय अनुप्रयोगों के लिए ESLint चलाने के लिए,
• @ कोणीय-एस्लिंट / एस्लिंट-प्लगइन  - एक प्लगइन जिसमें कोणीय लाइनिंग के लिए नियम हैं,
• @ कोणीय-एसलिंट / टेम्प्लेट-पार्सर  एक पार्सर है जो साथ हैकोणीय/ संकलक अस्तर टेम्प्लेट के लिए नियम लिखना संभव बनाता है,
• @ कोणीय-अनुलग्‍नक / अनुलग्‍नक-टेम्‍पलेट-टेम्‍प्‍लेट  - एक ऐसा प्
• @ टाइपस्क्रिप्ट-एसलिंट / पार्सर - टाइपिंग कोड टाइप करने के लिए प्लगइन,
• @ टाइपस्क्रिप्ट-एस्लिंट / एस्लिंट-प्लगइन - एक प्लगइन जो लाइनिंग के लिए टाइपस्क्रिप्ट नियम चलाता है।

ng add @angular-eslint/schematics

कॉन्फ़िगरेशन कॉन्फ़िगर करें

module.exports = {
  extends: ['plugin:@angular-eslint/recommended'],
  rules: {
    '@angular-eslint/directive-selector': [
      'error',
      { type: 'attribute', prefix: 'app', style: 'camelCase' },
    ],
    '@angular-eslint/component-selector': [
      'error',
      { type: 'element', prefix: 'app', style: 'kebab-case' },
    ],
  },
  overrides: [
    //   ,       *.component.ts
    {
      files: ['*.component.ts'],
      parser: '@typescript-eslint/parser',
      parserOptions: {
        ecmaVersion: 2020,
        sourceType: 'module',
      },
      plugins: ['@angular-eslint/template'],
      processor: '@angular-eslint/template/extract-inline-html',
    },
  ],
};

कन्फ़िग्स को विभिन्न स्वरूपों में वर्णित किया जा सकता है: जावास्क्रिप्ट, JSON या YAML फ़ाइल। आप जावास्क्रिप्ट में टिप्पणी छोड़ सकते हैं।

एनजी लिंट कमांड अपडेट

"lint": {
  "builder": "@angular-eslint/builder:lint",
  "options": {
    "eslintConfig": ".eslintrc.js",
    "tsConfig": [
      "tsconfig.app.json",
      "tsconfig.spec.json",
      "e2e/tsconfig.json"
    ],
    "exclude": [
      "**/node_modules/**"
    ]
  }
},

अतिरिक्त प्लगइन्स स्थापित करें

npm install eslint-plugin-jasmine --save-dev

overrides: [
  ...,
  {
    files: ['src/**/*.spec.ts', 'src/**/*.d.ts'],
    parserOptions: {
      project: './src/tsconfig.spec.json',
    },
    //   
    extends: ['plugin:jasmine/recommended'],
    //    
    plugins: ['jasmine'],
    env: { jasmine: true },
    //   'no-unused-vars'
    rules: {
      '@typescript-eslint/no-unused-vars': 'off',
    },
  }
],

स्टाइल गाइड गाइड जोड़ना

• AirBnB : तीनों में से सबसे लोकप्रिय और सख्त, अनिवार्य ट्रेलिंग कॉमा और सेमीकोलन।
• Google : स्वरूपण के संदर्भ में AirBnB के समान, लेकिन कम सख्त, अनिवार्य JSDoc टिप्पणियां।
• StandartJS : अनुगामी अल्पविराम और अर्धविरामों के उपयोग को प्रतिबंधित करता है।

टाइपस्क्रिप्ट शैली मार्गदर्शिका का कार्यान्वयन चुनें क्योंकि जावास्क्रिप्ट नियम टाइपस्क्रिप्ट पर सही ढंग से काम नहीं कर सकते हैं।

npm install eslint-plugin-import eslint-config-airbnb-typescript --save-dev

module.exports = {
  ...,
  overrides: [
    ...,
    {
      files: ['*.ts'],
      extends: [
        'airbnb-typescript/base',
      ],
      parser: '@typescript-eslint/parser',
      parserOptions: {
        ecmaVersion: 2020,
        sourceType: 'module',
      },
    },
  ]
}

अनुकूलन नियम

module.exports = {
  ...,
  overrides: [
    ...,
    {
      files: ['*.ts'],
      extends: [
        'airbnb-typescript/base',
      ],
      parser: '@typescript-eslint/parser',
      parserOptions: {
        ecmaVersion: 2020,
        sourceType: 'module',
      },
      //  
      rules: {
        'import/no-unresolved': 'off',
        'import/prefer-default-export': 'off',
        'class-methods-use-this': 'off',
        'lines-between-class-members': 'off',
        '@typescript-eslint/unbound-method': [
          'error',
          {
            ignoreStatic: true,
          },
        ],
      },
    },
  ]
}

Prettier कॉन्फ़िगर करें

npm i prettier eslint-config-prettier eslint-plugin-prettier --save-dev

module.exports = {
  ...,
  overrides: [
    ...,
    {
      files: ['*.ts'],
      extends: [
        //   AirBnB
	'airbnb-typescript/base',
	//   Prettier
	'prettier/@typescript-eslint',
	'plugin:prettier/recommended',
      ],
      ...,
    },
  ]
}

• एस्लिन्ट-प्लगइन-प्रीटीयर शामिल हैं,
• प्रिंट करने के लिए प्रिटियर / प्रीटियर नियम त्रुटियों को "त्रुटि" के रूप में प्रिंट करता है,
• Prettier eslint-config-prettier स्वरूपण नियम जोड़ता है।

Prettier के लिए कॉन्फ़िगर करें:

module.exports = {
  trailingComma: "all",
  tabWidth: 2,
  semi: true,
  singleQuote: true,
  bracketSpacing: true,
  printWidth: 100
};

prettier "--write ."

VS कोड कॉन्फ़िगर करें

  "eslint.validate": [ "javascript", "typescript", "html"],

  "eslint.options": {
    "extensions": [".js", ".ts", "html"]
  },

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },

गिट हुक स्थापित करना

npm i husky lint-staged --save-dev

"scripts": {
  ...
},
"husky": {
  "hooks": {
    "pre-commit": "lint-staged --relative"
  }
},
"lint-staged": {
  "*.{js,ts}": [
     "eslint --fix"
  ]
},

जाँच - परिणाम

संदर्भ

• एकवचन भंडार कोणीय ESLint
• टाइपस्क्रिप्ट ESLint Monorepository