ESLint 9 Flat Config: לינטינג מהיר ל-TypeScript ו-React עם CI/CD

אתה משיק פרויקט עם TypeScript ו-React 18, ו-ESLint זורק מאות שגיאות—90% מהן חיוביות שגויות. או שהתצורה השטוחה לא נקראת, ו-CI נופל. באחד הפרויקטים שלנו עם 800+ קבצים, הלינטינג הראשוני לקח 45 שניות. לאחר המעבר לתצורה שטוחה, זה ירד ל-12 שניות. אנחנו מתמודדים עם זה כל הזמן ויודעים להגדיר לינטינג כך שהוא עובד בשבילך, לא נגדך.

בעיות שאנחנו פותרים

התנגשויות חוקים בעת מעבר לתצורה שטוחה

ה-.eslintrc הישן וה-eslint.config.mjs החדש אינם תואמים. אם שני הפורמטים נמצאים בשימוש בפרויקט, ESLint זורק שגיאה. הפתרון הוא מעבר מלא לתצורה שטוחה עם סקירה של חוקים ישנים.

חוקים עם בדיקת טיפוסים מאטים בניות

@typescript-eslint/recommendedTypeChecked מכביד על שירות השפות של TypeScript. במונוריפו גדול עם 1000+ קבצים, הלינטינג יכול לקחת עד 3 דקות. אנחנו מייעלים: לא כוללים קבצי תצורה מבדיקות עם טיפוסים, מאפשרים מטמון דרך eslint-plugin-turbo. כפי שצוין בתיעוד הרשמי של ESLint, תצורה שטוחה מנתחת 40% מהר יותר. בפרויקט עם 500+ קבצים, קיצרנו זמן מ-45 ל-12 שניות.

תיקון אוטומטי שובר קוד

חוקים כמו no-param-reassign או no-nested-ternary עם --fix יכולים לשבור לוגיקה באופן בלתי צפוי. הניסיון שלנו מראה שתיקון אוטומטי צריך להיות מופעל רק עבור חוקים בטוחים (רווחים, נקודה-פסיק).

איך אנחנו מגדירים ESLint עבור TypeScript עם תצורה שטוחה

בפרויקט אחד עם React 18 + TypeScript 5, הוספנו לינטינג מאפס באמצעות תצורה שטוחה.

התקנה ותצורה

npm install --save-dev eslint @eslint/js typescript-eslint eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y 

npm install --save-dev eslint @eslint/js typescript-eslint eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-jsx-a11y :

import js from '@eslint/js';
import tseslint from 'typescript-eslint';
import reactPlugin from 'eslint-plugin-react';
import reactHooks from 'eslint-plugin-react-hooks';
import jsxA11y from 'eslint-plugin-jsx-a11y';

export default tseslint.config(
  js.configs.recommended,
  ...tseslint.configs.recommendedTypeChecked,
  {
    languageOptions: {
      parserOptions: {
        project: './tsconfig.json',
        tsconfigRootDir: import.meta.dirname,
      },
    },
  },
  {
    plugins: {
      react: reactPlugin,
      'react-hooks': reactHooks,
      'jsx-a11y': jsxA11y,
    },
    settings: {
      react: {
        version: 'detect'
      }
    },
    rules: {
      ...reactPlugin.configs.recommended.rules,
      ...reactHooks.configs.recommended.rules,
      ...jsxA11y.configs.recommended.rules,
      'react/react-in-jsx-scope': 'off',
      'react/prop-types': 'off',
    },
  },
  {
    rules: {
      '@typescript-eslint/no-explicit-any': 'warn',
      '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
      '@typescript-eslint/consistent-type-imports': ['error', { prefer: 'type-imports' }],
      '@typescript-eslint/no-floating-promises': 'error',
      'no-console': ['warn', { allow: ['warn', 'error'] }],
      'prefer-const': 'error',
      'no-var': 'error',
    },
  },
  {
    ignores: ['dist/**', 'node_modules/**', '*.config.js', 'coverage/**'],
  },
);

אינטגרציית CI/CD

ב-eslint.config.mjs, הוסף שלושה סקריפטים:

{
  "scripts": {
    "lint": "eslint src",
    "lint:fix": "eslint src --fix",
    "lint:ci": "eslint src --max-warnings 0"
  }
}

הדגל import js from '@eslint/js'; import tseslint from 'typescript-eslint'; import reactPlugin from 'eslint-plugin-react'; import reactHooks from 'eslint-plugin-react-hooks'; import jsxA11y from 'eslint-plugin-jsx-a11y'; export default tseslint.config( js.configs.recommended, ...tseslint.configs.recommendedTypeChecked, { languageOptions: { parserOptions: { project: './tsconfig.json', tsconfigRootDir: import.meta.dirname, }, }, }, { plugins: { react: reactPlugin, 'react-hooks': reactHooks, 'jsx-a11y': jsxA11y, }, settings: { react: { version: 'detect' } }, rules: { ...reactPlugin.configs.recommended.rules, ...reactHooks.configs.recommended.rules, ...jsxA11y.configs.recommended.rules, 'react/react-in-jsx-scope': 'off', 'react/prop-types': 'off', }, }, { rules: { '@typescript-eslint/no-explicit-any': 'warn', '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }], '@typescript-eslint/consistent-type-imports': ['error', { prefer: 'type-imports' }], '@typescript-eslint/no-floating-promises': 'error', 'no-console': ['warn', { allow: ['warn', 'error'] }], 'prefer-const': 'error', 'no-var': 'error', }, }, { ignores: ['dist/**', 'node_modules/**', '*.config.js', 'coverage/**'] }, ); הופך אזהרות לשגיאות—הצינור נכשל אפילו על אזהרה אחת.

למה ESLint 9 דורש תצורה שטוחה

תצורה שטוחה היא לא רק טרנד; זה הכרח. פורמט package.json הישן מתנגש עם תוספים חדשים ולא תומך במודולי ES. ESLint 9 לא יעבוד עם { "scripts": { "lint": "eslint src", "lint:fix": "eslint src --fix", "lint:ci": "eslint src --max-warnings 0" } } כברירת מחדל. המעבר נותן לך תצורה נקייה וניתוח מהיר יותר. לפי התיעוד הרשמי, תצורה שטוחה מנתחת 40% מהר יותר.

איך לעבור מ-.eslintrc לתצורה שטוחה

1. מחק את --max-warnings 0 ו-.eslintrc מ-.eslintrc.*.
2. צור eslintConfig עם ייבוא מ-package.json ו-eslint.config.mjs.
3. העבר חוקים מ-extends למערך התצורה השטוחה.
4. שכתב הגדרות מפענח ותוספים.
5. הרץ @eslint/js וודא שהכל עובד.

מה אם CI/CD נכשל בגלל לינטינג?

סיבה נפוצה היא אזהרות בקוד ש-CI לא צריך לאפשר. הוסף סקריפט typescript-eslint עם הדגל eslint --fix. אם הלינטינג עדיין נכשל, בדוק ש-lint:ci לא כולל קבצים מיותרים ו---max-warnings 0 מתעלם מ-.gitignore ו-eslint.config.mjs. בפרויקט אחד, CI נכשל בגלל קבצי בדיקות—הוספנו dist.

השוואת ביצועים

מה כלול בעבודה שלנו

לוחות זמנים משוערים

הגדרת ESLint מאפס עבור פרויקט TypeScript/React: מיום אחד. מעבר מ---max-warnings 0 לתצורה שטוחה עם תיקון שגיאות בסיסיות: מיומיים. העלות נקבעת באופן אישי לאחר ביקורת קוד.

טעויות נפוצות בתצורה

• התעלמות מ-node_modules: בתצורה שטוחה עליך להגדיר במפורש --fix.
• ערבוב פורמטים: אי אפשר להשתמש גם ב-.eslintrc וגם ב-ignores: ['node_modules/**'].
• בדיקת טיפוסים לכל הקבצים: החרג קבצי תצורה וסקריפטים—הם מאטים את הלינטינג ללא תועלת.
• חסר .eslintrc ב-CI: ללא הדגל, CI יעביר אזהרות.

סמוך על הגדרה לאנשי מקצוע

יש לנו 5+ שנות ניסיון בהגדרת ESLint לפרויקטים החל מסטארטאפים ועד ארגונים. אנחנו מבטיחים לינטינג שעובד ללא חיוביות שגויות. קבל ייעוץ—נעריך את הפרויקט שלך ונספק תצורה מוכנה. ליישום מהיר, צור קשר—נכין את התצורה ביום אחד.