@bpa-dev/codestyle

Универсальная конфигурация ESLint, Prettier и Stylelint для проектов BPA. Поддерживает JavaScript, TypeScript и React.

Установка

pnpm add -D @bpa-dev/codestyle \
  eslint@9 prettier stylelint typescript \
  @eslint/js@9 typescript-eslint \
  @typescript-eslint/eslint-plugin @typescript-eslint/parser \
  eslint-config-prettier eslint-import-resolver-typescript \
  eslint-plugin-compat eslint-plugin-import eslint-plugin-jsx-a11y \
  eslint-plugin-perfectionist eslint-plugin-prettier \
  eslint-plugin-promise eslint-plugin-security eslint-plugin-unicorn \
  eslint-plugin-react eslint-plugin-react-hooks \
  stylelint-config-recess-order stylelint-config-recommended \
  stylelint-high-performance-animation stylelint-plugin-logical-css \
  stylelint-plugin-use-baseline stylelint-prettier stylelint-use-nesting

Настройка

Prettier и Stylelint

Добавьте в package.json:

{
  "prettier": "@bpa-dev/codestyle/prettier",
  "stylelint": "@bpa-dev/codestyle/stylelint"
}

ESLint

Создайте eslint.config.ts в корне проекта:

// Для JS/TS проектов
export { eslintConfig as default } from '@bpa-dev/codestyle'

// Для React проектов
export { reactConfig as default } from '@bpa-dev/codestyle'

Расширение конфигурации

import { eslintConfig } from '@bpa-dev/codestyle'
import { defineConfig } from 'eslint/config'

export default defineConfig([
  eslintConfig,
  {
    rules: {
      'no-console': 'off'
    }
  }
])

Скрипты

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,md}\"",
    "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,css,md}\""
  }
}

VS Code

Установите расширения:

• ESLint
• Prettier
• Stylelint

Создайте .vscode/settings.json:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
  "stylelint.validate": ["css"]
}