Настройка 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.mjs добавить eslint-config-prettier последним — он отключает все 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
      }
    }
  ]
}

Prettier API для кастомных скриптов

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-правилами.