Налаштування Prettier для форматування коду

Налаштування Prettier для форматування коду

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

Встановлення

npm install --save-dev prettier

Для інтеграції з ESLint (щоб вони не конфліктували):

npm install --save-dev eslint-config-prettier

.prettierrc

{
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": false,
  "trailingComma": "all",
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "bracketSpacing": true,
  "bracketSameLine": false,
  "arrowParens": "always",
  "endOfLine": "lf"
}

"endOfLine": "lf" — критично при роботі з розробниками на Windows та macOS. Іноді git diff показує зміни в кожному рядку файлу.

.prettierignore

node_modules/
dist/
build/
.next/
coverage/
*.min.js
*.min.css
package-lock.json
yarn.lock
pnpm-lock.yaml

scripts у package.json

{
  "scripts": {
    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,css,json,md}\"",
    "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,css,json,md}\""
  }
}

--check для CI — завершується з ненульовим кодом, якщо є неформатовані файли.

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

Додайте eslint-config-prettier останнім у eslint.config.mjs — він вимикає всі правила ESLint, які конфліктують з Prettier:

import prettier from 'eslint-config-prettier';

export default [
  // ... інші конфігурації
  prettier,  // має бути останнім
];

Немає потреби встановлювати eslint-plugin-prettier — він запускає Prettier як правило ESLint і уповільнює лінтинг. Краще запускати їх окремо.

Prettier для різних типів файлів

Prettier підтримує різні парсери. Використовуйте overrides для встановлення різних опцій для різних файлів:

{
  "semi": true,
  "singleQuote": true,
  "overrides": [
    {
      "files": "*.json",
      "options": {
        "printWidth": 80
      }
    },
    {
      "files": "*.md",
      "options": {
        "proseWrap": "always",
        "printWidth": 80
      }
    },
    {
      "files": "*.{yaml,yml}",
      "options": {
        "tabWidth": 2,
        "singleQuote": false
      }
    }
  ]
}

API Prettier для власних скриптів

import prettier from 'prettier';
import fs from 'node:fs/promises';

async function formatFile(filepath: string) {
  const content = await fs.readFile(filepath, 'utf8');
  const config = await prettier.resolveConfig(filepath);

  const formatted = await prettier.format(content, {
    ...config,
    filepath, // щоб визначити парсер за розширенням
  });

  if (formatted !== content) {
    await fs.writeFile(filepath, formatted);
    console.log(`Formatted: ${filepath}`);
  }
}

VS Code

.vscode/settings.json:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }
}

.vscode/extensions.json — рекомендації для команди:

{
  "recommendations": ["esbenp.prettier-vscode"]
}

Часові рамки

Додавання Prettier до існуючого проекту: 30–60 хвилин на налаштування. Додатково 1–4 години для початкового форматування всього кодобейзу та розв'язання конфліктів з правилами ESLint.