Code quality tools – <it/>Praktik

11.09.2025

Prettier – це інструмент для форматування коду, який автоматично налаштовує форматування вашого коду відповідно до встановлених правил. Він працює як лінтер, але зосереджений саме на форматуванні коду, а не на виявленні помилок.

Основні особливості Prettier:

Автоматичне форматування: Prettier переписує ваш код, дотримуючись встановлених стандартів форматування.
Конфігурація: Ви можете налаштувати Prettier, встановивши різні правила форматування, такі як відступи, вирівнювання, лапки тощо.
Підтримка багатьох мов: Він підтримує різні мови, такі як JavaScript, TypeScript, CSS, HTML.
Інтеграція з редакторами: Prettier доступний як плагін або розширення для більшості популярних редакторів коду, таких як Visual Studio Code, Sublime Text, Atom, і т. д.
Командний рядок: Ви також можете використовувати Prettier через командний рядок, щоб форматувати файли або проекти.

Використання Prettier спрощує життя розробників, забезпечуючи єдиний стиль коду в проекті та полегшуючи його читання та редагування для всього команди.

Інсталяція

Для того щоб встановити Prettier локально виконайте команду у вашому проекті:

npm install --save-dev --save-exact prettier

Конфігурація

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

Конфіг файл підримує багато форматів. Наприклад:

Файл .prettierrc, написаний у JSON або YAML.
Файл .prettierrc.json, .prettierrc.yml, .prettierrc.yaml або .prettierrc.json5.
Файл .prettierrc.js або prettier.config.js, який експортує об’єкт за допомогою export default або module.exports (залежить від значення типу у вашому package.json).
Файл .prettierrc.mjs або prettier.config.mjs, який експортує об’єкт за допомогою export default.
Файл .prettierrc.cjs або prettier.config.cjs, який експортує об’єкт за допомогою module.exports.
Файл .prettierrc.toml

Ми будемо використовувати перший варіант тому давайте створимо файл конфігурації за допомогою команди (або можете створити його вручну):

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

Слід зазначити що ми можемо створити .prettierignore файл і зазначити в ньому ті файли та папки які не треба форматувати. Ось приклад синтаксису для цього файлу:

# Ignore artifacts:
build
coverage

# Dependencies
node_modules/

# Rest
test.js

Тепер перейдемо до правил форматування які ми вкажемо в .prettierrc. Розглянемо деякі з них на прикладі невеликого конфігу

{
  "singleQuote": true,
  "semi": true,
  "bracketSpacing": true,
  "useTabs": true,
  "printWidth": 120
}

singleQuote – всі лапки в коді мають бути одинарними

semi – рядок має закінчуватись крапкою з комою
bracketSpacing – повинні бути пробіли між фігурними дужками в літералах об’єктів
useTabs – робіть відступ у рядках табуляцією замість пробілів.
printWidth – максимальна довжина рядка яка не буде розбита на декілька рядків

Ось приклад коду до та після застосування цього конфігу:

Повний список правил можна подивитись тут

Запуск з CLI

Щоб код відформатувався можна виконати команду в терміналі

npx prettier . --write

Повний список опцій для командного рядка можна подивитись тут

Інтеграція з IDE

WebStorm має вбудовану підтримку Prettier. Якщо ви використовуєте іншу IDE JetBrains, як-от IntelliJ IDEA, PhpStorm або PyCharm, переконайтеся, що цей плагін встановлено та ввімкнено в налаштуваннях / налаштуваннях | Плагіни.

Спочатку вам потрібно встановити та налаштувати Prettier. Коли це буде зроблено, ви зможете зробити кілька речей у своїй IDE. Щоб відформатувати вибраний код, файл або цілий каталог, можна скористатися функцією «Переформатувати з prettier» (Opt+Shift+Cmd+P у macOS або Alt+Shift+Ctrl+P у Windows і Linux).

Ви також можете налаштувати WebStorm на запуск Prettier під час збереження (Cmd+S/Ctrl+S) або використовувати його як засіб форматування за замовчуванням (Opt+Cmd+L/Ctrl+Alt+L). Для цього відкрийте Налаштування / Налаштування | Мови та фреймворки | JavaScript | Prettier і встановіть відповідний прапорець: «Після збереження» та/або «Переформатувати код».

За замовчуванням WebStorm застосує форматування до всіх файлів .js, .ts, .jsx і .tsx, які ви редагували у своєму проекті. Щоб застосувати форматування до інших типів файлів або обмежити форматування файлами, розташованими лише в певних каталогах, ви можете налаштувати конфігурацію за замовчуванням за допомогою глобальних шаблонів. Щоб отримати додаткові відомості, перегляньте онлайн-довідку WebStorm.

Visual Studio Code

prettier-vscode можна встановити як плагін який пожна знайти за назвою “Prettier – Code formatter.”

Детальна інформація щодо налаштування є на сторінці плагіну – https://github.com/prettier/prettier-vscode

ESLint

ESLint – це інструмент статичного аналізу коду для JavaScript, який допомагає виявляти потенційні проблеми в коді та рекомендує стандартизовані підходи до написання JavaScript.

Основні особливості ESLint:

Виявлення помилок та підказки: ESLint аналізує ваш код на предмет синтаксичних помилок, потенційних помилок, а також стилістичних або конфігураційних проблем.
Конфігурація під вимоги проекту: Ви можете налаштувати правила ESLint для відповідності специфічним стандартам вашого проекту чи команди.
Розширюваність: ESLint має широкий набір налаштувань та розширень, які дозволяють додавати власні правила, налаштовувати конфігурації та розширювати функціональність.
Інтеграція з редакторами коду: Підтримка більшості редакторів коду дозволяє використовувати ESLint безпосередньо в процесі написання коду.
Популярні стандарти: ESLint допомагає застосовувати відомі стандарти написання коду, такі як Airbnb, Standard, Google та інші.

ESLint є потужним інструментом для покращення якості вашого JavaScript-коду, допомагає виявляти й усувати помилки та забезпечує дотримання консистентного стилю коду у всьому проекті.

Інсталяція

Для того щоб встановити ESLint локально виконайте команду у вашому проекті:

npm init @eslint/config@latest

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

Конфігурація

Після того як ви виконали установку по іструкції що була надана вище у вас з’явиться конфіг файл з такою назвою eslint.config.js або .eslintrc.js. Він буде мати різний контент в залежності від того які опції ви вибирали при встановленні ESLint. Ось приклад такого файлу.

import js from "@eslint/js";

export default [
    js.configs.recommended,

    {
        rules: {
            "no-unused-vars": "warn",
            "no-undef": "warn"
        }
    }
];

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

Про всі опції для конфігурації можна почитати тут.

Про всі доступні правила можна почитати тут.

Суворість правил

Щоб змінити серйозність правила, установіть ідентифікатор правила рівним одному з цих значень: "off" або 0 – вимкнути правило "warn" або 1 – увімкнути правило як попередження (не впливає на код виходу) "error" або 2 – увімкнути правило як помилку (код виходу 1 при спрацьовуванні).

Правила зазвичай мають значення "error", щоб забезпечити відповідність правилу під час безперервного тестування інтеграції, перевірок перед фіксацією та об’єднання запитів на отримання, оскільки це спричиняє вихід ESLint із ненульовим кодом виходу.

Якщо ви не бажаєте забезпечити відповідність правилу, але все одно бажаєте, щоб ESLint повідомляв про порушення правила, встановіть рівень серйозності на "warn". Це зазвичай використовується, коли вводиться нове правило, яке в кінцевому підсумку буде встановлено як "error", коли правило позначає щось інше, ніж потенційна помилка під час збірки чи виконання (наприклад, невикористана змінна), або коли правило не може з упевненістю визначити, що виявлено проблему (коли правило може мати помилкові спрацьовування та потребує перегляду вручну).

Приклад варіантів суворості правил:

"off" або 0 – вимкнути правило
"warn" або 1 – увімкнути правило як попередження (не впливає на код виходу)
"error" або 2 – увімкнути правило як помилку (код виходу буде 1)

Наприклад:

{
  "rules": {
    "semi": "error", // або 2
    "no-console": "warn", // або 1
    "no-unused-vars": "off" // або 0
  }
}

Або більш просунутий приклад

{
  "rules": {
    "indent": [
      "error",
      2,
      { "SwitchCase": 1 }
    ],
    "quotes": [
      "warn",
      "double",
      { "avoidEscape": true, "allowTemplateLiterals": true }
    ],
    "arrow-parens": [
      "error",
      "always"
    ]
  }
}

У цьому прикладі:

"indent" має числове значення 2 для визначення кількості пробілів відступу. Додатковий об’єкт { "SwitchCase": 1 } вказує, що оператор switch має бути відступлено на один рівень від case.
"quotes" встановлено як "warn" з використанням подвійних лапок ("double"). Додатковий об’єкт містить налаштування: "avoidEscape": true вказує уникати екранування рядкових лапок або одиночних лапок, а "allowTemplateLiterals": true дозволяє використовувати шаблонні рядки.
"arrow-parens" встановлено як "error" з обов’язковими дужками для стрілкових функцій ("always").

Плагіни

ESLint підтримує використання сторонніх плагінів. Перш ніж використовувати плагін, ви повинні встановити його за допомогою npm. Щоб налаштувати плагіни у файлі конфігурації, використовуйте ключ plugins, який містить список імен плагінів. Префікс eslint-plugin- можна опустити в назві плагіна.

{
    "plugins": [
        "plugin1",
        "eslint-plugin-plugin2"
    ]
}

Слід зазначити що ми можемо створити .eslintignore файл і зазначити в ньому ті файли та папки які не треба відслідковувати. Ось приклад синтаксису для цього файлу:

# Ignore artifacts:
build
coverage

# Dependencies
node_modules/

# Rest
test.js

Ось приклад того як ESLint допомагає знайти помилки у вашому коді:

Запуск з CLI

ESLint може виправляти деякі помилки самостійно. Для цього треба виконати команду в терміналі

npx eslint --fix .

Повний список опцій для командного рядка можна подивитись тут

Інтеграція з IDE

WebStorm має вбудовану підтримку ESLint.

Після того як ви встановили ESLint та налаштували конфіг треба перейти в налаштування та увімкнути автоматичну перевірку.

Visual Studio Code

prettier-vscode можна встановити як плагін який можна знайти за назвою “Prettier – Code formatter.”

Детальна інформація щодо налаштування є на сторінці плагіну – https://github.com/prettier/prettier-vscode

Порівнняння Prettier & ESLint

Prettier та ESLint — це два різні інструменти для роботи з кодом у JavaScript, які мають різні функції та мети, але часто використовуються разом для поліпшення якості та читабельності коду.

Prettier:

Автоформатування: Prettier призначений для автоматичного форматування коду, забезпечуючи однорідність у стилі та оформленні.
Підтримує різні мови програмування: Крім JavaScript, Prettier підтримує інші мови програмування, такі як HTML, CSS, JSON, YAML і т.д.
Для форматування всього файлу: Prettier форматує весь файл коду відповідно до своїх стандартів, без можливості вибору окремих правил для окремих частин коду.

ESLint:

Статичний аналіз та правила: ESLint забезпечує статичний аналіз коду, перевірку синтаксичних помилок та виявлення стилістичних проблем. Він дає можливість налаштовувати правила стилю коду за допомогою конфігураційних файлів.
Розширення та налаштування: ESLint дозволяє використовувати різні правила для різних типів проектів та налаштовувати їх за власними потребами.
Кастомізація: ESLint дозволяє використовувати різні плагіни та розширення для розширення можливостей аналізу коду.

Що до використання разом:

Prettier відповідає за форматування коду для забезпечення однорідності та читабельності.
ESLint використовується для статичного аналізу та виявлення проблем згідно з вибраними правилами стилю коду.

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

Слід пам’ятати що ESLint має велику кількість правил і деякі з них можуть конфліктувати з правилами Prettier, тому слід уважно ставитись до конфігурації коли ви застосовуєте їх разом.

Pre-commit hooks. Husky

Pre-commit hooks — це механізм, що дозволяє автоматизувати виконання певних операцій або скриптів перед збереженням (commit) змін у системі контролю версій, такі як Git. Вони дозволяють запускати автоматизовані дії перед виконанням коміту, щоб переконатися, що код відповідає певним критеріям або стандартам.

Інструменти для налаштування хуків:

Husky: Це популярний пакет для Node.js, який дозволяє легко налаштовувати хуки перед комітом, використовуючи конфігураційний файл package.json.
git-hooks: Це вбудована можливість Git, що дозволяє створювати та використовувати власні сценарії на мові сценаріїв Unix.

Запуск лінтерів перед комітом:

Форматування коду: Використання хуків дозволяє автоматично виконувати процес форматування за допомогою інструментів, таких як Prettier або ESLint, перед збереженням змін у репозиторій.
Виконання тестів: Можливо також налаштовувати хуки для запуску тестів перед комітом, щоб перевірити, чи новий код не порушує роботу попередньо написаних функцій або модулів.
Перевірка стилю коду: Запуск лінтерів перед комітом допомагає перевіряти відповідність коду до правил стилю та уникнення синтаксичних помилок.

Використання pre-commit hooks спрощує робочий процес команди, роблячи його більш консистентним та забезпечуючи високу якість коду в репозиторії.

Husky

Для того щоб налаштувати хуки за допомогою Husky нам треба його спочатку встановити як залежність.

npx husky init

І виконати кілька додаткових кроків. А саме додати спеціальний скрипт до package.json

npm pkg set scripts.prepare="husky"

та виконати його.

npm run prepare

ПІсля цього нам треба створити папку для husky в якій будуть зберігатися хуки і визначити які саме хуки треба виконувати. В цьому прикладі ми будемо запускати скрипт з package.json який запускає eslint .

Це package.json

{
  "devDependencies": {
    "eslint": "^8.54.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-plugin-import": "^2.29.0",
    "husky": "^8.0.3",
    "prettier": "3.0.3"
  },
  "scripts": {
    "prepare": "husky install",
    "lint": "npx eslint --fix ."
  }
}

Запускаємо цю команду в терміналі

npx husky add .husky/pre-commit "npm run lint"

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

Підсумки

Prettier

Prettier — це інструмент для автоматичного форматування коду, який спрощує роботу з різними стилями написання коду, встановлюючи єдиний стандарт форматування.

ESLint

ESLint — це лінтер для JavaScript, який використовується для виявлення помилок, неявних проблем та створення зручного середовища для розробки.

Pre-commit hooks

Інструменти для налаштування хуків: pre-commit hooks – це кастомні скрипти які будуть виконуватися перед кожним комітом. Для створення pre-commit hooks використовуйте husky або вбудовані засоби git-hooks. husky надає можливість конфігурувати хуки зручно та швидко.

Додаткові матеріали

How To Format Code with Prettier in Visual Studio Code https://www.digitalocean.com/community/tutorials/how-to-format-code-with-prettier-in-visual-studio-code

Find and fix problems in your JavaScript code https://eslint.org/

Prettier https://prettier.io/

Husky https://www.npmjs.com/package/husky

it ерудиція, Основи JS, Питання із співбесід, Практика

<it/>Praktik

Інсталяція

Конфігурація

Запуск з CLI

Інтеграція з IDE

Visual Studio Code

ESLint

Інсталяція

Конфігурація

Суворість правил

Плагіни

Запуск з CLI

Інтеграція з IDE

Порівнняння Prettier & ESLint

Pre-commit hooks. Husky

Husky

Підсумки

Prettier

ESLint

Pre-commit hooks

Додаткові матеріали

Залишити відповідь Скасувати коментар