Library. Prettier

🧱 Суть

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

При необходимости Prettier можно расширить плагинами, например для автоматической сортировки классов Tailwind CSS.

📦 Проблема

Сам со себе IDE плохо форматирует код, порой нужны пользовательские правила.

✅ Решение

Использовать prettier для корректного форматирования кода.

💻 Код

Установка Prettier

npm install -D prettier prettier-plugin-tailwindcss

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

Создай файл .prettierrc или .prettier.config.js и добавь настройки:

/** @type {import('prettier').Config} */
export default {
    semi: true,
    singleQuote: true,
    arrowParens: 'always',
    bracketSpacing: true,
    jsxSingleQuote: false,
    tabWidth: 4,
    useTabs: true,
    trailingComma: 'es5',
    printWidth: 120,
    endOfLine: 'auto',
    plugins: ['prettier-plugin-tailwindcss'],
};

Основные параметры:

semi – ставить точку с запятой;
singleQuote – использовать одинарные кавычки;
tabWidth – размер табуляции;
useTabs – использовать табы вместо пробелов;
printWidth – максимальная длина строки;
plugins – подключение дополнительных плагинов.

Исключения

Чтобы не форматировались служебные файлы и каталоги, создай файл .prettierignore:

node_modules
build
dist
eslint.config.js

В этот файл добавляются все файлы и папки, которые должны игнорироваться prettier.

🎯 Вывод

Prettier автоматически форматирует код по заданным правилам.
Конфигурация хранится в .prettierrc или .prettier.config.js.
Файл .prettierignore позволяет исключить ненужные файлы из форматирования.
Плагин prettier-plugin-tailwindcss автоматически сортирует классы Tailwind CSS.

LETUNOFF DOCS

Навигация