en
Prettier. Как правильно настроить

Prettier. Как правильно настроить

Андрей КовтунАндрей Ковтун, 2 мин чтения

Prettier поможет унифицировать код при работе в команде и привести его к красивому виду с помощью автоформатирования.

Установка Prettier

Устанавливаем последнюю версию Prettier:

npm i -D prettier

Особенности Prettier. Зачем он нужен?

С помощью Prettier мы получаем преимущества:

  • Программист сосредотачивается на написании кода, а не на его форматировании.
  • Команда пишет единообразный одинаково форматированный код.
  • Prettier умеет работать с многими популярными языками.
  • Можно поставить Prettier на pre-commit hook, чтобы код форматировался непосредственно перед коммитом на Github/Gitlab.

В чём разница между Prettier и Linters

Линтеры (Stylelint, Eslint) выполняют статический анализ кода и показывают ошибки в нём.

Prettier занимается только форматированием.

Конфигурация Prettier

Так как Prettier имеет собственные наборы конфигураций для форматирования кода, часто бывают случаи, что для команды или разработчика то или иное правило неприемлемо.

В таком случае можно конфигурацию поменять.

Для этого есть файл .prettierrc.json (можно использовать и другие его форматы, подробнее здесь)

Мой выглядит так:

{
  "printWidth": 80,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  // For Nunjucks templates.
  "overrides": [
    {
      "files": ".njk",
      "options": { "parser": "html" }
    }
  ]
}

Надо сказать, что набор правил в конфигурации довольно ограниченный, и это было сделано разработчиками сознательно.

Игнорирование 3rd party библиотек

Нам ведь не нужно форматировать код 3rd party библиотек или скомпилированного кода для production. Для настройки игнорирования можно использовать файл .prettierignore.

Пример моего файла .prettierignore:

node_modules/
vendor/
dist/

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

Для игнорирования файлов, в самом начале файла напиши prettier-ignore:

HTML:

<!-- prettier-ignore -->

CSS:

/* prettier-ignore */

JS:

// prettier-ignore

JSX:

{/* prettier-ignore */}

Markdown:

<!-- prettier-ignore -->

Отключить автоформатирование некоторых типов файлов в VSCode

Обычно я корректирую поведение Prettier в Vscode: отключаю автоформатирование для некоторых типов файлов.

Twig — мне субъективно не нравится стиль форматирования Prettier в Twig темплейтах, поэтому я его отключаю.

Yaml — автоформатирование не раз приводило к последствиям того, что *.yml файлы не проходили валидацию в Drupal из-за того, что Prettier «исправил» длину строки. А как известно, в Yaml отступы решают всё.

Конфигурация VSCode выглядит примерно так:

{
  "[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typecript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[pcss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[twig]": {
    "editor.formatOnSave": false
  },
  "[yml]": {
    "editor.formatOnSave": false
  },
  "[yaml]": {
    "editor.formatOnSave": false
  }
}

Итог

Инструменты билдеры вроде Vite по умолчанию включают Prettier при установке к примеру Vue приложения, и не нужно больше заботиться о его настройке.

Вообще стоит один раз настроить Prettier и забыть о форматировании кода вручную навсегда.

Ссылки:

Последнее обновление: