Prettier и форматирование кода

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

Основы Prettier

Prettier — это «опинионированный» форматтер кода. Он строго определяет стиль написания кода и применяет его автоматически. Для проектов на Lit это особенно важно, поскольку код компонентов состоит из сочетания JavaScript, HTML-шаблонов и CSS, встроенного через css теги.

Основные функции Prettier:

  • Автоматическое выравнивание кода.
  • Форматирование HTML внутри шаблонов Lit (html``).
  • Форматирование CSS внутри шаблонов Lit (css``).
  • Поддержка TypeScript и JSX/TSX, что полезно для сложных компонентов с типизацией.

Установка и настройка

Для проекта на Lit Prettier устанавливается через npm:

npm install --save-dev prettier

Создание конфигурационного файла .prettierrc позволяет задать правила форматирования:

{
  "semi": true,
  "singleQuote": true,
  "printWidth": 100,
  "tabWidth": 2,
  "trailingComma": "es5",
  "bracketSpacing": true
}
  • semi — добавление точки с запятой в конце строк.
  • singleQuote — использование одинарных кавычек для строк.
  • printWidth — максимальная ширина строки, после которой Prettier переносит код.
  • trailingComma — постановка запятой в конце объектов и массивов.
  • bracketSpacing — пробелы внутри фигурных скобок.

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

Компоненты Lit состоят из классов, наследуемых от LitElement, с шаблонами HTML и встроенным CSS. Prettier автоматически обрабатывает все эти части, если настроен правильно.

Пример компонента:

import { LitElement, html, css } from 'lit';

export class MyComponent extends LitElement {
  static styles = css`
    .container {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
  `;

  render() {
    return html`
      <div class="container">
        <p>Hello, Lit!</p>
      </div>
    `;
  }
}

customElements.define('my-component', MyComponent);

После форматирования Prettier гарантирует:

  • Единообразные отступы в шаблонах html`` и CSS css``.
  • Четкое выравнивание вложенных тегов.
  • Правильное размещение скобок и кавычек.

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

Prettier можно интегрировать напрямую в редакторы кода:

  • VS Code: расширение Prettier — Code Formatter. Автоформатирование при сохранении файла.
  • WebStorm / IntelliJ: встроенная поддержка Prettier через настройки Code Style.

В сборочных системах Prettier можно запускать как часть npm-скриптов:

"scripts": {
  "format": "prettier --write 'src/**/*.{js,ts,css,html}'"
}

Это позволяет автоматически форматировать весь проект командой:

npm run format

Особенности форматирования HTML и CSS внутри шаблонов Lit

Lit использует tagged template literals для шаблонов. Prettier распознает эти конструкции и применяет корректное форматирование. Важные моменты:

  • Вложенные элементы автоматически выравниваются.
  • Атрибуты в HTML переносятся на новую строку при превышении printWidth.
  • CSS свойства выравниваются по строкам, сохраняется читаемость.

Пример:

html`
  <div class="card" data-id="1">
    <h2>Title</h2>
    <p>Description text goes here.</p>
  </div>
`

Prettier гарантирует, что структура шаблона останется аккуратной даже при изменении длины строк.

Совместное использование с ESLint

В проектах на Lit Prettier часто используется вместе с ESLint для контроля качества кода. В этом случае Prettier отвечает за стиль, а ESLint — за ошибки и потенциальные баги. Конфигурация может включать:

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

В .eslintrc:

{
  "extends": ["eslint:recommended", "plugin:lit/recommended", "prettier"],
  "plugins": ["lit"]
}

Это устраняет конфликты между правилами ESLint и форматированием Prettier.

Рекомендации по организации кода

  1. Использовать отдельный CSS для глобальных стилей, а стили компонентов хранить внутри static styles.
  2. Форматировать все файлы проекта через Prettier для единообразия.
  3. Настроить автоматическое форматирование при коммите через husky и lint-staged.
"lint-staged": {
  "src/**/*.{js,ts,css,html}": ["prettier --write"]
}

Это гарантирует, что любой код в репозитории будет соответствовать единому стилю.

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

Оглавление