Контейнеры и CI/CD

Конфигуратор Prettier

Переключатели собирают .prettierrc, а рядом тот же пример кода перерисовывается под выбранные настройки — видно, что именно меняет каждая галочка.

Настройки

Ширина строки

Не жёсткая граница, а точка, после которой Prettier переносит.

Ширина отступа

tabWidth

Отступ табамиuseTabs

Точки с запятойsemi

Одинарные кавычкиsingleQuote

Висячая запятая

trailingComma

Пробелы внутри { }bracketSpacing

Скобки у одного аргумента стрелки

arrowParens

Закрывающая скобка тега на строке последнего атрибутаbracketSameLine

Один атрибут на строкуsingleAttributePerLine

Перевод строки

endOfLine

Пример с этими настройками

const user = { name: 'Аня', role: 'admin', tags: ['dev', 'ops'], active: true };

const greet = (name) => `Привет, ${name}`;

export function save(user, options, transaction) {
  if (!user) throw new Error('нет пользователя');
  return db.users.update(user.id, { ...options });
}

.prettierrc

{
  "singleQuote": true
}

В файл попало 1 из 11 настроек — остальные совпадают со значениями Prettier по умолчанию.

.prettierignore

node_modules
dist
build
coverage
.nuxt
.output
package-lock.json
*.min.js
*.min.css

Про предпросмотр

Пример перерисовывается по тем же правилам, по которым решает Prettier: кавычки, точки с запятой, отступ, висячая запятая и перенос при выходе за printWidth. Это иллюстрация выбранных настроек, а не запуск самого форматтера — для настоящего форматирования произвольного кода есть рабочий стол кода.