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

Одной из наиболее востребованных возможностей ESLint является автоматическое исправление части обнаруженных проблем без ручного редактирования кода. Механизм автофикса позволяет применять исправления сразу после сохранения файла, поддерживая единый стиль оформления и снижая количество рутинных действий во время разработки.

Автоматическое исправление особенно полезно при работе в крупных проектах, где необходимо соблюдать строгие стандарты кодирования. Вместо постоянного запуска команды линтера вручную изменения могут применяться автоматически в момент сохранения документа в редакторе.

Наиболее часто автоматически исправляются:

  • форматирование отступов;
  • лишние пробелы;
  • использование одинарных или двойных кавычек;
  • отсутствие точки с запятой;
  • порядок импортов (при использовании соответствующих плагинов);
  • некоторые проблемы с синтаксисом;
  • неиспользуемые конструкции, поддерживающие безопасный автофикс.

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

Как работает механизм автофикса

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

При запуске команды:

eslint . --fix

ESLint:

  1. Выполняет проверку файлов.
  2. Находит нарушения.
  3. Исправляет проблемы, поддерживающие автофикс.
  4. Повторно анализирует результат.
  5. Сохраняет изменённые файлы.

При интеграции с редактором тот же механизм запускается автоматически после сохранения документа.

Подготовка ESLint к автофиксу

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

Пример установки:

npm install --save-dev eslint

Создание конфигурации:

npx eslint --init

Проверка работы линтера:

npx eslint src

Проверка автоматического исправления:

npx eslint src --fix

Если после выполнения команды некоторые ошибки исчезли автоматически, значит механизм автофикса функционирует корректно.

Правила, поддерживающие автофикс

Многие встроенные правила ESLint содержат встроенные исправления.

Пример настройки:

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

Исходный код:

const name = "Alex"

После автофикса:

const name = 'Alex';

ESLint автоматически:

  • заменил тип кавычек;
  • добавил точку с запятой.

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

Редактор Visual Studio Code предоставляет наиболее удобную интеграцию с ESLint.

Необходимо установить расширение:

ESLint

После установки в настройках проекта создаётся файл:

.vscode/settings.json

Базовая настройка:

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

Для некоторых версий VS Code используется вариант:

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

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

Использование defaultFormatter совместно с ESLint

Во многих проектах одновременно используются ESLint и Prettier.

Настройки VS Code могут выглядеть следующим образом:

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

Порядок обработки:

  1. ESLint исправляет нарушения правил.
  2. Prettier форматирует итоговый код.
  3. Файл сохраняется.

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

Автофикс только для текущего проекта

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

Структура:

project/
├── .vscode/
│   └── settings.json
├── eslint.config.js
└── src/

Пример:

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

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

Работа с Flat Config

Начиная с современных версий ESLint основной системой конфигурирования является Flat Config.

Пример:

export default [
    {
        files: ['**/*.js'],
        rules: {
            semi: ['error', 'always'],
            quotes: ['error', 'single']
        }
    }
];

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

Настройка автофикса для TypeScript

При использовании TypeScript обычно подключается специальный парсер и набор правил.

Установка:

npm install --save-dev \
eslint \
typescript \
typescript-eslint

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

import tseslint from 'typescript-eslint';

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

После подключения расширения ESLint в редакторе автофикс начинает работать и для файлов:

.ts
.tsx

Исправляться будут как стандартные правила ESLint, так и правила TypeScript ESLint, поддерживающие механизм fix.

Проверка применяемых исправлений

Иногда полезно увидеть список изменений до их записи в файл.

Для этого используется режим:

eslint src --fix-dry-run

Он выполняет анализ и вычисляет исправления без физического изменения файлов.

Дополнительно можно вывести результат в формате JSON:

eslint src --fix-dry-run --format json

Подобный режим часто применяется в CI/CD-пайплайнах и при разработке собственных правил.

Ограничения автофикса

Автоматические исправления не предназначены для изменения логики программы.

Например:

if (value == null) {
    process(value);
}

Правило может рекомендовать использовать:

===

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

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

Автофикс через npm-скрипты

Часто создаются отдельные команды в package.json.

Пример:

{
    "scripts": {
        "lint": "eslint src",
        "lint:fix": "eslint src --fix"
    }
}

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

npm run lint

или

npm run lint:fix

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

Использование автофикса перед коммитом

В командной разработке распространена практика запуска ESLint перед созданием коммита.

Установка инструментов:

npm install --save-dev husky lint-staged

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

{
    "lint-staged": {
        "*.js": [
            "eslint --fix"
        ]
    }
}

Алгоритм работы:

  1. Разработчик создаёт коммит.
  2. Запускается Git-хук.
  3. ESLint исправляет изменения.
  4. В репозиторий попадает уже отформатированный код.

Такой подход существенно снижает количество стилистических замечаний во время проверки кода.

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

Современная практика предполагает разделение обязанностей:

  • ESLint отвечает за качество кода;
  • Prettier отвечает за форматирование.

Установка:

npm install --save-dev \
eslint \
prettier \
eslint-config-prettier

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

import eslintConfigPrettier from 'eslint-config-prettier';

export default [
    eslintConfigPrettier
];

После настройки сохранение файла обычно приводит к следующему результату:

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

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

Если исправления не применяются после сохранения файла, необходимо проверить несколько факторов.

Наличие расширения ESLint:

ESLint Extension

Работоспособность линтера:

npx eslint src

Корректность конфигурации:

eslint.config.js

Настройки VS Code:

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

Журнал работы расширения:

View → Output → ESLint

В большинстве случаев проблема связана с одной из следующих причин:

  • ESLint не установлен в проекте;
  • отсутствует конфигурационный файл;
  • расширение редактора отключено;
  • правило не поддерживает автофикс;
  • файл исключён через .eslintignore или настройки конфигурации.

Практические рекомендации

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

Хранение настроек в репозитории обеспечивает одинаковое поведение редактора у всей команды.

Разделение ответственности между ESLint и Prettier уменьшает количество конфликтующих правил.

Проверка кода через Git-хуки гарантирует попадание в репозиторий уже исправленного кода.

Регулярное применение команды eslint --fix помогает быстро устранять накопившиеся стилистические нарушения и поддерживать кодовую базу в консистентном состоянии.

Оглавление