QPEL.ai

Настройка VS Code для комфортной разработки

Курс: MCP: Создание ИИ-агентов на практике (Python & TypeScript)12+

Настройка среды разработки — это как подготовка рабочего стола перед важным проектом. Чем удобнее и продуманнее всё разложено, тем быстрее и точнее вы справитесь с задачей. Сейчас мы настроим VS Code так, чтобы он стал надёжным помощником в создании MCP-агентов на Python и TypeScript.

Мы уже установили Python с виртуальными окружениями и Node.js с npm — теперь важно, чтобы редактор кода "понимал" эти инструменты и подсказывал нам, а не мешал. Уже через 10 минут вы почувствуете разницу: автодополнение будет предлагать нужные методы, ошибки в коде — подсвечиваться мгновенно, а терминал — работать прямо внутри редактора.

Почему именно VS Code

VS Code — один из самых популярных редакторов в 2025 году, особенно среди разработчиков ИИ-агентов. Он лёгкий, гибкий и поддерживает огромное количество расширений. Главное — правильно его настроить. Без настройки даже опытный разработчик тратит время на исправление мелочей, которые могли бы решаться автоматически.

Совет: Подумайте о VS Code как о "кабинете разработчика ИИ-агентов". Всё должно быть под рукой: и терминал, и подсветка синтаксиса, и инструменты для работы с кодом.

Расширения VS Code: основа комфортной разработки

Расширения VS Code — это как плагины для браузера, но для редактора кода. Они добавляют новые функции: подсветку, автодополнение, форматирование, интеграцию с Docker и многое другое.

Вот ключевые расширения, которые нам понадобятся:

НазваниеДля чего нужно
Python (ms-python.python)Поддержка Python, запуск скриптов, отладка, выбор интерпретатора
Pylance (ms-python.vscode-pylance)Умная подсветка, автодополнение, проверка типов
TypeScript (встроен)Поддержка современного TypeScript 5.5+, проверка типов
ESLint (dbaeumer.vscode-eslint)Проверка кода на ошибки в реальном времени
Prettier (esbenp.prettier-vscode)Автоматическое форматирование кода
Docker (ms-azuretools.vscode-docker)Управление контейнерами, запуск образов
GitLens (eamodio.gitlens)Улучшенная работа с Git: история изменений, blame, коммиты

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

Подсветка синтаксиса и автодополнение

Подсветка синтаксиса — это когда разные части кода (переменные, функции, ключевые слова) отображаются разными цветами. Это помогает быстрее читать и понимать код.

Без расширений VS Code может не распознать, что вы пишете на Python или TypeScript. Например:

def get_user_data(id):
    return fetch(f"/api/users/{id}")

Без Pylance и Python-расширения:

  • Переменная id — просто серый текст
  • fetch — не подсвечивается как ошибка, даже если функция не определена
  • Нет подсказок при вводе

С расширениями:

  • def и return — выделены как ключевые слова
  • id — курсор показывает тип (если он указан)
  • fetch — подсвечивается красным, если функция не найдена
  • При вводе — появляются подсказки

То же самое с TypeScript:

interface User {
  id: number;
  name: string;
}

function greet(user: User): string {
  return `Привет, ${user.name}!`;
}

С TypeScript и ESLint:

  • interface, function — подсвечены
  • user.name — подсказка: "свойство строки"
  • Ошибка, если передать greet({ id: 1 }) без name

Интеграция терминала: работаем не переключаясь

Интеграция терминала — это когда командная строка открывается прямо в VS Code. Вам не нужно переключаться между окнами, чтобы запустить сервер или установить пакет.

Мы уже установили Node.js и npm, а также Python с venv. Теперь важно, чтобы терминал в VS Code "видел" эти инструменты.

Как проверить:

  1. Откройте терминал в VS Code: `Ctrl + `` (или через меню Terminal → New Terminal)
  2. Введите: 
    python --version
    Должно показать: Python 3.12.x
  3. Проверьте npm: 
    npm --version
    Должно показать версию (например, 9.8.0)

Совет: Если python не найден, возможно, выбран не тот интерпретатор. Нажмите Ctrl+Shift+P, введите "Python: Select Interpreter" и выберите нужный (например, из папки .venv).

Почему это важно?

Позже мы будем:

  • Запускать MCP-серверы локально
  • Устанавливать пакеты через npm install и pip install
  • Проверять API-запросы через curl

Всё это будет удобнее делать в интегрированном терминале.

Настройка среды под MCP-разработку

Теперь соберём всё вместе.

Шаг 1: Выбор интерпретатора

  1. Откройте папку с проектом
  2. Нажмите Ctrl+Shift+P
  3. Введите: Python: Select Interpreter
  4. Выберите интерпретатор из вашего venv (например, ./.venv/bin/python)

Шаг 2: Настройка форматирования

  1. Установите Prettier и Black (через pip install black)
  2. В настройках VS Code (Ctrl+,) найдите:
    • Default Formatter → выберите Prettier для TypeScript, Black для Python
    • Включите Format On Save

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

Шаг 3: Проверка работы

Создайте тестовый файл test.py:

def hello(name: str) -> str:
    return f"Привет, {name}!"

print(hello("Агент"))

Если:

  • str подсвечены как типы
  • Нет жёлтых волнистых линий (ошибки Pylance)
  • При сохранении код не "прыгает" (форматирование работает)

— значит, всё настроено правильно.

Что дальше?

Теперь у нас есть надёжная и комфортная среда разработки. Мы можем писать код на Python и TypeScript, запускать команды и видеть ошибки до запуска. Это фундамент для всего, что будет дальше.

В следующей теме — Основы работы с API: HTTP, JSON и аутентификация — мы начнём писать код, который будет общаться с внешними сервисами. Именно в этом и помогут наши настройки: подсветка синтаксиса упростит работу с JSON, а интегрированный терминал позволит быстро тестировать запросы.

Хук на продолжение: Представьте, что через пару шагов вы сможете написать агента, который сам будет получать данные из API, обрабатывать их и возвращать результат — а VS Code будет помогать вам на каждом этапе.

Готовы двигаться дальше?