Как настроить ESLint и Prettier в проекте на Next.js
и TypeScript: пошаговое руководство

npm install --save-dev eslint prettier 
eslint-config-airbnb-typescript

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

npm install eslint-import-resolver-typescript
eslint-plugin-unused-imports

{
  ...
  "extends": [
    "next/core-web-vitals",
    "airbnb-typescript",
    "prettier"
  ],
  ... 
}

{
  ...
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.json",
    "ecmaFeatures": { "jsx": true }, // Поддержка JSX
    "ecmaVersion": "latest", // Поддержка ES2022+
    "sourceType": "module" // Поддержка ES-модули
  },
  "plugins": ["@typescript-eslint"]
  ...
}

"rules": {
  ...
  // Помогает избегать создания нестабильных вложенных компонентов
  "react/no-unstable-nested-components": "warn"

  // Разрешает JSX только в .tsx файлах
  "react/jsx-filename-extension": [
    2,
    {
      "extensions": [".tsx"]
    }
  ],

  // Помогает находить неиспользуемые переменные 
  "@typescript-eslint/no-unused-vars": [
    "error",
    // Игнорирует параметры, начинающиеся с _
    {
      "destructuredArrayIgnorePattern": "^_",
      "argsIgnorePattern": "^_"
    }
  ],

  // Требует использование import type для импортов типов
  "@typescript-eslint/consistent-type-imports": "error"
  ...
}

{
    // Устанавливает ширину отступа в 4 пробела
    "tabWidth": 4,
    // Добавляет точки с запятой в конце выражений
    "semi": true,
    // Использует одинарные кавычки вместо двойных для строк
    "singleQuote": true,
    // Добавляет запятую после последнего элемента в объектах      
    "trailingComma": "all",
    // Добавляет пробелы внутри фигурных скобок объектов
    "bracketSpacing": true,
    // Переносит закрывающую скобку на новую строку
    "bracketSameLine": false,
    // Добавляет круглые скобки вокруг параметров стрелочных функций
    "arrowParens": "always",
    // Ограничивает длину строки до 100 символов
    "printWidth": 100,
    // Устанавливает формат окончания строк
    "endOfLine": "crlf"
}

# Ignore artifacts:
build
*.html
*.css

"scripts": {
  // Запускает линтер Next.js для проверки правил ESLint
  "lint": "next lint",
  // Автоматически форматирует все файлы с помощью Prettier
  "prettier": "npx prettier --write **/*.{ts,tsx,json,scss}",
  // Проверяет TypeScript-файлы на соответствие правилам ESLint
  "lint:ts": "eslint \"./src/**/*.{ts,tsx}\"",
  // Исправляет автоматически исправляемые ошибки с помощью ESLint.
  "lint:ts:fix": "eslint \"./src/**/*.{ts,tsx}\" --fix"
}

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