Prettier настройка

Установка Prettier

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

npm install --save-dev prettier
# или
yarn add --dev prettier

После установки создаётся возможность форматировать код автоматически, включая файлы JavaScript, Vue и CSS, используемые с Element Plus.

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

Prettier поддерживает несколько форматов конфигурации: .prettierrc, .prettierrc.json, .prettierrc.js, .prettierrc.yaml, prettier.config.js. Наиболее универсальным вариантом считается .prettierrc в формате JSON. Пример базовой конфигурации для проекта с Element Plus:

{
  "semi": true,
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "lf"
}

Ключевые моменты конфигурации:

  • semi: true — добавление точек с запятой в конце строк для согласованности с большинством стилей JavaScript и Vue.
  • singleQuote: true — предпочтение одинарных кавычек, что соответствует стандарту большинства Vue-компонентов Element Plus.
  • printWidth: 100 — ограничение длины строки, чтобы компоненты Element Plus, такие как el-table или el-form, не переносились некрасиво.
  • trailingComma: es5 — добавление запятых в объектах и массивах для упрощения git-диффов.
  • arrowParens: always — всегда ставить скобки у стрелочных функций, что повышает читаемость кода.

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

В проектах Vue 3 и Element Plus рекомендуется объединять Prettier с ESLint, чтобы избежать конфликтов между линтером и автоформатированием. Для этого устанавливаются дополнительные пакеты:

npm install --save-dev eslint-config-prettier eslint-plugin-prettier
# или
yarn add --dev eslint-config-prettier eslint-plugin-prettier

Конфигурация ESLint (.eslintrc.js) должна содержать:

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    'plugin:prettier/recommended'
  ],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': ['error', {
      singleQuote: true,
      semi: true,
      printWidth: 100,
      tabWidth: 2,
      trailingComma: 'es5',
      bracketSpacing: true,
      arrowParens: 'always',
      endOfLine: 'lf'
    }]
  }
};

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

Интеграция с VS Code

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

  1. Установить расширение Prettier – Code formatter.
  2. В настройках VS Code добавить:
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}
  1. Создать файл .vscode/settings.json в корне проекта для локальных настроек:
{
  "editor.formatOnSave": true,
  "prettier.requireConfig": true
}

prettier.requireConfig: true обеспечивает использование только локальной конфигурации Prettier, что предотвращает конфликт со глобальными настройками.

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

Некоторые компоненты Element Plus содержат длинные разметки с большим количеством атрибутов, например el-table или el-form. Для них рекомендуется:

  • Разбивать атрибуты на отдельные строки, если их больше 3–4.
  • Использовать отступы в 2 пробела, чтобы сохранить визуальное соответствие Vue-компонентам.
  • Выравнивать закрывающий тег в той же колонке, где и открывающий.

Пример:

<el-button
  type="primary"
  size="medium"
  :loading="isLoading"
  @click="handleClick"
>
  Сохранить
</el-button>

Prettier автоматически соблюдает такой стиль при включённых printWidth и tabWidth.

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

Иногда нужно исключить автоформатирование для определённых директорий или файлов. Для этого создаётся .prettierignore:

node_modules/
dist/
*.min.js

Это предотвращает ненужное форматирование сторонних библиотек и скомпилированных файлов.

Скрипты для автоматизации

Для удобного использования Prettier можно добавить npm-скрипты:

{
  "scripts": {
    "format": "prettier --write \"src/**/*.{js,vue,css,scss}\"",
    "format:check": "prettier --check \"src/**/*.{js,vue,css,scss}\""
  }
}
  • format — автоматически форматирует все исходные файлы.
  • format:check — проверяет, соответствует ли код конфигурации Prettier без внесения изменений.

Рекомендации по совместимости с Element Plus

  • При использовании JSX с Element Plus желательно включить semi: true и singleQuote: true для сохранения консистентного синтаксиса.
  • printWidth в диапазоне 100–120 обеспечивает удобное отображение длинных таблиц и форм.
  • Использование trailingComma: es5 упрощает редактирование массивов и объектов с многочисленными свойствами компонентов Element Plus.

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

Оглавление