Node.js + TypeScript: Настройка проекта с ESLint, Husky и Prettier

Это руководство описывает настройку проекта Node.js с использованием TypeScript, включая режимы сборки для Production и Development, а также интеграцию ESLint, Husky и Prettier.

Инициализация проекта и установка зависимостей

Создайте пустой проект и инициализируйте его:

npm init -y

Установите TypeScript и типизацию для Node.js:

npm install -D typescript @types/node

Проверьте установленные пакеты в package.json. Теперь поддерживаются типы для стандартных пакетов Node.js.

Настройка TypeScript (tsconfig.json)

Сгенерируйте файл tsconfig.json:

npx tsc --init

Внесите следующие изменения:

  • compilerOptions.target: es2018
  • compilerOptions.module: NodeNext
  • compilerOptions.resolveJsonModule: true
  • compilerOptions.allowJs: true
  • compilerOptions.outDir: ./build
  • compilerOptions.sourceMap: true
  • include: ["./src/*"]
  • exclude: ["node_modules"]
  • compilerOptions.lib: ["esnext", "dom"]
  • compilerOptions.strict: true

Пример конфигурации tsconfig.json:

{
  "compilerOptions": {
    "target": "es2018",
    "module": "NodeNext",
    "resolveJsonModule": true,
    "allowJs": true,
    "outDir": "./build",
    "sourceMap": true,
    "lib": ["esnext", "dom"],
    "strict": true
  },
  "include": ["./src/*"],
  "exclude": ["node_modules"]
}

Создание и компиляция исходного кода

Создайте директорию src и файлы src/main.ts и src/modules/analytics.ts:

// src/main.ts
let message: string = "Hello, TS!";
console.log(message);

import { analytics } from './modules/analytics';
analytics('Main');
// src/modules/analytics.ts
export const analytics = (name: string): void => {
  console.log(`Analytics for ${name}`);
};

Для компиляции выполните:

npx tsc

Результат находится в папке build.

Настройка разработки (Development)

Установите nodemon:

npm install -D nodemon

Добавьте скрипт dev в package.json:

"scripts": {
  "dev": "nodemon src/main.ts"
},

npm run dev запустит сервер разработки с автоматической перезагрузкой при изменении файлов.

Настройка Production

Добавьте скрипты build и start в package.json:

"scripts": {
  "build": "rimraf build && npx tsc",
  "start": "node build/main.js"
},

Установите rimraf:

npm install -D rimraf

Скрипт build очищает папку build и запускает компиляцию. Скрипт start запускает скомпилированное приложение.

Настройка ESLint

Установите ESLint и плагины:

npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

Создайте .eslintrc.json:

{
  "env": {
    "es2021": true,
    "node": true
  },
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint"],
  "rules": {}
}

Добавьте скрипты lint и lint:fix в package.json:

"scripts": {
  // ...
  "lint": "eslint src --ext .ts",
  "lint:fix": "eslint --fix src --ext .ts"
},

Настройка Prettier

Установите Prettier:

npm install --save-dev prettier

Создайте .prettierrc.json:

{
  "semi": false,
  "singleQuote": true,
  "printWidth": 120,
  "tabWidth": 2
}

Настройка Husky

Установите Husky:

npm install -D husky

Добавьте хук pre-commit в package.json:

"husky": {
  "hooks": {
    "pre-commit": "npm run lint"
  }
},

ESLint будет запускаться перед каждым коммитом.

Настроен проект Node.js с TypeScript, включая режимы сборки, ESLint, Prettier и Husky.

Что будем искать? Например,программа