eslint-config-mgz

Shared ESLint configuration for React + TypeScript projects

🇷🇺 Русский

📦 Описание

eslint-config-mgz — это переиспользуемая конфигурация ESLint для frontend проектов с React и TypeScript:

• ✅ TypeScript поддержка с @typescript-eslint
• ✅ React правила и хуки
• ✅ Import правила для модулей
• ✅ JSX accessibility проверки
• ✅ Prettier интеграция (отключает конфликтующие правила)

Цель пакета — стандартизировать линтинг во всех проектах и обеспечить качество кода.

🚀 По умолчанию используется flat config для ESLint v9+, с поддержкой legacy формата для v7-8.

📂 Содержимое пакета

| Файл | Назначение | | ---------------- | ----------------------------------- | | base.js | Основная конфигурация ESLint (v7-8) | | flat-config.js | Flat config для ESLint v9+ |

🚀 Установка

# ESLint v7-8 (обязательные)
npm install -D eslint-config-mgz eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import eslint-plugin-jsx-a11y eslint-config-prettier

# ESLint v9+ (обязательные + опциональные)
npm install -D eslint-config-mgz eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import eslint-plugin-jsx-a11y eslint-config-prettier @eslint/js typescript-eslint

# ESLint v7-8 (обязательные)
pnpm add -D eslint-config-mgz eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import eslint-plugin-jsx-a11y eslint-config-prettier

# ESLint v9+ (обязательные + опциональные)
pnpm add -D eslint-config-mgz eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import eslint-plugin-jsx-a11y eslint-config-prettier @eslint/js typescript-eslint

# ESLint v7-8 (обязательные)
yarn add -D eslint-config-mgz eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import eslint-plugin-jsx-a11y eslint-config-prettier

# ESLint v9+ (обязательные + опциональные)
yarn add -D eslint-config-mgz eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import eslint-plugin-jsx-a11y eslint-config-prettier @eslint/js typescript-eslint

🚨 Совместимость с ESLint

📊 Таблица совместимости:

| ESLint версия | Совместимость | Экспорт | Конфиг файл | Примечания | | ------------- | ------------- | ---------- | ----------------- | --------------------------- | | v7.x | ✅ Полная | /base | .eslintrc.* | Legacy формат | | v8.x | ✅ Полная | /base | .eslintrc.* | Legacy формат | | v9.x | ✅ Полная | / (main) | eslint.config.* | Flat config (рекомендуется) |

🧩 Использование

ESLint v9+ (рекомендуется)

// eslint.config.js
import mgzConfig from "eslint-config-mgz";
export default mgzConfig;

ESLint v7-8

// .eslintrc.js
module.exports = {
  extends: ["eslint-config-mgz/base"],
  parserOptions: {
    project: "./tsconfig.json",
  },
};

С дополнительными правилами

// eslint.config.js (для v9+)
import mgzConfig from "eslint-config-mgz";

export default [
  ...mgzConfig,
  {
    rules: {
      "no-console": "warn",
      "@typescript-eslint/no-unused-vars": "error",
    },
  },
];

Для ESLint v9+ (Flat Config)

// eslint.config.js
import config from "eslint-config-mgz/flat-config";

export default config;

Или с дополнительными правилами:

// eslint.config.js
import { FlatCompat } from "@eslint/eslintrc";
import baseConfig from "eslint-config-mgz";

const compat = new FlatCompat();
export default [
  ...compat.config(baseConfig),
  {
    rules: {
      // Ваши дополнительные правила
      "no-console": "warn",
    },
  },
];

Для старых версий ESLint (v7-8)

# Принудительное использование старого формата в v9
npx eslint --config .eslintrc.js src/

🧠 Включенные правила

ESLint Recommended

• Базовые правила JavaScript

TypeScript ESLint

• Правила для TypeScript кода
• Строгая типизация
• Лучшие практики TS

React ESLint

• Правила для React компонентов
• React Hooks правила
• JSX правила

Import ESLint

• Правила импортов модулей
• Проверка путей импорта

JSX Accessibility

• Доступность JSX элементов
• WCAG рекомендации

Prettier Integration

• Отключение конфликтующих правил
• Совместимость с prettier

⚠️ Важные нюансы

• Peer dependencies: Все плагины нужно устанавливать отдельно
• TypeScript: Требуется tsconfig.json для parserOptions.project
• React: Автоматически определяет версию React
• Prettier: Рекомендуется использовать вместе с prettier-config-mgz

❓ Возможные вопросы

Нужен ли tsconfig.json? Да, для правильной работы TypeScript правил нужен файл tsconfig.json.

Можно ли переопределять правила? Да, добавляйте свои правила в локальном .eslintrc файле.

Почему некоторые правила отключены? Некоторые правила отключены намеренно для гибкости или из-за конфликтов с другими инструментами.

🇬🇧 English

📦 Description

eslint-config-mgz is a shared ESLint configuration for frontend projects with React and TypeScript:

• ✅ TypeScript support with @typescript-eslint
• ✅ React rules and hooks
• ✅ Import rules for modules
• ✅ JSX accessibility checks
• ✅ Prettier integration (disables conflicting rules)

The goal is to standardize linting across all projects and ensure code quality.

📂 Package contents

| File | Purpose | | ---------------- | -------------------------------- | | base.js | Main ESLint configuration (v7-8) | | flat-config.js | Flat config for ESLint v9+ |

🚀 Installation

npm install -D eslint-config-mgz eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import eslint-plugin-jsx-a11y eslint-config-prettier

🚨 ESLint Compatibility

📊 Compatibility Table:

| ESLint Version | Compatibility | Export | Config File | Notes | | -------------- | ------------- | ---------- | ----------------- | ------------------------- | | v7.x | ✅ Full | /base | .eslintrc.* | Legacy format | | v8.x | ✅ Full | /base | .eslintrc.* | Legacy format | | v9.x | ✅ Full | / (main) | eslint.config.* | Flat config (recommended) |

🧩 Usage

ESLint v9+ (recommended)

// eslint.config.js
import mgzConfig from "eslint-config-mgz";
export default mgzConfig;

ESLint v7-8

// .eslintrc.js
module.exports = {
  extends: ["eslint-config-mgz/base"],
  parserOptions: {
    project: "./tsconfig.json",
  },
};

With additional rules

// eslint.config.js (for v9+)
import mgzConfig from "eslint-config-mgz";

export default [
  ...mgzConfig,
  {
    rules: {
      "no-console": "warn",
    },
  },
];

For ESLint v9+ (Flat Config)

// eslint.config.js
import config from "eslint-config-mgz/flat-config";

export default config;

Or with additional rules:

// eslint.config.js
import { FlatCompat } from "@eslint/eslintrc";
import baseConfig from "eslint-config-mgz";

const compat = new FlatCompat();
export default [
  ...compat.config(baseConfig),
  {
    rules: {
      // Your additional rules
      "no-console": "warn",
    },
  },
];

For older ESLint versions (v7-8)

# Force old config format in v9
npx eslint --config .eslintrc.js src/

⚠️ Important notes

• Peer dependencies: All plugins must be installed separately
• TypeScript: Requires tsconfig.json for parserOptions.project
• React: Automatically detects React version
• Prettier: Recommended to use with prettier-config-mgz

❓ Possible questions

Is tsconfig.json required? Yes, needed for proper TypeScript rules functioning.

Can rules be overridden? Yes, add your rules in local .eslintrc file.

Why are some rules disabled? Some rules are intentionally disabled for flexibility or due to conflicts with other tools.

🇰🇿 Қазақша

📦 Сипаттама

eslint-config-mgz — React және TypeScript жобалары үшін қайта қолданылатын ESLint конфигурациясы:

• ✅ TypeScript @typescript-eslint арқылы қолдау
• ✅ React ережелері және хуктары
• ✅ Import модульдердің ережелері
• ✅ JSX accessibility тексерулері
• ✅ Prettier интеграциясы (қайшы келетін ережелерді өшіру)

Мақсаты — барлық жобаларда линтингті стандарттау және код сапасын қамтамасыз ету.

📂 Пакет құрамында

| Файл | Мақсаты | | ---------------- | ----------------------------- | | base.js | Негізгі ESLint конфигі (v7-8) | | flat-config.js | Flat config ESLint v9+ үшін |

🚀 Орнату

npm install -D eslint-config-mgz eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-import eslint-plugin-jsx-a11y eslint-config-prettier

🚨 ESLint үйлесімділігі

📊 Үйлесімділік кестесі:

| ESLint нұсқасы | Үйлесімділік | Экспорт | Конфиг файл | Ескертулер | | -------------- | ------------ | ---------- | ----------------- | ----------------------- | | v7.x | ✅ Толық | /base | .eslintrc.* | Legacy формат | | v8.x | ✅ Толық | /base | .eslintrc.* | Legacy формат | | v9.x | ✅ Толық | / (main) | eslint.config.* | Flat config (ұсынылады) |

🧩 Қолдану

ESLint v9+ (ұсынылады)

// eslint.config.js
import mgzConfig from "eslint-config-mgz";
export default mgzConfig;

ESLint v7-8

// .eslintrc.js
module.exports = {
  extends: ["eslint-config-mgz/base"],
  parserOptions: {
    project: "./tsconfig.json",
  },
};

ESLint v9+ үшін (Flat Config)

// eslint.config.js
import config from "eslint-config-mgz/flat-config";

export default config;

Қосымша ережелермен:

// eslint.config.js
import { FlatCompat } from "@eslint/eslintrc";
import baseConfig from "eslint-config-mgz";

const compat = new FlatCompat();
export default [
  ...compat.config(baseConfig),
  {
    rules: {
      // Сіздің қосымша ережелеріңіз
      "no-console": "warn",
    },
  },
];

Ескі ESLint нұсқалары үшін (v7-8)

# v9-да ескі конфиг форматын мәжбүрлеу
npx eslint --config .eslintrc.js src/

⚠️ Маңызды ескертулер

• Peer dependencies: Барлық плагиндерді бөлек орнату қажет
• TypeScript: parserOptions.project үшін tsconfig.json қажет
• React: React нұсқасын автоматты түрде анықтайды
• Prettier: prettier-config-mgz бірге қолдану ұсынылады

❓ Мүмкін сұрақтар

tsconfig.json қажет пе? Иә, TypeScript ережелерінің дұрыс жұмысы үшін қажет.

Ережелерді өзгертуге бола ма? Иә, жергілікті .eslintrc файлында өз ережелеріңізді қосыңыз.

Неге кейбір ережелер өшірілген? Кейбір ережелер икемділік үшін немесе басқа құралдармен қайшылықтар салдарынан арнайы өшірілген.