Пошук уроків, статей та іншого контенту
Налаштуєте linting і formatting, щоб автоматично виявляти помилки та підтримувати єдиний стиль коду.
Linting — автоматична перевірка коду на типові помилки, потенційні проблеми та порушення правил.
Наприклад, linter може знайти:
змінну, яку оголосили, але не використовують;
звернення до змінної, якої не існує;
небезпечне нестроге порівняння;
інші проблеми, визначені правилами проєкту.
Formatting — автоматичне приведення коду до єдиного стилю.
Formatter відповідає за:
відступи;
переноси рядків;
крапки з комою;
лапки;
пробіли;
форматування об’єктів, масивів і функцій.
У Node.js-проєктах для цього часто використовують:
ESLint — linting;
Prettier — formatting.
Створіть новий Node.js-проєкт:
mkdir linting-example
cd linting-example
npm init -yВстановіть ESLint і Prettier як залежності для розробки:
npm install --save-dev eslint prettierПрапорець --save-dev означає, що ці пакети потрібні під час розробки, але не потрібні для запуску застосунку на продакшені.
Створіть у корені проєкту файл eslint.config.mjs:
export default [
{
files: ["**/*.js"],
languageOptions: {
ecmaVersion: "latest",
sourceType: "commonjs",
globals: {
console: "readonly",
module: "readonly",
process: "readonly",
require: "readonly",
},
},
rules: {
"no-unused-vars": "error",
"no-undef": "error",
eqeqeq: "error",
},
},
];Цей конфігураційний файл визначає:
які файли перевіряти;
яку версію JavaScript використовувати;
що код працює в середовищі Node.js;
які правила ESLint увімкнути.
Правило "no-unused-vars": "error" повідомляє про змінні, які не використовуються.
Правило "no-undef": "error" повідомляє про використання змінних, які не були оголошені.
Правило eqeqeq вимагає використовувати строге порівняння:
value === 10замість:
value == 10Значення "error" означає, що порушення правила вважається помилкою.
Створіть файл .prettierrc:
{
"semi": true,
"singleQuote": true,
"printWidth": 80
}У цьому прикладі Prettier буде:
додавати крапки з комою;
використовувати одинарні лапки;
намагатися не перевищувати 80 символів у рядку.
Створіть також файл .prettierignore:
node_modules
dist
coverageЦі каталоги Prettier не перевірятиме і не форматуватиме.
package.jsonВідкрийте package.json і додайте команди до властивості scripts:
{
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix",
"format": "prettier --write .",
"format:check": "prettier --check ."
}
}Команди виконують такі дії:
npm run lint — перевіряє код за правилами ESLint;
npm run lint:fix — автоматично виправляє частину помилок ESLint;
npm run format — форматує файли за допомогою Prettier;
npm run format:check — перевіряє форматування, але не змінює файли.
Створіть файл app.js:
const userName = process.argv[2] ?? 'світ';
function greet(name) {
return `Привіт, ${name}!`;
}
console.log(greet(userName));Запустіть програму:
node app.jsРезультат:
Привіт, світ!Або передайте ім’я як аргумент:
node app.js ОленоРезультат:
Привіт, Олено!Перевірте код за допомогою ESLint:
npm run lintЯкщо помилок немає, ESLint завершить роботу без повідомлень про порушення.
Перевірте форматування:
npm run format:checkЯкщо файл уже відповідає правилам Prettier, команда повідомить, що все відформатовано правильно.
Тимчасово змініть app.js:
const userName = process.argv[2] ?? 'світ';
const unusedValue = 10;
function greet(name) {
return `Привіт, ${name}!`;
}
console.log(greet(userName));
console.log(unknownValue);Тепер виконайте:
npm run lintESLint знайде дві проблеми:
unusedValue оголошена, але не використовується;
unknownValue не оголошена.
Приблизно такі помилки означають, що linter виявив проблему:
'unusedValue' is assigned a value but never used
'unknownValue' is not definedВиправте файл:
const userName = process.argv[2] ?? 'світ';
function greet(name) {
return `Привіт, ${name}!`;
}
console.log(greet(userName));Після цього команда npm run lint знову має завершитися без помилок.
Навмисно змініть формат app.js:
const userName=process.argv[2]??'світ'
function greet(name){return `Привіт, ${name}!`}
console.log(greet(userName))Перевірте форматування:
npm run format:checkPrettier повідомить, що файл не відповідає заданому стилю.
Щоб автоматично виправити форматування, виконайте:
npm run formatПісля цього файл буде приведений до такого вигляду:
const userName = process.argv[2] ?? 'світ';
function greet(name) {
return `Привіт, ${name}!`;
}
console.log(greet(userName));Prettier змінює зовнішній вигляд коду, але не перевіряє, чи правильно працює логіка програми. Саме тому formatting і linting виконують різні ролі.
Перед збереженням змін або створенням коміту можна виконати:
npm run lint
npm run format:checkДля автоматичного виправлення форматування:
npm run formatПісля автоматичних змін корисно ще раз перевірити код:
npm run lintОдин із можливих варіантів повного набору команд:
npm run format
npm run lint
node app.jsСпочатку код форматується, потім перевіряється ESLint, а після цього запускається програма.
Команди потрібно виконувати в каталозі, де розташовані:
package.json;
eslint.config.mjs;
.prettierrc;
папка node_modules.
Якщо виконати команду в іншій папці, Node.js може не знайти встановлені інструменти або конфігурацію.
Не обов’язково встановлювати ESLint або Prettier глобально.
Краще встановити їх у конкретний проєкт:
npm install --save-dev eslint prettierТоді всі розробники проєкту використовуватимуть однакові версії інструментів.
Prettier може виправити відступи або крапки з комою, але не виявить помилково названу змінну чи невикористаний код.
Для цього потрібно запускати ESLint:
npm run lintКоманда:
npm run formatвиправляє форматування, але не обов’язково виправляє всі lint-помилки.
Для lint-помилок використовуйте:
npm run lint:fixОднак не всі помилки можна виправити автоматично. Частину з них потрібно виправити вручну.
Каталоги на кшталт node_modules, dist і coverage не повинні форматуватися разом із кодом проєкту. Додайте їх до .prettierignore.
ESLint перевіряє код і знаходить потенційні помилки.
Prettier автоматично підтримує єдиний стиль форматування.
Конфігурація ESLint зберігається у eslint.config.mjs.
Налаштування Prettier зберігаються у .prettierrc.
npm run lint перевіряє код.
npm run format автоматично форматує файли.
Linting і formatting доповнюють одне одного, але вирішують різні задачі.