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

Linting и форматирование кода — неотъемлемая часть современного веб-разработки на JavaScript и особенно актуальны при работе с компонентами Polymer. Эти процессы обеспечивают единообразие кода, предотвращают ошибки и повышают читаемость, что критично при работе с крупными проектами.

Настройка линтера для Polymer

Для проектов на Polymer чаще всего используют ESLint, поскольку он гибкий и поддерживает современный синтаксис ES6/ESNext, включая веб-компоненты. Основные шаги по настройке:

  1. Установка зависимостей:
npm install eslint eslint-plugin-html --save-dev
  • eslint — основной инструмент для анализа кода.
  • eslint-plugin-html — позволяет линтить HTML-файлы, включая <script> внутри компонентов Polymer.
  1. Создание конфигурационного файла .eslintrc.json:
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": "eslint:recommended",
  "plugins": ["html"],
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "rules": {
    "no-unused-vars": "warn",
    "no-console": "off",
    "semi": ["error", "always"],
    "quotes": ["error", "single"]
  }
}
  • env задает окружение, определяя глобальные переменные.
  • extends позволяет использовать базовые правила.
  • plugins добавляет поддержку HTML-файлов с <script> внутри.
  • rules — набор правил, которые можно гибко настраивать под командный стиль кода.
  1. Проверка кода:
npx eslint src/

Это просканирует все файлы в директории src и выведет предупреждения и ошибки.

Форматирование кода

Форматирование обеспечивает единообразие стиля кода и упрощает поддержку. Для Polymer-HTML компонентов удобно использовать Prettier.

  1. Установка Prettier:
npm install --save-dev prettier prettier-plugin-html
  1. Создание конфигурации .prettierrc:
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false,
  "htmlWhitespaceSensitivity": "ignore",
  "trailingComma": "es5"
}
  • htmlWhitespaceSensitivity важен для корректного форматирования шаблонов Polymer <template>.
  • Настройки semi, singleQuote, trailingComma обеспечивают единый стиль JS-кода.
  1. Форматирование проекта:
npx prettier --write src/

Все файлы будут автоматически отформатированы в соответствии с правилами Prettier.

Интеграция Linting и Prettier

Для оптимального результата часто используют комбинацию ESLint + Prettier. Для этого:

  1. Установка интеграции:
npm install --save-dev eslint-config-prettier eslint-plugin-prettier
  1. Обновление .eslintrc.json:
{
  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
  "plugins": ["html", "prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}
  • Плагин eslint-plugin-prettier позволяет запускать Prettier как правило ESLint.
  • eslint-config-prettier отключает конфликтующие правила ESLint, которые могут противоречить Prettier.

Автоматизация с помощью Husky и lint-staged

Для обеспечения качества кода перед коммитом используют Husky и lint-staged:

  1. Установка инструментов:
npm install --save-dev husky lint-staged
  1. Настройка в package.json:
"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},
"lint-staged": {
  "src/**/*.{js,html}": [
    "eslint --fix",
    "prettier --write"
  ]
}
  • Перед каждым коммитом все файлы проходят ESLint и Prettier.
  • Ошибки линтера блокируют коммит, обеспечивая стабильность кода.

Специфика работы с Polymer

Polymer-компоненты используют HTML-шаблоны, которые могут содержать встроенные <script> и <style>. Важно учитывать:

  • Линтер должен корректно обрабатывать <script> внутри <template>. Использование eslint-plugin-html решает эту задачу.
  • Prettier с плагином HTML корректно форматирует вложенные стили и скрипты.
  • Для сложных проектов рекомендуется настроить alias путей, чтобы линтер корректно обрабатывал импорты модулей Polymer.

Практические рекомендации

  • Использовать единый конфигурационный файл для команды.
  • Настроить интеграцию линтера с редактором (VS Code, WebStorm) для мгновенной проверки кода.
  • Регулярно обновлять зависимости ESLint и Prettier для поддержки новых стандартов JS.
  • Добавлять новые правила линтера постепенно, чтобы не ломать существующий код.

Linting и форматирование обеспечивают предсказуемость поведения Polymer-компонентов, упрощают командную работу и предотвращают распространенные ошибки. Корректно настроенные инструменты позволяют сосредоточиться на логике компонентов, а не на стилевых и синтаксических проблемах.

Оглавление