Привет, Хабр! Меня зовут Никита Ли, я frontend-разработчик в группе Рунити. Так тяжело бывает удержаться от того, чтобы не усложнить себе жизнь, не так ли? Все любят смотреть на чистый и понятный код, но не все его таким пишут. Сделать его таким помогают наши друзья — форматировщики и линтеры. О них и пойдет речь в этой статье, а конкретно о ESLint Stylistic.

Любой автор хочет, чтобы его кто-то читал, даже на JavaScript, но читателю хочется просматривать грамотный и красивый текст. ESLint анализирует код, выявляя ошибки, чтобы программы выходили из-под клавиатуры чистыми и без ошибок. Prettier, в свою очередь, как инструмент форматирования делает текст исходного кода программ единообразным. Оба этих инструмента являются практически стандартом, когда речь заходит о качестве кода. Думаю, что многие сталкивались в проектах с их одновременным применением, что в целом логично — форматирование != линтинг. Однако это решение не всегда обосновано, а зачастую излишне. В качестве альтернативы я предлагаю рассмотреть ESLint Stylistic. В этой статье разберемся, что это, откуда появился инструмент и почему с ним стоит познакомиться.

О чем внутри:

• Что такое ESLint Stylistic

• Немного истории о развитии плагина

• Зачем нужен ESLint Stylistic

• Пример конфига для форматирования eslint.config.js

• Как мигрировать с Prettier на Stylistic

• Итог: стоит ли переходить на Stylistic?

• Бонус: плагины ESLint, достойные внимания

Что такое ESLint Stylistic

ESLint Stylistic (официально @stylistic/eslint-plugin) — это плагин для ESLint, который фокусируется на стилистических правилах, таких как отступы, кавычки, точки с запятой и пробелы. Он позволяет форматировать код в рамках экосистемы ESLint, устраняя необходимость в отдельном форматировщике. Stylistic поддерживает JavaScript, TypeScript, JSX и другие технологии, интегрируясь с существующими плагинами ESLint.

Немного истории о развитии плагина

Изначально ESLint был универсальным инструментом, который включал как правила для поиска ошибок (например, no-undef), так и стилистические правила (например, indent или quotes). Однако в мае 2020 года команда ESLint меняет политику своих правил, в результате которых замораживает стилистические требования. Среди причин, по которым поддержка требований оформления была приостановлена, можно назвать высокую стоимость разработки и поддержки таких правил, тогда как команды хотели взять фокус именно на линтинг и сосредоточиться на правилах для выявления ошибок.

Проект ESLint Stylistic был инициирован сообществом при поддержке OpenJS Foundation и команды ESLint. Его цель — взять на себя поддержку стилистических правил, которые были удалены из ядра ESLint и @typescript-eslint. В 2023 году Stylistic вышел в релиз версии v1.0.0, что ознаменовало его готовность к использованию в продакшене. Сразу после релиза Stylistic основной пакет ESLint обновился до версии v8.53.0, помечая основные правила для форматирования из ядра ESLint как deprecated с рекомендацией миграции на @stylistic/eslint-plugin. В 2024 году произошло очередное крупное обновление ESLlint до v9.0.0, в котором поменялся способ задания конфигурации линтера — flat config (eslint.config.js) вместо deprecated .eslintrc.

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

Зачем нужен ESLint Stylistic

Stylistic решает несколько ключевых задач:

• Объединение линтинга и форматирования

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

• Гибкость настроек

В отличие от Prettier, который навязывает правила с минимальными опциями, Stylistic использует мощь ESLint для детальной настройки. Вы можете задавать разные стили для JavaScript, TypeScript или JSX, а также отключать правила для определенных файлов. Stylistic также работает с плагинами для React/Vue и других технологий, обеспечивая единообразное форматирование в сложных проектах.

• Устранение конфликтов

Совместное использование ESLint и Prettier может приводить к конфликтам и использованию лишних пакетов с целью их «помирить» (привет eslint-config-prettier). Stylistic устраняет эти проблемы, так как все правила находятся в одном инструменте.

• Производительность

Запуск одного инструмента вместо двух снижает накладные расходы как при разработке, так и в пайплайнах CI/CD.

• Облегчение миграции на новые версии ESLint

С выходом ESLint 9 и переходом на плоскую конфигурацию (eslint.config.js) многие разработчики столкнулись с проблемами при адаптации стилистических правил. Stylistic поддерживает как устаревшую (.eslintrc), так и новую конфигурацию, упрощая миграцию.

Пример конфига для форматирования eslint.config.js

Наш проект на Vue с использованием TypeScript и микрофронтенд архитектуры в монорепозитории. Stylistic отлично вписался в наш конфиг, что позволило отказаться от Prettier, убрать лишние запуски форматировщика и более гибко настроить правила форматирования в проекте.

Пример простейшей настройки плоского конфига eslint для использования Stylistic приведу ниже:

// eslint.config.js
import stylistic from '@stylistic/eslint-plugin';

export default [
  {
    plugins: {
      '@stylistic': stylistic,
    },
    rules: {
      '@stylistic/indent': ['error', 4],
      '@stylistic/semi': ['error', 'always'],
      '@stylistic/no-trailing-spaces' : ['error'],
      '@stylistic/eol-last' : 'error',
      '@stylistic/max-len' : [2, 150, {
          ignoreUrls : true,
          ignoreTrailingComments : true,
          ignoreRegExpLiterals : true,
        },
      ],
    },
  },
];

Этот пример задает отступы в 4 пробела, обязательные точки с запятой, запрещает оставлять пробел в конце строки и обязывает оставлять свободной последнюю строку в файле, а также предлагает правила для максимальной длины строки. Запуск eslint --fix . автоматически отформатирует код и исправит ошибки. Пример:

// До
function greet(name){
console.log("Hello, "+name)
}

// После (eslint --fix)
function greet(name) {
    console.log('Hello, ' + name);
}

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

Как мигрировать с Prettier на Stylistic

Переход с Prettier на Stylistic не так сложен, как может показаться. Здесь описан процесс миграции со старого ядра ESLint на Stylistic, если необходимо также обновить сам ESLint. Приведу пошаговый план для перехода с Prettier на Stylistic с актуальной версией ESLint с плоским конфигом:

1. Установите Stylistic с вашим пакетным менеджером
   npm install ‑D @stylistic/eslint‑plugin

2. Обновите конфигурацию ESLint
   Удалите плагины, связанные с Prettier (eslint-config-prettier, eslint-plugin-prettier), и добавьте Stylistic.

3. Настройте правила
   При выборе стилистических правил можно перенести их прямо из prettier конфига благодаря configuration factory. Или мигрируйте настройки Prettier (например, singleQuote: true, semi: true) в эквивалентные правила Stylistic. В документации есть удобная таблица для поиска правил, которые подойдут вашему проекту.

4. Проверьте проект
   Запустите eslint --fix . и проверьте, что код форматируется корректно. Исправьте конфликты вручную, если они возникнут.

5. Обновите процессы
   Удалите Prettier из скриптов package.json, CI/CD и интеграций с редактором. Готово! Ваш проект теперь использует Stylistic.

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

import stylistic from '@stylistic/eslint-plugin;

export default [
  {
    plugins: {
      '@stylistic': stylistic
    },
    rules: {
      // Если уже пользовались правилами ESLint для форматирования
      // Просто добавьте @stylistic/ префикс
      // Аналогично для @typescript-eslint/
      // И eslint-plugin-react
      // Например 'semi' -> '@stylistic/semi'
      '@stylistic/semi': 'error',
    },
  },
];

Итог: стоит ли переходить на Stylistic?

Чтобы определиться с выбором, предлагаю взглянуть на следующую таблицу:

ESLint Stylistic — это не просто плагин, а новый подход к форматированию кода в JavaScript и TypeScript проектах. Он появился как ответ на запрос сообщества в сохранении стиля кода, потребности в гибкости настройки форматирования, а также для облегчения поддержки ядра ESLint. Stylistic решает проблемы конликтов, дублирования инструментов и ограниченных настроек, предлагая единый, мощный и настраиваемый процесс.

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

Бонус: плагины ESLint, достойные внимания

Вместе с проверками на форматирование и стиль кода многие используют плагины с наборами правил для конкретных инструментов, такие как eslint-plugin-react или eslint-plugin-vue, о которых слышали почти все, но поделюсь еще подборкой интересных расширений, которые могут облегчить вам жизнь:

Хорошие практики:

• eslint-plugin-sonarjs — обеспечит консистентность и соблюдение правил «чистого кода». Например, подсвечивает оставленные TODO комментарии или может рекомендовать декомпозировать слишком большую функцию;

• eslint-plugin-unicorn — большое количество рекомендаций для соблюдения хороших практик в коде. Например, правила, запрещающие сокращения в именах переменных для ясности, или правила для упрощения регулярных выражений;

• eslint-plugin-no-secrets — сохранит ваши секреты в тайне.

Поможет улучшить тесты:

• eslint-plugin-jest — не даст писать бесполезные тесты с Jest;

• eslint-plugin-vitest — улучшает тестирование с Vitest;

• eslint-plugin-testing-library — следит за соблюдением лучших практик в тестах с Testing Library.

Добавит поддержку других форматов:

• eslint-plugin-jsonc / @eslint/json — поддержка линтинга и форматирования json;

• eslint-plugin-yml — поддержка линтинга и форматирования yml;

• eslint-plugin-graphql — поддержка линтинга и форматирования GraphQL;

• @eslint/markdown — линтинг js внутри md;

• eslint-plugin-markdownlint — интеграция линтера md markdownlint в ESLint.

Поможет с построением чистой архитектуры:

• eslint-plugin-boundaries — анализирует зависимости и структуру, помогая в поддержке чистоты архитектуры;

• eslint-plugin-import — помогает следить за импортами в файлах;

• @nx/eslint-plugin — набор правил полезный для монорепозиториев с nx.

Эти плагины дополняют ESLint Stylistic, помогая не только форматировать код, но и улучшать его качество. А чем вы пользуетесь для обеспечения красоты кода в своих проектах? Делитесь опытом или полезными плагинами/правилами ESLint, которые я не упомянул, в комментариях!