Привет, Хабр! Меня зовут Никита Ли, я frontend-разработчик в группе Рунити. Так тяжело бывает удержаться от того, чтобы не усложнить себе жизнь, не так ли? Все любят смотреть на чистый и понятный код, но не все его таким пишут. Сделать его таким помогают наши друзья — форматировщики и линтеры. О них и пойдет речь в этой статье, а конкретно о ESLint Stylistic.
Любой автор хочет, чтобы его кто-то читал, даже на JavaScript, но читателю хочется просматривать грамотный и красивый текст. ESLint анализирует код, выявляя ошибки, чтобы программы выходили из-под клавиатуры чистыми и без ошибок. Prettier, в свою очередь, как инструмент форматирования делает текст исходного кода программ единообразным. Оба этих инструмента являются практически стандартом, когда речь заходит о качестве кода. Думаю, что многие сталкивались в проектах с их одновременным применением, что в целом логично — форматирование != линтинг. Однако это решение не всегда обосновано, а зачастую излишне. В качестве альтернативы я предлагаю рассмотреть ESLint Stylistic. В этой статье разберемся, что это, откуда появился инструмент и почему с ним стоит познакомиться.
О чем внутри:
Что такое 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 с плоским конфигом:
Установите Stylistic с вашим пакетным менеджером
npm install ‑D @stylistic/eslint‑pluginОбновите конфигурацию ESLint
Удалите плагины, связанные с Prettier (eslint-config-prettier, eslint-plugin-prettier), и добавьте Stylistic.Настройте правила
При выборе стилистических правил можно перенести их прямо из prettier конфига благодаря configuration factory. Или мигрируйте настройки Prettier (например, singleQuote: true, semi: true) в эквивалентные правила Stylistic. В документации есть удобная таблица для поиска правил, которые подойдут вашему проекту.Проверьте проект
Запустите eslint --fix . и проверьте, что код форматируется корректно. Исправьте конфликты вручную, если они возникнут.Обновите процессы
Удалите 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, которые я не упомянул, в комментариях!
