Настройка flat config в редакторе

Появление flat config в ESLint изменило подход к настройке линтера в редакторах кода. Вместо многоуровневой системы конфигурационных файлов (.eslintrc, .eslintrc.json, .eslintrc.js, package.json) используется единый файл eslint.config.js, eslint.config.mjs или eslint.config.cjs, содержащий всю конфигурацию проекта.

Для редакторов это означает более предсказуемый процесс загрузки настроек. ESLint больше не выполняет поиск конфигурации по дереву каталогов, а использует единую точку входа.

Пример минимального flat config:

export default [
    {
        rules: {
            semi: "error",
            quotes: ["error", "single"]
        }
    }
];

После появления такого файла редактор автоматически использует его при запуске ESLint.

Поддержка flat config в редакторах

Современные редакторы работают с ESLint через официальные расширения или встроенные механизмы интеграции. Поддержка flat config появилась позже классической конфигурации, поэтому важно использовать актуальные версии инструментов.

Основные требования:

  • ESLint версии 9 и выше;
  • современная версия расширения ESLint;
  • наличие файла eslint.config.js;
  • корректно установленный пакет ESLint в проекте.

Структура проекта:

project/
├── src/
│   ├── index.js
│   └── utils.js
├── eslint.config.js
├── package.json
└── node_modules/

Редактор обнаруживает ESLint в каталоге проекта и использует найденную конфигурацию.

Настройка ESLint в Visual Studio Code

Наиболее популярной средой разработки для JavaScript является Visual Studio Code.

Для работы ESLint необходимо установить официальное расширение ESLint от Microsoft.

После установки расширения рекомендуется убедиться, что оно использует локальную версию ESLint из проекта, а не глобально установленную.

Файл настроек VS Code:

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "always"
    }
}

Такая настройка запускает автоматическое исправление ошибок ESLint при сохранении файла.

Если используется flat config, дополнительных параметров обычно не требуется. Расширение автоматически обнаруживает файл:

eslint.config.js

или

eslint.config.mjs

и начинает использовать его.

Включение форматирования через ESLint

Многие проекты используют ESLint не только для проверки кода, но и для автоматического исправления нарушений стиля.

Пример правила:

export default [
    {
        rules: {
            indent: ["error", 4],
            semi: ["error", "always"],
            quotes: ["error", "single"]
        }
    }
];

Код до сохранения:

const message = "Hello"

После сохранения:

const message = 'Hello';

Редактор получает исправления от ESLint и автоматически применяет их к открытому файлу.

Настройка проверки при вводе

Расширение ESLint способно выполнять анализ кода в реальном времени.

При обнаружении ошибки редактор:

  • подчеркивает проблемный участок;
  • выводит сообщение при наведении курсора;
  • отображает ошибку в панели Problems;
  • предлагает быстрые исправления.

Пример правила:

export default [
    {
        rules: {
            no-unused-vars: "error"
        }
    }
];

Код:

const unusedValue = 10;

console.log('test');

Редактор покажет ошибку:

'unusedValue' is assigned a value but never used.

Проверка выполняется сразу после изменения файла.

Использование TypeScript во flat config

При работе с TypeScript редактор должен понимать дополнительные правила и синтаксис языка.

Установка зависимостей:

npm install -D eslint typescript typescript-eslint

Конфигурация:

import tseslint from 'typescript-eslint';

export default [
    ...tseslint.configs.recommended
];

После открытия файлов .ts и .tsx редактор автоматически применяет TypeScript-правила.

Пример ошибки:

let value: string = 123;

Сообщение:

Type 'number' is not assignable to type 'string'

Таким образом редактор объединяет возможности TypeScript и ESLint в единую систему диагностики.

Настройка рабочих областей (Workspace)

В крупных проектах настройки редактора обычно сохраняются внутри репозитория.

Каталог:

.vscode/
└── settings.json

Пример:

{
    "editor.formatOnSave": false,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "always"
    }
}

Такой подход обеспечивает одинаковое поведение ESLint у всех участников команды.

Локальные настройки пользователя не влияют на конфигурацию проекта.

Работа в монорепозиториях

Монорепозитории содержат несколько приложений или пакетов внутри одного репозитория.

Структура:

repo/
├── packages/
│   ├── frontend/
│   └── backend/
├── eslint.config.js
└── package.json

Flat config хорошо подходит для подобных проектов, поскольку весь набор правил можно централизовать.

Пример:

export default [
    {
        files: ['packages/frontend/**/*.js'],
        rules: {
            browser: 'error'
        }
    },
    {
        files: ['packages/backend/**/*.js'],
        rules: {
            'no-process-exit': 'error'
        }
    }
];

Редактор будет применять разные правила в зависимости от расположения файла.

Использование нескольких конфигурационных объектов

Flat config представляет собой массив объектов.

Каждый объект может отвечать за отдельную часть проекта.

Пример:

export default [
    {
        files: ['src/**/*.js'],
        rules: {
            semi: 'error'
        }
    },
    {
        files: ['tests/**/*.js'],
        rules: {
            'no-console': 'off'
        }
    }
];

Файл:

src/app.js

получит правило semi.

Файл:

tests/app.test.js

дополнительно получит отключение no-console.

Редактор автоматически определяет подходящую конфигурацию для каждого файла.

Диагностика проблем загрузки конфигурации

Иногда редактор не обнаруживает flat config.

Наиболее распространённые причины:

Неверное имя файла

Неправильно:

eslint.js

Правильно:

eslint.config.js

Отсутствие ESLint в проекте

Следует проверить наличие пакета:

npm ls eslint

Ошибки импорта

Некорректный импорт:

import unknownConfig from './unknown.js';

Если импортируемый файл отсутствует, ESLint не сможет загрузить конфигурацию.

Ошибки синтаксиса

Неверно:

export default [
    {
        rules: {
            semi: "error",
        ,
    }
];

Редактор обычно отображает сообщение о невозможности загрузить конфигурационный файл.

Просмотр журналов ESLint в редакторе

При возникновении проблем полезно анализировать журнал работы расширения.

В Visual Studio Code журнал доступен через:

View → Output

Затем выбирается канал:

ESLint

В журнале отображаются:

  • путь к найденному ESLint;
  • используемый конфигурационный файл;
  • ошибки загрузки;
  • результаты запуска линтера.

Типичное сообщение:

ESLint server running.

или

Failed to load config file.

Эта информация значительно упрощает поиск ошибок конфигурации.

Настройка автоисправления при сохранении

Наиболее распространённый сценарий использования ESLint в редакторе — автоматическое исправление кода.

Настройка:

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": "always"
    }
}

Пример исходного кода:

const user = "Admin"

После сохранения:

const user = 'Admin';

Если правило поддерживает автоматическое исправление, редактор применяет его без участия разработчика.

Совместная работа ESLint и Prettier

Во многих проектах ESLint отвечает за качество кода, а Prettier — за форматирование.

Пример конфигурации:

import eslintConfigPrettier from 'eslint-config-prettier';

export default [
    eslintConfigPrettier
];

Редактор может запускать:

  1. ESLint для поиска ошибок.
  2. Prettier для форматирования.
  3. ESLint для дополнительной проверки результата.

Flat config позволяет централизованно управлять взаимодействием этих инструментов.

Проверка используемой конфигурации

Для понимания того, какую конфигурацию видит редактор через ESLint, используется команда:

npx eslint --print-config src/index.js

Результатом станет полный набор правил и параметров, применяемых к указанному файлу.

Это особенно полезно при наличии:

  • нескольких конфигурационных объектов;
  • монорепозиториев;
  • многочисленных плагинов;
  • различных наборов правил для разных директорий.

Сравнение фактической конфигурации с ожидаемой позволяет быстро обнаружить ошибки настройки и понять, почему редактор показывает те или иные предупреждения.

Оглавление