Что такое Prettier и для чего он используется?react-66

Prettier — это инструмент для форматирования кода (code formatter), который автоматически приводит ваш код к единому стилю, избавляя команду от споров о форматировании.

Основное назначение Prettier

Prettier решает три ключевые проблемы:

  1. Единый стиль кода — автоматически применяет согласованные правила форматирования
  2. Экономия времени — устраняет ручное форматирование и обсуждение стиля
  3. Согласованность — гарантирует одинаковый вид кода у всех разработчиков

Как работает Prettier?

  1. Анализ кода — парсит исходный файл в AST (абстрактное синтаксическое дерево)
  2. Игнорирование оригинального форматирования — полностью переписывает код
  3. Применение правил — форматирует код согласно конфигурации
  4. Вывод результата — сохраняет отформатированный код
// До форматирования
const example = (a,b)=> { return a + b; }

// После Prettier
const example = (a, b) => {
  return a + b;
}

Ключевые особенности Prettier

1. Поддержка языков

  • JavaScript (включая ES6+)
  • JSX
  • TypeScript
  • CSS, SCSS
  • HTML
  • JSON
  • Markdown

2. "Мнениеный" подход

Prettier имеет встроенные стандарты форматирования, которые можно лишь частично настроить.

3. Интеграция с инструментами

  • Работает с ESLint (через eslint-plugin-prettier)
  • Имеет плагины для всех популярных IDE
  • Может использоваться в pre-commit хуках

Настройка Prettier для React-проекта

1. Установка

npm install --save-dev prettier

2. Базовый конфиг .prettierrc

{
  "semi": true,
  "singleQuote": true,
  "jsxSingleQuote": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "always",
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false
}

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

node_modules/
build/
dist/
*.config.js
coverage/

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

  1. Установка плагинов:
npm install --save-dev eslint-config-prettier eslint-plugin-prettier
  1. Настройка ESLint:
{
  "extends": ["plugin:prettier/recommended"]
}

Интеграция с IDE

  1. Установите расширение Prettier
  2. Добавьте настройки:
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Примеры правил форматирования

Для JSX

// До
<Button variant="primary"   disabled={true} onClick={handleClick}>Click me</Button>

// После
<Button
  variant="primary"
  disabled={true}
  onClick={handleClick}
>
  Click me
</Button>

Для цепочек методов

// До
const result = data.map(x=>x*2).filter(x=>x>10).reduce((a,b)=>a+b,0);

// После
const result = data
  .map((x) => x * 2)
  .filter((x) => x > 10)
  .reduce((a, b) => a + b, 0);

Резюмируем

Prettier — это:

  • Незаменимый инструмент для поддержания единого стиля кода
  • "Мнениеный" форматтер с минимальной настройкой
  • Средство для автоматизации рутинного форматирования
  • Отличное дополнение к ESLint (проверка качества + форматирование)

Для React-разработчиков Prettier особенно полезен благодаря:

  • Отличной поддержке JSX
  • Автоматическому форматированию компонентов
  • Интеграции с инструментами разработки
  • Возможности настройки под нужды проекта

Использование Prettier в команде:

  • Устраняет споры о стиле кода
  • Экономит время на code review
  • Делает код более читаемым
  • Позволяет сосредоточиться на логике, а не на форматировании

Вопросы

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