Как подключить VSCode к GitLab, Docker, Jupyter

Разработчики каждый день открывают VSCode и начинают писать код. Но редактор сам по себе — это просто текстовый блокнот с подсветкой синтаксиса.

Продуктивность разработчика повышается, когда к VSCode подключены инструменты для командной работы, контейнеризации и анализа данных. В статье по шагам разобрали, как интегрировать VSCode с GitLab, Docker и Jupyter.

Зачем всё это подключать

VSCode из коробки умеет работать с Git. Но когда ваш репозиторий лежит на GitLab, хочется создавать merge request прямо из редактора, просматривать pipeline, работать с issues.

Docker решает проблему «у меня работает, а у тебя нет». Вы пишете код в контейнере с одними версиями библиотек, и любой член команды запустит точно такое же окружение.

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

Как подключить VSCode к GitLab

Шаг 1. Устанавливаем расширение

Откройте VSCode и нажмите Ctrl+Shift+X. В поиске введите «GitLab Workflow». Установите официальное расширение. После установки в левой панели появится иконка GitLab.

Шаг 2. Получаем токен доступа

Расширению нужен способ общаться с вашим GitLab-сервером. Для этого создадим персональный токен:

1. Зайдите в GitLab через браузер.
2. Кликните на аватар >> Settings >> Access Tokens.
3. Придумайте название токена.
4. Выберите срок действия.
5. Отметьте галочками права доступа: api, read_user, read_repository, write_repository.
6. Нажмите «Create personal access token».
7. Скопируйте токен — он покажется только один раз.

Шаг 3. Настраиваем расширение

Вернитесь в VSCode. Нажмите Ctrl+Shift+P и введите «GitLab: Add Account». Расширение попросит два параметра:

• GitLab instance URL — адрес вашего GitLab (например, https://gitlab.com или адрес корпоративного сервера).
• Personal Access Token — токен, который только что создали.

Вставьте токен и нажмите Enter. Если всё правильно, в статус-баре внизу появится ваше имя пользователя GitLab.

Шаг 4. Работаем с проектом

Попробуем клонировать проект. Нажмите Ctrl+Shift+P и выберите «GitLab: Clone from GitLab». Расширение покажет список доступных проектов. Выберите нужный, укажите папку для клонирования.

Теперь вам доступны функции Git:

• Pipeline — в боковой панели GitLab видны все запущенные сборки, их статусы и логи.
• Issues — создавайте, редактируйте и закрывайте задачи прямо из редактора.
• Merge requests — посмотрите список MR, оставьте комментарии к коду, одобрите изменения.
• Snippets — сохраняйте фрагменты кода для повторного использования.

Как подключить VSCode к Docker

Редактор умеет запускать код прямо внутри контейнера. Вы редактируете файлы, а выполняются они в изолированной среде с выбранными настройками.

Шаг 1. Подготовка

Установите Docker Desktop с официального сайта. После установки убедитесь, что Docker запущен — в системном трее должна появиться иконка кита.

В VSCode установите два расширения:

• Docker.
• Dev Containers.

Шаг 2. Создаём Dockerfile

В корне проекта создайте файл Dockerfile. Пример для Python-проекта:

			FROM python:3.11-slim

WORKDIR /app

COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt

COPY . .

CMD ["python", "main.py"]
		

Этот файл говорит Docker:

1. Возьми базовый образ Python 3.11.
2. Создай рабочую директорию /app.
3. Скопируй и установи зависимости.
4. Скопируй весь код проекта.
5. При запуске выполни команду python main.py.

Шаг 3. Настраиваем Dev Container

Создайте папку .devcontainer в корне проекта. Внутри создайте файл devcontainer.json:

			{
  "name": "Python Dev Environment",
  "build": {
    "dockerfile": "../Dockerfile",
    "context": ".."
  },
  "customizations": {
    "vscode": {
      "extensions": [
        "ms-python.python",
        "ms-python.vscode-pylance"
      ],
      "settings": {
        "python.linting.enabled": true,
        "python.linting.pylintEnabled": true
      }
    }
  },
  "forwardPorts": [8000],
  "postCreateCommand": "pip install -e .",
  "remoteUser": "root"
}
		

Конфигурация использует ваш Dockerfile для сборки контейнера. Она автоматически устанавливает Python-расширения внутри контейнера, пробрасывает порт 8000 (если у вас веб-приложение) и выполняет команду после создания контейнера.

Шаг 4. Запускаем разработку в контейнере

Нажмите Ctrl+Shift+P и выберите «Dev Containers: Reopen in Container». Редактор соберёт Docker-образ по вашему Dockerfile, запустит контейнер, подключится к нему и откроет ваш проект уже внутри контейнера.

Теперь весь код выполняется в изолированной среде. Терминал в VSCode работает внутри контейнера. Расширения устанавливаются в контейнер, отладчик запускает код там же.

Как подключить VSCode к Jupyter

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

Шаг 1. Установка

Установите расширение «Jupyter» от Microsoft. Оно автоматически подтянет все необходимые зависимости.

В терминале установите Jupyter и ipykernel:

			pip install jupyter ipykernel
		

Шаг 2. Создаём первый ноутбук

Создайте файл с расширением .ipynb или нажмите Ctrl+Shift+P >> «Create: New Jupyter Notebook».

VSCode откроет интерфейс ноутбука. Вверху вы увидите панель инструментов с выбором ядра, кнопки запуска и добавления ячеек.

Шаг 3. Выбираем ядро

Кликните на «Select Kernel» в правом верхнем углу. VSCode покажет список доступных интерпретаторов:

• Локальные Python-окружения.
• Виртуальные окружения (venv, conda).
• Docker-контейнеры (если настроены).
• Удалённые Jupyter-серверы.

Выберите нужное окружение. VSCode запомнит выбор для этого ноутбука.

Шаг 4. Пишем и выполняем код

В ячейке напишите код:

			import pandas as pd
import matplotlib.pyplot as plt

data = pd.DataFrame({
    'x': range(10),
    'y': [i**2 for i in range(10)]
})

plt.figure(figsize=(10, 6))
plt.plot(data['x'], data['y'])
plt.title('Простой график')
plt.show()
		

Нажмите Shift+Enter для выполнения ячейки. График отобразится прямо под кодом.

Для Python-файлов можно включить интерактивный режим. Добавьте комментарий # %% в .py файл:

			# %%
import numpy as np
print("Первая ячейка")

# %%
data = np.random.randn(100)
print(f"Среднее: {data.mean()}")

# %%
import matplotlib.pyplot as plt
plt.hist(data, bins=20)
plt.show()
		

VSCode покажет кнопки «Run Cell» над каждым блоком. Теперь можно выполнять код частям.

Что в итоге

Первая настройка VSCode с GitLab, Docker и Jupyter занимает 30-40 минут. В итоге вы получаете единое рабочее пространство для ваших задач разработки.

Начните с GitLab и научитесь создавать merge requests из редактора. Потом добавьте Docker для одного проекта. Когда освоитесь, подключите Jupyter для работы с данными. Инструменты решают разные задачи, а VSCode объединяет их функции в одном интерфейсе.

Возьмите проект и последовательно подключите каждый инструмент. Через неделю удивитесь, как раньше работали без этой связки. Код пишется быстрее, ошибок меньше, а переключений между окнами почти нет.

Если что-то непонятно или не получается настроить — пишите в комментариях, разберёмся вместе!