Настройка VSCode для NextJS

Настройка VSCode для Next.js

Visual Studio Code (VSCode) – один из самых популярных редакторов для веб-разработки. Его можно гибко настроить под проекты на Next.js, что обеспечит удобство работы и продуктивность. В этой статье рассмотрим основные этапы настройки.

Шаг 1. Установка Node.js и создание проекта Next.js

Перед началом работы убедитесь, что у вас установлена последняя версия Node.js. Для проверки выполните команду:

node -v

Если Node.js не установлен, скачайте его с официального сайта и выполните установку.

Для создания нового проекта Next.js выполните в желаемой директории проекта:

npx create-next-app@latest my-next-app

Процесс создания интерактивный. Выбирайте варианты ответа стрелками влево или вправо и подтверждайте на Enter.

Если создание проекта завершилось успешно, вы увидите подобное сообщение:

После создания проекта откройте его в VSCode, выбрав File → Open Folder.

Шаг 2. Расширений

Установите следующие расширения:

• ES7+ React/Redux/React-Native snippets – для создания React-компонентов и хуков с помощью сниппетов.
• Prettier - Code formatter – для автоматического форматирования кода.
• ESLint – для линтинга и исправления ошибок кода.
• Next.js snippets – предоставляет готовые шаблоны для работы с Next.js.

Для установки откройте боковую панель расширений (Ctrl+Shift+X), введите название расширения, нажмите его и нажмите Install:

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

Настройка этих инструментов помогает поддерживать единый стиль кода и автоматически исправлять ошибки.

Установите зависимости для плагинов, выполнив эту команду в директории проекта:

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

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

Создайте файл .eslintrc.json в корне проекта:

{
    "extends": [
        "next",
        "next/core-web-vitals",
        "prettier"
    ],
    "plugins": [
        "prettier"
    ],
    "rules": {
        "prettier/prettier": [
            "error"
        ]
    }
}

Эта конфигурация добавляет правила Prettier в ESLint.

Создайте файл .prettierrc в корне проекта с настройками Prettier:

{
    "singleQuote": true,
    "trailingComma": "all"
}

1. Если вы хотите, чтобы автоматическое форматирование кода происходило при сохранении любых проектов VSCode, добавьте следующие строки в файл settings.json:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

Если вы хотите сохранить эти настройки только для текущего проекта то в его корне создайте папку .vscode, если она ещё не существует и внутри неё создайте файл settings.json.

Теперь форматирование будет происходить при каждом сохранении файла (Ctrl+S) или при вызове форматирования через Format Document в контекстном меню файла.

Пример кода до форматирования:

Пример кода после форматирования:

Шаг 4. Настройка отладки

Для удобства отладки приложений Next.js создайте файл launch.json в папке .vscode:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "npm run dev"
    },
    {
      "name": "Next.js: debug client-side",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    }
  ]
}

Эта конфигурация позволяет запускать серверную и клиентскую отладку прямо в VSCode.

Проверка отладки в режимеServer-side

Чтобы убедиться, что отладка работает, откройте панель отладки, в выпадающем списке сверху выберите Server-Side режим и нажмите на зелёный треугольник слева от режима:

Сервер должен успешно стартовать. Об этом должны свидетельствовать сообщения в открывшейся консоли:

В исходном коде отлаживаемой страницы кликните на поле слева от строчки, на которой хотите остановить выполнение, чтобы там появилась красная точка:

Откройте отлаживаемую страницу в браузере и перейдите обратно в VSCode, который к этому моменту уже должен находиться в режиме отладки:

Для прекращения отладки, нажмите на красный квадратик на панели:

Проверка отладки в режимеServer-side

В этом режиме всё аналогично за исключением двух моментов:

1. До начала отладки нужно вручную запустить сервер командой

npm run dev

2. Точки останова должны быть установлены в коде, который выполняется на клиентской стороне, например в обработчиках нажатия на кнопки.

Заключение

Следуя этой инструкции, вы настроите VSCode для удобной работы с Next.js. Установленные инструменты и настройки помогут избежать проблем с форматированием кода, упростят отладку и сделают процесс разработки более эффективным. 

Если вам интересно узнать о том, существует ли React-разработка за пределами графического интерфейса можете ознакомиться со статьёй о настройке Vim для React и других инструментах разработки.