Prettier

Prettier - форматтер кода. Он не проверяет архитектуру и не ловит ошибки типов, а просто приводит код к единому виду.

В продуктовой разработке Prettier полезен тем, что убирает споры о форматировании и делает diff компактнее.

Установка

Локальная установка в проект:

pnpm add -D prettier

Глобальная установка:

npm install --global prettier

В корне проекта нужно создать файл .prettierrc с настройками

Настройки prettier:

ширина
useTabs - использовать табы
singleQuote - одинарные кавычки
jsxSingleQuote - одинарные кавычки в jsx
arrowParens - если в стрелочной функции один аргумент, то его нужно удалять
semi - точка с запятой в конце
trailingComma - ставить запятую в конце (у объектов)
printWidth - максимальная длина строки
bracketSpacing - будет оставлять по пробелу отступов внутри объектов { имя }
endOfLine - окончание строк будет оставаться по умолчанию

{
  "useTabs": true,
  "tabWidth": 4,
  "printWidth": 100,
  "trailingComma": "all",
  "singleQuote": true,
  "jsxSingleQuote": true,
  "semi": true,
  "bracketSpacing": true,
  "endOfLine": "auto"
}

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

.prettierignore

dist
build
coverage
node_modules
pnpm-lock.yaml

Скрипты

package.json

{
  "scripts": {
    "format": "prettier . --write",
    "format:check": "prettier . --check"
  }
}

В CI обычно запускают format:check, а локально format.

Prettier и ESLint

Prettier отвечает только за форматирование. ESLint отвечает за качество кода и потенциальные ошибки. В TypeScript-проекте обычно нужны оба инструмента.

Далее в настройках указываем путь до плагина и активируем форматирование при сохранении (так же можно указать дополнительные файлы с форматированием).

Плюсы

убирает споры о форматировании;
быстро форматирует весь проект;
хорошо интегрируется с редакторами и CI.

Минусы

не проверяет качество и архитектуру кода;
может конфликтовать с форматирующими ESLint-правилами;
не все стилистические предпочтения можно настроить.

Когда использовать

нужен единый стиль форматирования;
команда хочет чистые diff без ручного форматирования;
Prettier отделён от ESLint-правил качества.

Base

Проводник