Як інтегрувати Prettier з ESLint та stylelint

або Як більше ніколи не турбуватися про стиль коду

ESLint і stylelint - справді дивовижні інструменти, які дозволяють застосовувати шаблони кодування серед ваших команд. Це має багато переваг, таких як виведення кращого та більш послідовного коду, позбавлення від марних відмінностей у комітах (новий рядок, відступ та ін.) Серед багатьох інших.

Але з часом це може виявитися трохи клопотом серед розробників команди, котрі вважають додатковим розумовим навантаженням додавати крапку з комою, нові рядки, відступи тощо, щоб відповідати правилам розміщення. Тут з’являється такий інструмент форматування коду, як Prettier.

Prettier можна налаштувати на автоматичне форматування коду відповідно до певних правил. Якщо ви використовуєте VSCode, ви можете навіть форматувати код, коли натискаєте кнопку "Зберегти" (я впевнений, що існують способи встановити це в інших редакторах, але я не вивчав його)

Однак ви не хочете створювати новий конфігураційний файл Prettier, оскільки у вас уже є всі правила, пов'язані з форматуванням, зазначені у вашому ESLint і stylelintконфігураційні файли. Отже, для цього нам знадобиться якась магія. ✨

Давайте зараз заглибимося в крок за кроком, як це все налаштувати, а також як відформатувати весь існуючий код відповідно до правил lint. У цьому посібнику передбачається, що у вашому проекті вже встановлено ESLint і stylelint з їх файлами .eslintrcта .stylelintrcфайлами.

ЧАСТИНА 1: Форматування існуючої кодової бази

Крок 1

Встановіть prettier-eslint, який є інструментом для форматування вашого JavaScript за допомогою Prettier з подальшим eslint --fix. Це --fixфункція ESLint, яка намагається автоматично вирішити деякі проблеми.

npm install --save-dev prettier-eslint

Цей інструмент визначає еквівалентні параметри налаштування Prettier із вашого існуючого файлу .eslintrc . Тому вам не потрібно створювати новий файл .prettierrc у більшості випадків.

Крок 2

Встановіть prettier-eslint-cli. Це інструмент CLI, який допоможе вам одночасно запускати всі файли через Prettier-Eslint.

npm install --save-dev prettier-eslint-cli

Крок 3

Встановіть prettier-stylelint, який є інструментом, який форматує ваш CSS / SCSS за допомогою Prettier, після чого stylelint —-fix. Як і ESLint, --fixце функція стилю, яка намагається автоматично вирішити деякі проблеми.

npm install prettier-stylelint --save-dev

Цей інструмент також намагається створити конфігурацію Prettier на основі конфігурації stylelint.

Зверніть увагу, що на відміну від prettier-eslint, вам не потрібно встановлювати інший пакет для його CLI, оскільки це вже включено в нього.

Крок 4

Напишіть сценарії всередині вашого package.jsonнацілювання на наявні файли у вашій кодовій базі, які ви хочете пропустити через prettier-eslint і prettier-stylelint.

"scripts": {
 "fix-code": "prettier-eslint --write 'src/**/*.{js,jsx}' ",
 "fix-styles": "prettier-stylelint --write 'src/**/*.{css,scss}' "
}

Як бачите, я націлююсь на всі мої існуючі JS та JSX та всі мої існуючі CSS та SCSS, відповідно.

--writeПрапор записує зміни в місці файлу в даний час відформатований. Отже, будьте обережні та переконайтесь, що всі ваші існуючі файли перебувають під контролем джерела та не містять незмінених змін .

Крок 5

Запустіть скрипти!

npm run fix-codenpm run fix-styles

Тепер ви можете зареєструвати всі ці нові зміни як один великий коміт (можливо, навіть від тимчасового користувача git, якщо ви не хочете забруднювати власну історію git.)

Частина 2: Налаштування VSCode

Тепер, коли ваша існуюча база кодів відформатована, настав час переконатись, що весь код, який пишеться відтепер, буде відформатований автоматично.

Крок 1

Встановіть розширення Prettier, ESLint і stylelint для VSCode:

Гарніший - Форматор коду - Visual Studio Marketplace

Розширення для Visual Studio кодексу - VS код плагін для покращала / покращала marketplace.visualstudio.com ESLint - Visual Studio Marketplace

Розширення для коду Visual Studio - інтегрує ESLint JavaScript у код VS. marketplace.visualstudio.com stylelint - Visual Studio Marketplace

Розширення для коду Visual Studio - Сучасний CSS / SCSS / Менше linter marketplace.visualstudio.com

Крок 2

Налаштуйте кілька налаштувань VSCode:

"prettier.eslintIntegration": true - каже Prettier використовувати Prettier-Eslint замість Prettier

"prettier.stylelintIntegration": true - говорить Prettier використовувати замість Prettier красивіший стиль

"eslint.autoFixOnSave": false- нам не потрібен ESLint для прямого виправлення нашого коду, оскільки Prettier-Eslint все одно буде працювати eslint --fixдля нас.

"editor.formatOnSave": true - запускає Prettier із зазначеними вище параметрами при кожному збереженні файлу, тому вам ніколи не доведеться вручну викликати команду форматування VSCode.

Крім того, ви можете зареєструватися у вищевказаних налаштуваннях робочого місця, щоб керувати джерелами, щоб інші члени команди могли простіше налаштувати своїх редакторів. Це можна зробити, створивши .vscodeпапку в кореневій частині проекту та помістивши у settings.jsonфайл усі зазначені вище правила .

За бажання ви можете сказати Prettier ігнорувати форматування певних шаблонів файлів. Для цього просто додайте .prettierignoreфайл до кореня вашого проекту із зазначенням шляхів, які потрібно ігнорувати. Наприклад:

strings.jsonscripts/*

І це все! Ніколи більше не турбуватися про стиль коду?

Ця стаття аж ніяк не призначена як вичерпний путівник, а скоріше як вступ до того, що можливо за допомогою дивовижних інструментів, згаданих тут. Я рекомендую відкривати офіційні сторінки GitHub для кожної, щоб дізнатися більше про те, як ефективніше використовувати ці інструменти для вашого конкретного робочого процесу.

Будь ласка, напишіть коментар нижче для будь-якої допомоги, пропозиції тощо.

Список літератури

//prettier.io/docs/en/

//stylelint.io/user-guide/

//eslint.org/

//github.com/prettier/prettier-vscode

//github.com/prettier/prettier-eslint

//github.com/prettier/prettier-eslint-cli

//github.com/hugomrdias/prettier-stylelint

//www.youtube.com/watch?v=YIvjKId9m2c