Prettier настройка

Prettier является инструментом автоматического форматирования кода, который обеспечивает единообразие стиля и повышает читаемость. В проектах на Vuetify, где часто используется сложная структура компонентов, корректная конфигурация Prettier позволяет поддерживать чистоту шаблонов, скриптов и стилей.

Установка Prettier

Для начала необходимо установить Prettier в проект через npm или yarn:

npm install --save-dev prettier

или

yarn add --dev prettier

Если используется проект на Vue 3 с Vuetify, рекомендуется также установить плагины для интеграции с VS Code и поддержкой eslint:

npm install --save-dev eslint-config-prettier eslint-plugin-prettier

Создание конфигурационного файла

Prettier использует файл конфигурации .prettierrc или .prettierrc.json. Пример базовой конфигурации для Vuetify:

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "as-needed",
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "always",
  "vueIndentScriptAndStyle": true,
  "endOfLine": "lf"
}

Ключевые параметры:

  • printWidth — максимальная длина строки. Для Vuetify рекомендуется 100, чтобы компоненты с длинными пропсами не переносились слишком часто.
  • tabWidth — количество пробелов для отступов. Обычно 2 пробела.
  • semi — обязательное использование точек с запятой для предотвращения ошибок автоматической интерпретации кода.
  • singleQuote — использование одинарных кавычек для JS и Vue, что считается более удобным в рамках Vuetify-проектов.
  • vueIndentScriptAndStyle — особый параметр для корректного форматирования <script> и <style> блоков в .vue файлах.

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

Для совместной работы Prettier и ESLint необходимо обновить конфигурацию ESLint, добавив:

{
  "extends": [
    "plugin:vue/vue3-recommended",
    "eslint:recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": ["error", {
      "singleQuote": true,
      "semi": true,
      "tabWidth": 2,
      "vueIndentScriptAndStyle": true
    }]
  }
}

Эта конфигурация позволяет ESLint проверять соответствие кода правилам Prettier и автоматически исправлять форматирование при сохранении.

Форматирование Vuetify компонентов

Vuetify активно использует пропсы с длинными значениями и слоты, поэтому особое внимание уделяется:

  1. Многострочным пропсам:
<v-btn
  color="primary"
  :disabled="isDisabled"
  @click="handleClick"
>
  Нажми меня
</v-btn>

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

  1. Слоты и шаблоны:
<v-card>
  <template #header>
    <h3>Заголовок карточки</h3>
  </template>

  <v-card-text>
    Контент карточки
  </v-card-text>

  <template #actions>
    <v-btn color="primary">Действие</v-btn>
  </template>
</v-card>

Форматирование слотов и вложенных компонентов обеспечивает одинаковый стиль для всех .vue файлов.

  1. CSS и SCSS блоки:
<style scoped lang="scss">
.card {
  padding: 16px;
  background-color: #f5f5f5;
}
</style>

Опция vueIndentScriptAndStyle гарантирует, что Prettier корректно отформатирует внутренние блоки <script> и <style>.

Настройка автоформатирования в VS Code

Для удобства можно включить автоформатирование при сохранении:

// settings.json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Дополнительно рекомендуется отключить автоформатирование ESLint для .vue файлов, чтобы Prettier был единственным источником форматирования.

Советы по поддержке чистого кода в Vuetify проектах

  • Разделять длинные пропсы на отдельные строки.
  • Всегда использовать одинарные кавычки для атрибутов и JS-кода.
  • Форматировать слоты с явными тегами <template #name>.
  • Проверять конфликты ESLint и Prettier через команду:
npx eslint --fix src/**/*.vue
  • Использовать Prettier как pre-commit hook через Husky, чтобы предотвращать неотформатированный код в репозитории.

Эта конфигурация обеспечивает единообразие кода, улучшает читаемость компонентов Vuetify и предотвращает ошибки форматирования при работе в команде.

Оглавление