Prettier настройка

Prettier — это инструмент для форматирования кода, который помогает разработчикам поддерживать единый стиль кодирования на протяжении всего проекта. Он поддерживает множество языков программирования и позволяет автоматически исправлять ошибки форматирования, улучшая читабельность и поддерживаемость кода. В этой статье рассмотрим, как настроить и интегрировать Prettier в проект, использующий фреймворк Stencil.

Установка Prettier

Первым шагом для настройки Prettier является его установка. Для этого необходимо добавить его в зависимости проекта с помощью npm или yarn.

npm install --save-dev prettier

или

yarn add --dev prettier

Основная настройка Prettier

После установки Prettier необходимо создать конфигурационный файл, чтобы настроить стиль форматирования в соответствии с требованиями проекта. Для этого создается файл .prettierrc в корне проекта. Этот файл может быть в формате JSON или YAML. Пример конфигурации в JSON-формате:

{
  "singleQuote": true,
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true
}

Объяснение параметров:

  • singleQuote: если установлено значение true, то Prettier будет использовать одинарные кавычки вместо двойных.
  • trailingComma: определяет, будут ли стоять запятые после последнего элемента в объектах и массивах. В данном случае es5 означает, что запятая будет стоять только в тех местах, где это поддерживается в ES5 (например, в объектах).
  • tabWidth: количество пробелов, которые будет использовать Prettier для замены табуляции.
  • semi: если установлено значение true, то в конце каждой строки будет ставиться точка с запятой.

Для более гибкой настройки можно использовать другие опции, такие как printWidth (максимальная длина строки) и endOfLine (формат конца строки).

Интеграция Prettier с Stencil

Stencil уже включает поддержку автоматического форматирования кода с помощью Prettier. Однако, чтобы сделать процесс более удобным, рекомендуется интегрировать Prettier с другими инструментами разработки, такими как редакторы кода, сборщики и CI/CD.

Интеграция с редакторами кода

Для того чтобы Prettier автоматически форматировал код при сохранении файла, необходимо настроить соответствующие плагины в используемом редакторе. Для популярных редакторов, таких как Visual Studio Code, есть готовые расширения, которые обеспечат интеграцию с Prettier.

В случае с VSCode, нужно установить расширение Prettier — Code formatter. После установки расширения в настройках редактора следует включить автоматическое форматирование:

{
  "editor.formatOnSave": true
}

Таким образом, каждый раз при сохранении файла будет автоматически применяться форматирование, соответствующее правилам, указанным в .prettierrc.

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

Для того чтобы гарантировать, что код будет форматироваться перед каждым коммитом, можно использовать Git hooks. Для этого рекомендуется установить инструмент lint-staged вместе с husky.

  1. Установить необходимые зависимости:
npm install --save-dev lint-staged husky
  1. Настроить husky и lint-staged:
npx husky-init
npm install

Затем в .husky/pre-commit добавить следующее правило:

npx lint-staged
  1. Настроить lint-staged для применения Prettier:

В файл package.json добавить конфигурацию для lint-staged:

{
  "lint-staged": {
    "*.ts": "prettier --write"
  }
}

Это обеспечит автоматическое форматирование файлов с расширением .ts (файлы TypeScript, используемые в Stencil) перед каждым коммитом.

Использование Prettier в CI/CD

Для интеграции Prettier в систему непрерывной интеграции (CI) необходимо добавить шаг в конфигурацию CI, который будет запускать форматирование кода перед сборкой или развертыванием.

Пример для GitHub Actions:

name: Prettier Check

on:
  pull_request:
    branches:
      - main

jobs:
  prettier:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install dependencies
        run: npm install
      - name: Run Prettier
        run: npx prettier --check .

В этом примере перед каждым pull request будет выполняться проверка, что весь код соответствует форматированию, заданному в Prettier.

Применение Prettier с TypeScript и Stencil

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

В файле .prettierrc можно указать дополнительные параметры для TypeScript, такие как typescript или parser, чтобы указать Prettier, что нужно использовать парсер TypeScript:

{
  "parser": "typescript"
}

Оптимизация работы с Prettier

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

  • Регулярное обновление конфигурации: важно следить за новыми релизами Prettier, так как с каждой версией добавляются новые параметры и исправления.
  • Автоматизация: настройка Prettier для автоматического форматирования на уровне редактора и перед коммитом значительно ускоряет работу и уменьшает количество ошибок.

Заключение

Настройка Prettier для проекта на Stencil помогает поддерживать код чистым и однородным, что особенно важно для больших проектов. Интеграция с редакторами, Git и CI/CD позволяет полностью автоматизировать процесс форматирования, что значительно ускоряет разработку и снижает вероятность ошибок.

Оглавление