Как настроить Prettier в React проекте?react-67

Prettier — это мощный инструмент для автоматического форматирования кода, который особенно полезен в React-разработке. Рассмотрим детальную настройку.

1. Установка Prettier

Устанавливаем базовый пакет:

npm install --save-dev prettier

Для интеграции с ESLint:

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

2. Базовая конфигурация

Создаем файл .prettierrc.json в корне проекта:

{
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "always",
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "endOfLine": "auto",
  "quoteProps": "as-needed",
  "proseWrap": "always"
}

3. Игнорирование файлов

Создаем .prettierignore:

# Игнорируемые файлы
node_modules
build
dist
coverage
*.config.js
*.snap
.env
.vscode
.next
out
public

4. Интеграция с ESLint

Обновляем ESLint конфигурацию (.eslintrc.json):

{
  "extends": [
    "plugin:react/recommended",
    "plugin:prettier/recommended"
  ],
  "rules": {
    "prettier/prettier": "error"
  }
}

5. Настройка для TypeScript

Если проект использует TypeScript:

{
  "overrides": [
    {
      "files": "*.{ts,tsx}",
      "options": {
        "parser": "typescript"
      }
    }
  ]
}

6. Скрипты для package.json

Добавляем полезные команды:

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

7. Интеграция с VSCode

Добавляем настройки в .vscode/settings.json:

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

8. Настройка для JSX

Специфические правила для React/JSX:

{
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "bracketSpacing": true,
  "arrowParens": "always"
}

Пример форматирования JSX:

// До
<Button variant="primary" onClick={handleClick} disabled={isDisabled}>Submit</Button>

// После Prettier
<Button
  variant="primary"
  onClick={handleClick}
  disabled={isDisabled}
>
  Submit
</Button>

9. Pre-commit хук

Для автоматического форматирования перед коммитом:

  1. Устанавливаем Husky:
npm install husky --save-dev
npx husky install
  1. Добавляем хук:
npx husky add .husky/pre-commit "npx prettier --write --loglevel warn \"src/**/*.{js,jsx,ts,tsx}\""

10. Дополнительные плагины

Для расширенной функциональности:

npm install --save-dev prettier-plugin-tailwindcss prettier-plugin-organize-imports

И добавляем в конфиг:

{
  "plugins": [
    "prettier-plugin-tailwindcss",
    "prettier-plugin-organize-imports"
  ]
}

Резюмируем

Для полной настройки Prettier в React-проекте:

  1. Установите Prettier и необходимые плагины
  2. Настройте конфигурационный файл .prettierrc
  3. Определите игнорируемые файлы в .prettierignore
  4. Интегрируйте с ESLint для избежания конфликтов
  5. Настройте IDE для автоматического форматирования
  6. Добавьте скрипты для удобного использования
  7. Настройте pre-commit хуки для автоматического форматирования

Правильно настроенный Prettier даст:

  • Единый стиль кода во всем проекте
  • Автоматическое форматирование при сохранении
  • Отсутствие споров о стиле кода в команде
  • Чистые и читаемые коммиты
  • Поддержку всех современных возможностей React и TypeScript

Использование Prettier в сочетании с ESLint создает мощную систему контроля качества кода.

Вопросы

Собеседования