ESLint и Prettier

SkateJS — это библиотека для создания веб-компонентов, построенная на современном JavaScript и ориентированная на модульность и переиспользуемость кода. В крупных проектах качество кода играет критическую роль, особенно при работе с веб-компонентами, где структура и взаимодействие элементов строго определены. ESLint и Prettier становятся незаменимыми инструментами для обеспечения единообразия и предотвращения ошибок на ранней стадии.

Настройка ESLint для SkateJS

ESLint выполняет статический анализ кода и позволяет выявлять ошибки, потенциальные баги и несоответствия стилю. Для проектов с SkateJS рекомендуется использовать конфигурацию, которая поддерживает современные стандарты ES и специфику веб-компонентов.

  1. Установка ESLint и базовых плагинов:
npm install eslint eslint-plugin-import eslint-config-standard --save-dev
  1. Создание конфигурационного файла .eslintrc.js:
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:import/errors',
    'plugin:import/warnings',
    'standard',
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
  },
  rules: {
    'no-unused-vars': 'warn',
    'no-console': 'off',
    'import/no-unresolved': 'error',
  },
};

Ключевые моменты:

  • env.browser задаёт окружение браузера, что необходимо для корректной проверки DOM-операций, часто используемых в SkateJS.
  • Плагин import помогает отслеживать ошибки импорта модулей, что важно при работе с компонентами, разбитыми по отдельным файлам.
  • Правила можно расширять с учётом особенностей веб-компонентов, например, добавлять проверку имен кастомных элементов или специфические правила для методов жизненного цикла Skate.define.

Интеграция Prettier

Prettier отвечает за автоматическое форматирование кода, гарантируя единообразие стиля. Совместное использование с ESLint позволяет одновременно контролировать и стиль, и ошибки кода.

  1. Установка Prettier и плагинов для ESLint:
npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier
  1. Обновление .eslintrc.js для интеграции Prettier:
module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:import/errors',
    'plugin:import/warnings',
    'standard',
    'plugin:prettier/recommended',
  ],
  plugins: ['prettier'],
  rules: {
    'prettier/prettier': ['error', { singleQuote: true, semi: true }],
    'no-unused-vars': 'warn',
  },
};

Особенности интеграции:

  • plugin:prettier/recommended отключает конфликты ESLint с правилами форматирования Prettier.
  • Правило 'prettier/prettier' позволяет ESLint ругаться на несоответствия формата кода, делая Prettier фактически частью процесса проверки.
  1. Конфигурационный файл Prettier .prettierrc:
{
  "singleQuote": true,
  "semi": true,
  "trailingComma": "all",
  "printWidth": 100,
  "tabWidth": 2
}

Эти параметры задают:

  • Использование одинарных кавычек (singleQuote: true).
  • Обязательные точки с запятой (semi: true).
  • Запятые в конце списков (trailingComma: all).
  • Оптимальную ширину строки для читаемости (printWidth: 100).

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

В проектах на SkateJS структура компонентов часто включает:

  • Определение кастомного элемента через Skate.define.
  • Методы жизненного цикла (connected, disconnected, render).
  • Встроенный JSX или шаблонные строки для разметки.

Использование ESLint и Prettier позволяет:

  1. Предотвратить ошибки в жизненном цикле компонентов.

    • Неправильное использование this.props или this.render может быть поймано ESLint.

  2. Поддерживать единый стиль JSX/HTML внутри компонентов.

    • Prettier автоматически форматирует вложенные элементы, отступы и переносы строк.

  3. Упрощать командную работу.

    • Все участники проекта видят одинаковый стиль кода и предупреждения о потенциальных ошибках.

Настройка автоматического запуска

Для удобства проверки и форматирования можно добавить скрипты в package.json:

{
  "scripts": {
    "lint": "eslint 'src/**/*.{js,jsx}'",
    "format": "prettier --write 'src/**/*.{js,jsx}'",
    "lint:fix": "eslint 'src/**/*.{js,jsx}' --fix"
  }
}
  • lint — проверка кода на ошибки.
  • format — автоматическое форматирование.
  • lint:fix — исправление большинства проблем ESLint автоматически.

Рекомендации по правилам ESLint для SkateJS

  • Проверка на использование кастомных элементов: все имена должны содержать дефис (my-component).
  • Контроль за методами жизненного цикла: connected, disconnected, render должны возвращать корректные значения.
  • Обязательное использование импортов модулей, избегая глобальных переменных.
  • Предпочтение строгих сравнений (=== вместо ==).
  • Ограничение длины строк и вложенности, чтобы шаблонные строки с HTML оставались читаемыми.

Интеграция в редакторы

  • VS Code: установка расширений ESLint и Prettier обеспечивает подсветку ошибок в реальном времени и автоформатирование при сохранении.
  • Настройка editor.formatOnSave и editor.codeActionsOnSave позволяет автоматически исправлять код и приводить его к стандарту Prettier + ESLint без дополнительных команд.

Практический эффект

Комбинация ESLint и Prettier в SkateJS проектах:

  • Снижает количество багов в компонентах.
  • Обеспечивает единообразный стиль кода.
  • Позволяет команде работать с единым набором правил без споров о форматировании.
  • Повышает читаемость кода и упрощает его поддержку.

ESLint и Prettier формируют основу надежного и аккуратного кода в SkateJS, обеспечивая контроль за стилем и предотвращая ошибки на ранних этапах разработки.

Оглавление