Пошук уроків, статей та іншого контенту
Інтегруєте TypeScript з ESLint і Prettier для автоматичної перевірки коду, форматування та узгоджених правил команди.
У TypeScript-проєкті ці інструменти виконують різні завдання:
TypeScript перевіряє типи та компілює код.
ESLint знаходить потенційні помилки та порушення правил коду.
Prettier автоматично форматує код: відступи, лапки, крапки з комою, переноси рядків.
Разом вони допомагають:
виявляти помилки ще до запуску програми;
підтримувати єдиний стиль коду;
зменшити кількість обговорень форматування під час code review;
автоматизувати перевірки через npm-скрипти або CI.
ESLint і Prettier не замінюють TypeScript. Перевірка типів і перевірка стилю — це окремі етапи.
Створимо мінімальний TypeScript-проєкт:
mkdir ts-quality
cd ts-quality
npm init -y
npm install --save-dev typescript eslint @eslint/js typescript-eslint prettier eslint-plugin-prettier eslint-config-prettier
npx tsc --initВстановлені пакети:
typescript — компілятор TypeScript;
eslint — аналізатор JavaScript і TypeScript-коду;
@eslint/js — стандартні правила ESLint для JavaScript;
typescript-eslint — інтеграція ESLint з TypeScript;
prettier — форматувальник;
eslint-plugin-prettier — запускає Prettier як правило ESLint;
eslint-config-prettier — вимикає правила ESLint, які можуть конфліктувати з Prettier.
У сучасних версіях ESLint використовується flat config — файл eslint.config.mjs.
Змінимо tsconfig.json, щоб компілятор працював із папкою src і створював результат у dist:
{
"compilerOptions": {
"target": "ES2022",
"module": "NodeNext",
"moduleResolution": "NodeNext",
"rootDir": "./src",
"outDir": "./dist",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true
},
"include": ["src"]
}Опція strict вмикає сувору перевірку типів. Це допомагає виявляти більше помилок на етапі компіляції.
Створимо файл src/index.ts:
const userName = "Олена";
function greet(name: string): string {
return `Привіт, ${name}!`;
}
console.log(greet(userName));Перевірити типи та скомпілювати код можна командою:
npx tsc --noEmitПрапорець --noEmit перевіряє код, але не створює JavaScript-файли.
Створимо файл eslint.config.mjs у корені проєкту:
import eslint from "@eslint/js";
import tseslint from "typescript-eslint";
import prettierRecommended from "eslint-plugin-prettier/recommended";
export default tseslint.config(
{
ignores: ["dist/**", "node_modules/**"],
},
eslint.configs.recommended,
...tseslint.configs.recommended,
prettierRecommended,
);Розглянемо конфігурацію по частинах:
eslint.config.mjs — конфігураційний файл ESLint у форматі ES-модулів;
eslint.configs.recommended — базові рекомендовані правила ESLint;
tseslint.configs.recommended — правила для TypeScript;
prettierRecommended — інтеграція Prettier з ESLint;
ignores — файли та папки, які не потрібно перевіряти.
Конфігурація prettierRecommended має бути останньою. Вона вимикає конфліктні правила ESLint і додає перевірку форматування через Prettier.
Запустити ESLint для TypeScript-файлів можна так:
npx eslint .Якщо помилок немає, ESLint завершить роботу без повідомлень.
Створимо файл .prettierrc:
{
"semi": true,
"singleQuote": false,
"trailingComma": "all",
"printWidth": 80
}Ці параметри означають:
semi: true — додавати крапки з комою;
singleQuote: false — використовувати подвійні лапки;
trailingComma: "all" — додавати кінцеві коми там, де це підтримує синтаксис;
printWidth: 80 — бажана максимальна довжина рядка.
Prettier не перевіряє типи та не визначає логічні помилки. Він лише приводить код до узгодженого формату.
Перевірити форматування без зміни файлів:
npx prettier . --checkАвтоматично відформатувати файли:
npx prettier . --writeЗавдяки eslint-plugin-prettier ESLint також повідомляє про проблеми форматування.
Наприклад, такий код містить порушення стилю:
const userName = 'Олена'
function greet(name: string): string {
return `Привіт, ${name}!`
}
console.log(greet(userName))ESLint може повідомити про:
неправильні лапки;
відсутні крапки з комою;
неправильні відступи;
інші проблеми, знайдені налаштованими правилами.
Виправити автоматично те, що можна виправити:
npx eslint . --fixПісля виконання команди файл буде відформатований відповідно до налаштувань Prettier.
Важливо розрізняти команди:
npx eslint .Лише перевіряє код.
npx eslint . --fixПеревіряє код і застосовує автоматичні виправлення.
npx prettier . --checkЛише перевіряє форматування.
npx prettier . --writeФорматує файли.
package.jsonЩоб не вводити довгі команди вручну, додамо npm-скрипти:
{
"scripts": {
"build": "tsc",
"typecheck": "tsc --noEmit",
"lint": "eslint .",
"lint:fix": "eslint . --fix",
"format": "prettier . --write",
"format:check": "prettier . --check"
}
}Тепер команди можна запускати так:
npm run typecheck
npm run lint
npm run lint:fix
npm run format
npm run format:check
npm run buildТиповий порядок перевірки:
npm run typecheck — перевірити типи;
npm run lint — перевірити правила ESLint;
npm run format:check — перевірити форматування;
npm run build — переконатися, що проєкт компілюється.
Структура проєкту може виглядати так:
ts-quality/
├── src/
│ └── index.ts
├── .prettierrc
├── eslint.config.mjs
├── package.json
└── tsconfig.jsonsrc/index.ts:
type User = {
name: string;
age: number;
};
function describeUser(user: User): string {
return `${user.name} має ${user.age} років`;
}
const user: User = {
name: "Олена",
age: 29,
};
console.log(describeUser(user));Перевірка проєкту:
npm run typecheck
npm run lint
npm run format:checkЯкщо всі команди завершилися успішно, код відповідає правилам типів, ESLint і Prettier.
Для зручної роботи в редакторі потрібно встановити розширення ESLint і Prettier.
Рекомендований підхід:
ESLint показує проблеми безпосередньо у файлі;
Prettier форматує файл під час збереження;
правила форматування зберігаються в .prettierrc, а не в налаштуваннях окремого розробника.
У командному проєкті важливо, щоб усі використовували локальні залежності з package.json. Тоді різні розробники та CI застосовуватимуть однакові версії інструментів.
ESLint можна запускати не для всього проєкту, а для конкретної папки:
npx eslint srcPrettier також може працювати з конкретною папкою:
npx prettier src --writeЦе зручно під час розробки великого проєкту, коли потрібно швидко перевірити лише змінені файли.
Базова конфігурація typescript-eslint перевіряє синтаксис і загальні правила TypeScript. Частина складніших правил потребує доступу до інформації про типи з tsconfig.json.
Такі правила називають type-aware rules. Їх не потрібно вмикати без потреби: вони складніші та можуть збільшити час перевірки.
Для більшості проєктів на початку достатньо:
import eslint from "@eslint/js";
import tseslint from "typescript-eslint";
import prettierRecommended from "eslint-plugin-prettier/recommended";
export default tseslint.config(
eslint.configs.recommended,
...tseslint.configs.recommended,
prettierRecommended,
);Спочатку варто налаштувати стабільну базову перевірку, а потім додавати суворіші правила відповідно до потреб проєкту.
prettierRecommended має бути останньою конфігурацією. Якщо розмістити її раніше, наступні правила можуть знову ввімкнути конфліктні правила форматування.
Сам пакет eslint не додає повноцінної підтримки TypeScript. Потрібні typescript-eslint і відповідна конфігурація.
Prettier не перевіряє:
чи передано правильний тип аргументу;
чи використовується змінна;
чи може значення бути undefined;
чи правильна бізнес-логіка функції.
Для цього використовуються TypeScript і ESLint.
distСкомпільовані файли не потрібно повторно перевіряти ESLint. Саме тому папку dist додано до ignores.
Якщо один розробник використовує глобальний Prettier, а інший — локальний пакет іншої версії, результат форматування може відрізнятися.
Краще запускати інструменти через npm-скрипти:
npm run lint
npm run format:checkСпочатку варто спробувати автоматичне виправлення:
npm run lint:fixПісля цього залишаться проблеми, які потребують ручної зміни коду.
TypeScript перевіряє типи та компілює код.
ESLint знаходить проблеми якості та потенційні помилки.
Prettier автоматично форматує код.
typescript-eslint додає ESLint-підтримку TypeScript.
eslint-plugin-prettier інтегрує Prettier у перевірку ESLint.
eslint-config-prettier запобігає конфліктам між ESLint і Prettier.
Для автоматизації варто додати скрипти typecheck, lint, lint:fix, format і format:check.
Форматування та перевірку типів краще запускати окремо, адже це різні етапи аналізу коду.