Шпаргалка: Vite + TS + ESLint + Stylelint + EditorConfig + Husky

Опубликовано: 30.06.2026

Шаг 1. Создание проекта Vite

npm create vite@latest my-app
cd my-app

Шаг 2. Строгий TypeScript (tsconfig.json)

{
  "compilerOptions": {
    "target": "es2023",
    "module": "esnext",
    "lib": ["ES2023", "DOM"],
    "types": ["vite/client"],
    "skipLibCheck": true,
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,
    "noImplicitAny": true,
    "sourceMap": true,
    "strictNullChecks": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src"]
}

Шаг 3. Настройка ESLint

npm install -D eslint @eslint/js globals typescript-eslint

eslint.config.js

import js from "@eslint/js";
import globals from "globals";
import tseslint from "typescript-eslint";

export default tseslint.config(
  js.configs.recommended,
  ...tseslint.configs.recommended,
  {
    languageOptions: {
      globals: globals.browser, // Добавляет window, document, fetch и т.д.
    },
    rules: {
      "no-unused-vars": "off", // Выключаем базовый JS, доверяем TS
      "@typescript-eslint/no-unused-vars": "error", // Ошибка на неиспользуемые переменные
      "@typescript-eslint/no-explicit-any": "warn", // Предупреждение вместо ошибки для any
    },
  },
  {
    ignores: ["dist/", "node_modules/", "vite.config.ts"],
  }
);

Шаг 4. Настройка Stylelint для css

npm install -D stylelint stylelint-config-standard

или для scss

npm install -D stylelint stylelint-config-standard-scss

Файл .stylelintrc.json в корне проекта ( под SCSS )

{
  "extends": [
    "stylelint-config-standard-scss"
  ],
  "rules": {
    "selector-class-pattern": null,
    "custom-property-pattern": null,
    "no-empty-source": null,
    "scss/at-mixin-pattern": null,
    "scss/at-function-pattern": null,
    "scss/dollar-variable-pattern": null,
    "property-no-vendor-prefix": null,
    "value-no-vendor-prefix": null
  }
}

Шаг 5. Контроль форматирования (.editorconfig)

Файл .editorconfig в корне проекта, чтобы у всех в редакторе (VS Code / WebStorm) были одинаковые отступы

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

Шаг 6. Настройка Husky (Авто-проверки перед коммитом)

Важно: проект должен уже быть инициализирован в Гит (git init).
npx husky-init сам вставит себя в "devDependencies"

npx husky-init && npm install

Шаг 7. Прописываем команды в package.json

  "scripts": {
    "dev": "vite",
    "test": "npm run lint && npm run test:run",
    "test:run": "vitest run",
    "typecheck": "tsc --noEmit",
    "lint:js": "eslint .",
    "lint:css": "stylelint \"src/**/*.{css,scss}\"",
    "lint": "npm run lint:js && npm run lint:css && npm run typecheck",
    "build": "npm run typecheck && vite build",
    "preview": "vite preview --port 3000",
    "start": "npm run build && npm run preview",
    "prepare": "husky"
  }

Расшифровка настроек tsconfig.json

Интеграция с Vite и Окружением

  • "types": ["vite/client"]
    Обучает TypeScript понимать специфичные фичи Vite. Без этого TS будет ругаться на импорты картинок (import img from './logo.svg'), CSS-модулей и переменных окружения.
  • "moduleResolution": "bundler"
    Говорит TS искать модули так же, как это делают современные сборщики (Vite).
  • "allowImportingTsExtensions": true
    Разрешает явно писать расширения файлов .ts или .tsx при импортах (например, import { user } from './user.ts'). 
    Работает только в паре с "noEmit": true.
  • "noEmit": true 
    Запрещает TypeScript самостоятельно генерировать файлы .js при компиляции.

Стандарты Языка и Модули

  • "target": "es2023" и "lib": ["ES2023", "DOM"]
    Определяет, какие возможности JavaScript доступны в коде. 
    es2023 открывает современные методы массивов и синтаксис, а DOM добавляет типы для работы в браузере (window, document, fetch).
  • "module": "esnext"
    Использует самый современный стандарт ECMAScript-модулей (import / export).
  • "moduleDetection": "force"
    Заставляет TS считать абсолютно каждый файл изолированным модулем, даже если в нем нет ключевых слов import или export.
  • "verbatimModuleSyntax": true
    Требует явно писать import type для типов и интерфейсов. Это гарантирует, что при сборке Vite сможет безопасно и быстро удалить «типовые» импорты, не ломая JavaScript-код.
  • "erasableSyntaxOnly": true
    Запрещает использовать конструкции, которые нельзя удалить простой очисткой типов (например, enum или namespace).

Строгие проверки

  • "noImplicitAny": true
    Запрещает использовать тип any неявно.
  • "strictNullChecks": true
    Спасает от — Cannot read property of undefined. TS заставит делать проверки (if (user)) перед обращением к свойствам объекта, если объект может быть null или undefined.
  • "noUnusedLocals": true и "noUnusedParameters": true
    Подсвечивает как ошибку любые объявленные, но не использованные переменные или параметры функций.
  • "noFallthroughCasesInSwitch": true
    Запрещает «проваливание» в конструкции switch-case (при забытом break между case).

Вспомогательные настройки

  • "skipLibCheck": true
    Пропускает проверку типов внутри файлов в node_modules.
  • "sourceMap": true
    Генерирует файлы карт кода. В панели разработчика браузера при отладке ты будут .ts файлы, а не каша из сборщика.
  • "include": ["src"]
    Указывает TypeScript проверять файлы только внутри папки src.
Tags