ESLint - הגדרת "no-unused-vars" עבור TypeScript

אני משתמש ב-ESLint בכל פרויקטי TypeScript שלי עם ההגדרות הבאות:

  "extends": ["airbnb", "prettier", 'plugin:vue/recommended'],
  "plugins": ["prettier"],
  "parserOptions": {
  "parser": "@typescript-eslint/parser",
  "ecmaVersion": 2018,
  "sourceType": "module"
  },

• חבילה של כללים מותאמים אישית. התקנתי גם את התלויות הבאות לתמיכת TypeScript:

    "@typescript-eslint/eslint-plugin": "^1.7.0",
    "@typescript-eslint/parser": "^1.7.0",
  

עם זאת, אחד הכללים השימושיים ביותר של ESLint, https://eslint.org/docs/rules/no-unused-vars, נראה שהוא מוגדר בצורה גרועה מאוד עבור פרויקטי TypeScript. לדוגמה, כאשר אני מייצא enum, הכלל מזהיר אותי שה-enum אינו בשימוש בקובץ שבו הוא הוצהר:

export enum Foo {
   Bar,
}

באופן דומה, כאשר אני מייבא ממשק או מחלקה שישמשו כסוג, 'no-unused-vars' ימשיך להתלונן על שורת הייבוא בפועל:

בקובץ Foo.ts

export interface Foo {
   bar: string;
}

בקובץ bar.ts

import { Foo } from './Foo'
const bar: Foo = { bar: 'Hello' };

האם יש דרך להגדיר את הכלל no-unused-vars כך שיתחשב בשני המקרים האלה? אני לא מעריך לבטל את הכלל, שכן הוא אחד הכללים הכי מועילים בכל סט הכללים שלי חוץ מהמקרים האלה.

כבר הורדתי את דרגת הכלל כך שייתן רק אזהרה במקום שגיאה, אבל שיש את כל המסמכים שלי מלאים באזהרות עדיין קצת מבטל את המטרה של שימוש ב-esLint.

למלא את כל המסמכים שלי ב-//eslint-disable-line כפי שמוצע כאן גם נראה כמו פתרון גרוע.

תשובה #1

אני חושב שהשימוש ב-"plugin:@typescript-eslint/eslint-recommended" מציג הרבה חוקים בלתי רצויים. כנראה עדיף להשתמש במקום זאת בחוק ESLint "@typescript-eslint/no-unused-vars".

{
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint",
  ],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
  ],
  "rules": {
    "no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars": ["error"]
  }
}

הערה: ודא להפעיל מחדש את השרת לאחר ביצוע השינוי הנ"ל.

הפניה - https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-unused-vars.md

תשובה #2

זה קצת קבור בתיעוד, אבל אם תוסיף כמה דברים לנכס 'extends', תוכל להשתמש גם בכלליים שמומלצים על ידי ESLint כמו no-unused-vars, ולהפוך אותם לעבודה בפועל ב-TYPESCRIPT. כך:

"extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended"
    ],

@typescript-eslint/recommended נראה להיות הדבר שמאפשר ל-eslint:recommended להתמודד עם מבני Typescript בצורה אפקטיבית. לא בטוח איך זה ישפיע על ההרחבות האחרות שלך לעומת זאת.

תשובה #3

קיבלתי הרבה שגיאות שווא בגרסאות האחרונות של TypeScript/ES-Lint וגיליתי שהם הציגו כלל ניסיוני כדי לתקן את no-unused-vars השבור ועם הכלל הניסיוני @typescript-eslint/no-unused-vars-experimental זה סוף סוף עובד כפי שציפיתי לו.

לפני השינוי מצד שלי, היו לי מספר שגיאות שווא בעת שימוש בממשקים/סוגים שאמרו שהמשתנים הללו אינם בשימוש (שכמובן לעולם לא ישמשו שכן הם אינם משתנים אלא ממשקים/סוגים)... ואם אתם סקרנים לגבי הקוד עצמו, הנה ה-PR שמוסיף את הכלל הנסיוני הזה שבזכותו מצאתי את הכלל.

הנה קבוצה משנה של קובץ .eslintrc המעודכן שלי

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": {
    "@typescript-eslint/no-unused-vars": "off",
    "@typescript-eslint/no-unused-vars-experimental": "error",
    "no-unused-vars": "off"
  }
}

ועכשיו אני סוף סוף חזרתי לנורמל :)

עריכה (ינואר 2021)

כפי שציין ברד (מנהל הפרויקט) בהערה למטה, זו הייתה פתרון זמני וכעת הוא מיושן. מההערה שלו (למטה), אנו יכולים כעת להשתמש ישירות ב-@typescript-eslint/no-unused-vars לאותו ההתנהגות המיועדת. תודה לברד על המידע. אני יכול גם לאשר שהחזרה ל-@typescript-eslint/no-unused-vars עובדת כעת עבורי (עדכנתי את הקוד שלי והכל בסדר עכשיו).

זו לא הדרך ללכת, ואתה צריך להימנע ממנה. @typescript-eslint/no-unused-vars-experimental מיושנת, ותוסר במהדורה הגדולה הבאה. עדכן לגרסה האחרונה של הכלים ופשוט השתמש ב-@typescript-eslint/no-unused-vars. מקור: אני האחראי על הפרויקט.

אז הנה העדכון האחרון של קובץ .eslintrc שלי שעובד עבורי :)

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": {
    "@typescript-eslint/no-unused-vars": "error",
    "no-unused-vars": "off"
  }
}

תשובה #4

הבעיה שלי הייתה בשימוש בדקורטורים וברצון שיהיה לי משתנה עם שם מתאים לצורך בהירות, לדוגמה:

@OneToMany((type) => Employee) במקום @OneToMany(() => Employee)

הפתרון הרגיל ב-TypeScript הוא להקדים בקו תחתון:

@OneToMany((_type) => Employee)

ואפשר לגרום ל-ESLint לקבל את אותו הדבר:

.eslintrc.js

module.exports = {
  ...
  rules: {
    '@typescript-eslint/no-unused-vars': ['warn', { 'argsIgnorePattern': '^_' }]
    ....
  },
};

תשובה #5

לכל מי שמחפש להפעיל את no-unused-vars בצורה תקינה ב-TypeScript בעת שימוש בקונפיגורציה של YAML, למשל .eslintrc.yaml, זה נראה כך:

rules:

  "@typescript-eslint/no-unused-vars":
  - warn
  - argsIgnorePattern: "^_"                # <-- NOTE!
    varsIgnorePattern: "^_"
    caughtErrorsIgnorePattern: "^_"

  no-unused-vars: # disabled but see typescript-eslint/no-unused-vars
  - off
  ...