NextJS v13

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

В этой статье мы собираемся настроить TypeScript, ESLint и Prettier в проекте NextJS. Мы можем создать новый проект, просто выполнив следующую команду

npx create-next-app

Он запросит некоторые данные, а затем создаст новый проект NextJS.

TypeScript и ESLint

create-next-app дает возможность создать проект, настроенный с помощью TypeScript и ESLint из коробки. Он генерирует файлы tsconfig.json и .eslintrc.json, которые содержат конфигурацию для TypeScript и ESLint.

красивее

Prettier — это де-факто пакет, используемый для форматирования кода. Нам нужно установить следующий пакет для настройки Prettier в проекте NextJS.

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

Нам нужно установить пакет eslint-config-prettier, потому что между правилами eslint и prettier есть некоторое совпадение, и пакет разрешает конфликт.

Нам также нужно расширить ESLint с помощью Prettier.

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

NPM-скрипты

Мы можем включить следующие сценарии NPM для выполнения линтинга и форматирования в базу кода.

// package.json
"lint": "next lint",
"format": "prettier --check .",
"format:fix": "prettier --write --list-different ."

— флаг list-other говорит красивее перечислить все форматированные файлы.

Этих основных шагов достаточно, чтобы включить TypeScript, ESLint и Prettier в проект NextJS.

Удачного кодирования!!!