Настройка линтеров и форматеров кода

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

ESLint

ESLint — основной инструмент для статического анализа кода в проектах на JavaScript и TypeScript, включая Preact.

Установка:

npm install eslint --save-dev

Для проектов с Preact желательно использовать специализированный плагин:

npm install eslint-plugin-react eslint-plugin-jsx-a11y eslint-plugin-preact --save-dev

Настройка конфигурации (.eslintrc.js):

module.exports = {
  parser: '@babel/eslint-parser',
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:preact/recommended',
  ],
  plugins: ['preact', 'jsx-a11y'],
  rules: {
    'no-unused-vars': 'warn',
    'preact/jsx-uses-preact': 'error',
    'preact/prop-types': 'off',
  },
  settings: {
    react: {
      pragma: 'h', // Для Preact
      version: 'detect',
    },
  },
};

Ключевые моменты настройки:

  • plugin:preact/recommended включает рекомендации для безопасного и корректного использования JSX в Preact.
  • Параметр pragma: 'h' необходим, так как Preact использует функцию h для создания элементов.
  • Правила линтера можно детально настраивать под командные стандарты, например, отключать prop-types, если используется TypeScript.

Prettier

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

Установка:

npm install --save-dev prettier

Создание конфигурации (.prettierrc):

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false
}

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

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

.eslintrc.js можно дополнить:

extends: [
  'eslint:recommended',
  'plugin:preact/recommended',
  'plugin:prettier/recommended'
],
plugins: ['preact', 'prettier'],
rules: {
  'prettier/prettier': 'error'
}

Это позволяет ESLint автоматически проверять соблюдение правил Prettier и предупреждать о нарушениях стиля.

Настройка для TypeScript

Для проектов на Preact с TypeScript важно добавить парсер:

npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

Конфигурация:

module.exports = {
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true,
    },
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:preact/recommended',
    'plugin:prettier/recommended'
  ],
  plugins: ['@typescript-eslint', 'preact', 'prettier'],
  rules: {
    '@typescript-eslint/no-unused-vars': 'warn',
    'prettier/prettier': 'error'
  },
  settings: {
    react: {
      pragma: 'h',
      version: 'detect'
    }
  }
};

Такой подход обеспечивает полное соответствие типизации и стиля кода, минимизируя ошибки во время компиляции.

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

Для VS Code рекомендуется установить следующие расширения:

  • ESLint — проверка кода в реальном времени.
  • Prettier — автоформатирование при сохранении.

Настройка автоформатирования при сохранении (settings.json):

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.validate": ["javascript", "typescript", "javascriptreact", "typescriptreact"]
}

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

Рекомендации по использованию

  • Разделять правила ESLint на строгие для продакшн-кода и мягкие для разработки.
  • Интегрировать линтер и Prettier в CI/CD, чтобы исключить нарушения стиля в pull-request.
  • Использовать хуки Git (husky) для проверки кода перед коммитом:
npx husky-init && npm install
npx husky add .husky/pre-commit "npx lint-staged"

Пример конфигурации lint-staged в package.json:

"lint-staged": {
  "*.{js,ts,tsx}": ["eslint --fix", "prettier --write"]
}

Это гарантирует автоматическую проверку и исправление всех изменённых файлов перед коммитом.

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

Оглавление