Замена ESLint і Prettier на Biome: шырока скорасць проты правілы Hooks, якая вам яшчэ патрэбна

У пабліках з маркетынгу адказванаеся пра продаж Rust-бінарнага файла, адзінай конфігурацыі і падвышэння эфектыў на 20–50 разоў. Пасля чаго была адбыта перапытка на чатырох маршрутах, а потым палячаныя дыагназы, якія Biome не мог урахавіць.

Адзін бінарны файл протыва набора плагінаў. Час выканання зменіўся. Аднак паверхностная адработка адной важныя правілы не паспела.

Перагляньце package.json.

Палячаныя залежнасці, якія стосуюцца лінтавання. Проекты, якія ўсё ж такі выдаюць eslint, prettier, eslint-config-prettier, eslint-plugin-react-hooks асобна плагін для парсавання, платяць „тыхы податак“ за кожны push. Biome праславляецца тым, што ён — адзін виконвальны файл для форматавання, лінтавання і сортавання імпортаў.

У тамтэйскай лабараторыяўцы быў дадан Biome палячы існуючай супэркету ESLint. Обеі практыкі былі працаваны за час. Пасля таго ESLint быў адключаны. Аднак у дыягностычнага інструмента, які залежаў ад Biome, не было падобнага інструмента, які б быў надзеяны. Практыка працавала належна, а клас баго, які раней блакав работу, з’явіўся на фіч-ранге.

Калі змienялася тэма, ранг перыходзіў на вебсокет — класычны прыклад залежнасці ад эфектаў. Biome застаўся мовчазным.

Тэкст, які насправды публікуе Biome

Офіцыйна, Biome форматуе код з адпаведнасцю прыбліжна 97% да стандарту Prettier і пераглядае код за дапамою вялікага набора правілаў, запоўненага ідэямі з ESLint і typescript-eslint. Наладкі знаходзяцца ў файле biome.json. Кожды раз яго можна запусціць за дапамою команды pnpm exec biome check --write.

У яркіх публікаціях часта не пішацца: можа ўсё ж таки не быць некалькіх менш вядомых плагінаў чы аднойчыных правілаў. Тады трэба альбо застацца з ESLint для такіх випадкаў, альбо перанесці логіку.

Шваль легкая да любіцца. Недастатак падтрымкі — гэта адплата.

Фактычна часовая дыя

У лабараторыі был выкарыстоўваны TypeScript, React і калькі серверных модуляў — адносна шыстдесят файлоў, якія не належаць да node_modules. Функцыя Instant Navigations не была актываўана, таму мераваліся толькі рэзультаты чэйкера.

pnpm exec eslint . --max-warnings=0
pnpm exec prettier --check .
pnpm exec biome check .

Па тры праходы кожны; медыяні:

• Толькі ESLint: 4,1 секунды
• Prettier з параметрам --check: 1,6 секунды
• Спачатку ESLint, потым Prettier: 5,7 секунды
• Biome з параметрам check: 0,22 секунды

Гэта далёка ад 50 разоў. Па супарэнню з последовным паром, на маленькай структуре розніця становіць адносна 26 разоў. У блогах часта паказваюць прыблізна 10 тысяч файлоў. У гэтым тесте была выкарыстоўвана сама аплікацыя, якая фактычна запускаецца. Тэндэнцыя састаёцься; але грандіозны кэфіцыент — няўсёлкі.

Прыглыбны выкасоўванне проты Prettier не паспеўшыся ў двух файлах — дужыя паказванні JSX пропа ўнутрь InvoiceRow. Форматаванне, якое выкарыстоўваў Biome, засталося. Цифра 97% ёсць правдзівая; засталыя 3% стаюць проблемай толькі калі команда спарчваецца над кожным файлам окрема.

Як пабачыць гэта на сваёй машыне

pnpm add -D --save-exact @biomejs/biome
pnpm exec biome init

З’яўляецца biome.json. Запускайте Biome аднойчы, пакуль ўсё еща існуе ESLint. Нічога не адключайце, пакуль не будзе пісьмовага спісу прычын, за якія ESLint фіксуе проблемы, але Biome іх не паказвае.

pnpm exec eslint . -f unix > /tmp/eslint.txt
pnpm exec biome check --reporter=json > /tmp/biome.json

Ручныя порэванні паказалі, што большая частка пунктав recommended перакрываецца. Большая проблемная разліка:

react-hooks/exhaustive-deps

Biome включае перакрыцця, стосаваныя до хуків. Яны не падтрымлівалі тыя ж самыя адзывы, якія раней былі налаштаваны ў зв’язку з эфектам socket. Пасля таго, як CI адміністраваў гэты правіл, проблема з перызначэнням тэмы засталася нерашанай.

ESLint паказаў проблему толькі для аднаго плагіна:

{
  "scripts": {
    "lint": "biome check . && eslint app --plugin react-hooks --rule 'react-hooks/exhaustive-deps:error'"
  }
}

Няўмела. Чыстая. Адкрытыя два інструмента — граматычны савечны компроміс, калі відсутняе правило мае назву. Зберагчы цэлы дрэво ESLint «на випадак» зазвычай ёсць марнотрацтвам.

Паўерыяваць працэс рэдагування трэба той жа вечар. Сервер мовы Biome заменіў пару дадатакоў. Раптам павесткі пра аберэжнасці з’яўляліся толькі ў CI — горша, локальна, якщо толькі дадатак ESLint не застаецца для таго правіла. Кращэ бачыць іх у /settings, чым адкрываць іх падчас ранней кампіляцыі.

Што на самай працоўнасці

Biome пераглядае дрэва як адзін натыўны процес. ESLint — цэе Node плюс плагіні, часта разам з Prettier. Пры шыстдесяці файлах завантажэнне плагінаў з’едае большую частку 4,1 секунды. Пры тыячах файлаў перагляд дрэва становіць прыводны элемент, і пачынаюць давацца показнікі на рэвэлюцыйным масштабе.

Biome 2 адаптаваеся да выканае перагляд коду з урахоўваннем типаў, але гэта не ўсі можлівасці типсцрайп-эслаінта. Якшчо система неперывной інтеграцыі яшчэ дазволяе настаўлення parserOptions.project, трэба пераканацца, што гэтае настаўленне працуе сама по сабе — гэта жорсткая мода ESLint. У порৱаненні з старымі настаўленнямі no-unsafe-* будуць сутычкі.

Выключэнне перагляду коду з урахоўваннем проекта прыводзіць да таго, што час выканання задачі зменшыцца з ~90 секунд да ~8 секунд, але казваць, што гэта заслуга Biome, ёсць падвыкладчастасцю, калі на самай працэ быў проста адключаны режым з урахоўваннем типаў. Сказайце гэта вогулымі словамі, калі такое адбудзецца.

Расчыткі, па пунктах

Час выканання пайплайну: з 5,7 секунд да 0,22 секунды. Монорепозіты больш за ўсе відчуваюць паўзыкі. У маленьких прыложэнняях главным чыннікам є прышвыдчэнне роботы на ноутбуку.

Правілы: зникла адна пераканацьба пра наявнасць залежнасцей; для таго шляху ESLint застаўся.

Суперчанні ў форматаванні: два обгорткі JSX; можна ўсё вярнуць у пачатковы стан.

Рэдагувальнік: два дадаткі з’едыналіся ў адны, а потым аднаму з іх прабачылі — працэс прыбліжна аднаковы, толькі перагляд коду через CLI вядзецца быстрэй.

Увага: запуск з алгоритмам Biome не ўзначае, што дрэво канфігурацыі ў стане “зелены”. У запитах на зміны неабходна пазначыць, калькольнік які файл паведаміў пра проблему.

Залейце яго ў режым работы, або зупініце ночны цикл

Репозытарыі типу Greenfield можаць адразу застосаваць Biome для форматавання та базовай перапрацоўкі коду, або ж зовсім не викорыстоўваць Prettier.

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

Залейцеся на ESLint, калі саме спецыяльныя правілы ёсць частью продукту — і запішыце гэтыя правілы. Фраза “Можа, нам патрэбны плагін” не ёсць інвентарызацыяй.

Ніколі не выключайце модуль exhaustive-deps толькі таму, што Biome працюе быстрэй. Змена тэмы пакажае, чаму гэта правіла ўзагалі існуе.

Умовы, якія варта чытальна адзначыць

0,22 секунды проты 5,7 секунд — гэта час обробкі шыстдесят файлоў на аднам ноутбуку; не 10 тысяч файлоў, і не 56 разоў швэйцарскі час.

Размах крэсаў залежыць ад настройкаў і версіі Biome таго вечара. Перзапустыце biome rage і пераканаўцеся ў тэрмінале з дыягнамікай крэсаў прычым, перш чым супакоіцца, што проблема стала постаяльной; ідэнтыфікаторы зменяюцца ў разных версіях.

Інвентары плагінаў разныя. Якшо адсутнае падключэнне через eslint-plugin-import являецца ўзначыткам, спробаваце функцыю organize-imports з Biome прыблізна на тыдзень.

Заўсёды выканайце оба інструмента. Спісаваце прычыны, якія застаюцца пасля таго, как Biome вычысціў код.

Саме гэты спіс ёсць часткаю работы па міграцыі. Тыя, хто перажыў, викорыстоўваюць скрыпт з двума інструментамі праблэм-дытэкцыі з чыста вялічынай адпаведальнасці.

Калі CI стала зелёной і падключэнне вярнулася

ESLint плюс Prettier былі заменены на Biome. Час перагляду шастудзяці файлоў: 0,22 секунды проты 5,7 секунд. Бранч быў з’еднаны. Змена тэмы павтарна падключыла websocket з данымі. Раней react-hooks/exhaustive-deps блакаваў такі патэрн; Biome не выдаваў адпаведны сигнал.

Няпрацоўны адказ. Застаўце сокет, пакуль “міграцыя не завершыцца”. Кліянты тады втрачаюць можлівасць бачыць актуальныя даны.

Лепшы адказ. Biome керуе форматам і базовымі правіламі, а ESLint застаецца толькі для аднаго плагіна ў app.

{
  "scripts": {
    "lint": "biome check . && eslint app --plugin react-hooks --rule 'react-hooks/exhaustive-deps:error'"
  }
}

Два падходы ўзятыя як правільныя, калі названа конкрэтная відсутняя правіла; два падходы ўзятыя як нерацыональныя, калі застаецца весь конфігурацыяны файл ESLint. Разлікі ў форматаванні: два пакеты JSX; застаўлена версія Biome.

Апранавайце тэсты на сваёй сістэме. Складзіце спіс правілаў толькі ESLint пасля таго, як Biome будзе чысты. Спачатку складзіце спіс, а потым ведзіце лістынг часу.

Каманды і рэзультаты лабораторных сесій

Версіі, якія былі до пачатку тэставання: Node 24, TypeScript 7, Next 16.3. Зберагуйце іх у записках лабораторнай сесіі, каб наступная сесія не была спробай здогадвацца.

node -v
pnpm exec tsc -v
pnpm exec next --version

Паставіце гэтыя тры рядкі ў верх часткі записки. Якщо якая-небудзь важлівая версія не паспаўляе з выкананым кераваннем, зупініцеся — наступныя каманды могу таямна падвести.

Наступны крок узора прыходжання:

pnpm exec next dev

Заўярніце /, /invoices, /invoices/1, /settings, а пасля зноў /invoices. Залейкайце DevTools так, каб лог быў захаваны. Запісайце інтэрфейс фільтраў і URL; гэтая пара будзе корыстная для супадзельных эксперыментаў.

Перакананне версій:

pnpm exec tsc --noEmit --pretty false
echo $?

Код выхаду 0 — гэта не готовы продукт. Ён толькі чыстае шлях да перакананняў пад час выконання.

Пасля таго зноў запрацавайце команды аднарозовага выявлення з роздзела “Як пабачыць гэта на вашай машыне”. Не прыхілівайцеся ад іх, таму што над гэтым паказваюцься цифры. Іншая машына, тэплата атмасферы чы іншыя актыўныя вікна Chrome могу зменіць выкарыстоўваную памяць, трываласць перакананняў і спыніць ўсё гэта больш, чым патч фреймворку.

Запісуйце аднорядковы запіс пра невялікія бракі: “Прыменіў X, але все рава пабачыў Y”. Версія, команда, выхідны результат і гэтыя рэчы стаюць корыстным матэрыялам для дахоўнага аналізу. Скріншоты з маркетынгу — ні.

Дзяўнік неудач

Адыяванне ESLint таму ж, калі прыбыў Biome, зноў вызвала проблему з сокетамі. Вярнэнне адного плагіна воскресіла стопень пакрыцча.

Прабавы перадаць падобнае да project-aware типсцріпт-эслінт адзяйнаўство ў Biome 2 прынялі частковае перакрыцча. Старэйшы кластер no-unsafe-* не падходзіў. Адмова ад гэтага прывела да перыяву проблем.

Дзяўны канфлікт у форматаванні пропаў JSX завершыўся праз прийняцце Biome.

У рэдагары, LSP з Biome вытрыміў расширэнні Prettier і ESLint. Адзінкі прыгаўкі стала прадставляцца толькі ў CI, таму расширэнне ESLint засталося для гэтага правіла. Два расширэнні все ўсё перамагаюц пяць.

Спіс пераконтрацыі пры адсыланні ESLint

• [ ] biome check завершыўся без проблем
• [ ] Правілы, якія вырачвае толькі ESLint, занесены
• [ ] Плагіны з іменамі застаюцца або свядома адмовляюцца ад іх
• [ ] exhaustive-deps мае надзеяны аналог, іначы ESLint застаецца для гэтага

[ ] Фармат-дэлты пераглядаюцца спакойна, а не вяртаюцца праз паніку

[ ] Оба стоп-гадзіннікі былі взяты на адным дрэве

0,22 секунды проты 5,7 секунд — це шасцьдесят файлаў. Зноў звярніце меры локальна. Па-новаму пераканайцеся ў дыягназе хукіў у інсталаванам Biome, перш чым называць гэты разлік вечным.

Запіс з прылады для выставлення рахункоў

CI зафіксаваў секунды зазвичайнага гадзінника. Пад час дэманстрацыі змена тэмы павернула перыяднае зап’язанне websocket, таму што пакрыцце хукіў зникла. Секунды — гэта не тое, што трэба выдаць; важліва жывая сума.

Валодзець спакойнейшым лінтам, які фіксуе перыяднае зап’язанне, краща, чым швыракім пераглядам, які іх працягвае не зазначыць. Спалучэнне 0,22-секундовага Biome з адным плагінам ESLint таксама ўважаецца розумным варыянтом. Новыя репазітарыі можаць пачаць працаваць толькі з Biome і дадаць ESLint, калі будзе названы адні з правілаў. Старэйшыя репазітарыі не выгадаюць нічога ад такой «чыстасцы».

Каманды

pnpm exec eslint . --max-warnings=0
pnpm exec prettier --check .
pnpm exec biome check .

Запускайце кожны прыем трычы; вылучайце медыяну. Запісвайце рэзультаты ESLint, Prettier і Biome. Вывядзіце выход дадзеных ESLint у формате Unix і створыце карточку з нарадкамі, якія Biome не паказаў. Падаце гэтую карточку ў прыемны запрос; расследаванні часу трэба выкладзаць як прымечанне.

Значным разлікам являецца правіло, у якога няма адпаведнага «братоўскага» правілы.

Заданне для чытальніка на рэальным проекте

Выберыце репазітарый, які выкорыстоўваецца ў рэальных умовах, а не тэставы простор. Запісвайце час выканання команд eslint ., prettier --check . і biome check . — по тры запускі кожнай. Утворыце табліцу, у якой паказаны медыяны разліку часу паўстаючы ўжо з урахованнем колькасці файлаў.

Рукамі створыце разлік правілаў пры некалькіх запусках; автаматызаваныя перэйменаванні часта вводзяць у глухы кут. Спісавайце всі нарадкі ESLint, якія застаюцца пасля таго, калі Biome не выявіў нічога. Пусты спіс означае, што ESLint магчыма застацца. Спіс, які содержыць react-hooks/exhaustive-deps або іншы критычны для продукту спецыяльны плагін, — такі фрагмент трэба застаць.

Ачынайце галузь з хукам, у якога відсутня залежнасць, праця якой вядома як справжня. Пазірце, який інструмент выдае паведамлення пра проблему. Самэй гэтая галузь тое, што параболіка не ўсё проста.

Зберажыце табліцу і спіс правілаў. Утримайцеся ад запросу пра з’еднанне, у яком толькі выкалываюцца пакеты, калі ўжо перейшлі на Biome. Выкалыванне — это заключны крок, а не першы.