VSCode — бесплатный редактор от Microsoft с поддержкой Git, терминала и отладки

Visual Studio Code (VS Code) — это бесплатный кроссплатформенный редактор исходного кода, разработанный Microsoft. Он стал одним из самых популярных инструментов среди разработчиков благодаря своей универсальности, производительности и богатому функционалу. Visual Studio Code можно скачать на официальной странице VScode.

VS Code поддерживает более 30 языков программирования "из коробки", включая JavaScript, TypeScript, HTML, CSS, Python, Java, C++, Go, Rust, PHP, ReactJS: Что это такое и с чего начать изучение библиотеки и многие другие. Благодаря расширениям можно добавить поддержку практически любого языка программирования.

Функционал и возможности:

  • VS Code имеет встроенную поддержку Git, позволяющую управлять репозиториями, делать коммиты и просматривать историю изменений прямо из редактора.
  • Встроенный терминал. VS Code имеет интегрированный терминал, позволяющий выполнять команды прямо из редактора без необходимости переключаться между приложениями. Можно открывать несколько терминалов одновременно, что удобно при работе над сложными проектами.
  • Отладка кода. Редактор предоставляет мощные инструменты для отладки: установка точек останова, пошаговое выполнение кода, просмотр значений переменных в реальном времени. Поддерживается отладка для множества языков программирования и фреймворков.
  • Поддерживает очень хорошо Чем полезен Markdown: простой формат разметки для Git, IDE и блогов, жаль что нет WYSIWYG редактора, для предпросмотра файла в формате Markdown открой его .md файл и нажми:
    Ctrl+Shift+V — предпросмотр.
    Ctrl+K, затем V — открыть редактор и предпросмотр рядом. Или нажми кнопку в меню окна.

    Все изменения сразу будут отображаться справа. Все рекомендуют установить плагин Markdown All in One (добавляет горячие клавиши, содержание, автонумерацию, удобное редактирование) - я не стал, потому, что смысл этого плагина от меня ускользнул:)

Следуем официальной документации Visual Studio Code on Linux. Проще всего установить через Snap Store одной командой:

sudo snap install --classic code # or code-insiders

В конце вы получите уведомление об успешной становке.

code 6609ac3d from Visual Studio Code (vscode✓) installed

После установки Snap daemon автоматически обновляет VS Code в фоновом режиме. Также вы будите автоматически получать уведомление об обновлении продукта.

Нажимаем сочетание кнопок с Shift + ! и должен появится выпадающий список Emmet. Поддержка фрагментов и расширений Emmet встроена прямо в Visual Studio Code, никаких расширений не требуется. Подробнее в официальной документации Emmet in Visual Studio Code.

Большинство действий Emmet можно использовать и с мультикурсорами:

Visual Studio Code подходит для разработки на PHP. Вы получаете такие функции, как подсветка синтаксиса и сопоставление скобок, IntelliSense (дополнение кода) и сниппеты из коробки, а также можете добавить больше функциональности с помощью расширений VS Code, созданных сообществом.

https://code.visualstudio.com/docs/languages/php

Я считаю, что приведённые горячие клавиши — одни из самых полезных для повседневной работы в VS Code. Особенно полезны команды для комментирования, дублирования и удаления строк, так как они значительно ускоряют процесс редактирования кода. Конечно, в зависимости от ваших личных предпочтений и конфигурации редактора можно настроить свои собственные комбинации, но базовые команды остаются универсальными и удобными для большинства разработчиков.

Как нажимать сочетания вида Ctrl + K Ctrl + S? Это последовательное нажатие, а не одновременное! Сначала зажми Ctrl и нажми K, но не отпускай Ctrl. Затем, всё ещё удерживая Ctrl, нажми S. Теперь можешь отпустить клавиши – откроется окно "Keyboard Shortcuts" (Настройки горячих клавиш).

Список часто используемых горячих клавиш в Visual Studio Code:

  • Закомментировать/раскомментировать строку → `Ctrl + /`
  • Закомментировать/раскомментировать блок кода → ` Ctrl + Shift + A`
  • Дублировать строку → `Shift + Alt + ↓` (вниз) / `Shift + Alt + ↑` (вверх)
  • Удалить строку → `Ctrl + Shift + K`
  • Переместить строку вверх/вниз → `Alt + ↑ / Alt + ↓`
  • Выделить слово → `Ctrl + D`
  • Выделить все вхождения слова → `Ctrl + Shift + L`
  • Выделить текущую строку → `Ctrl + L`
  • Выделить всё между скобками → `Ctrl + Shift + M`
  • Разделить строку по курсору → `Ctrl + Enter`
  • Создать новый файл → `Ctrl + N`
  • Открыть файл → `Ctrl + O`
  • Закрыть текущую вкладку → `Ctrl + W`
  • Переключение между вкладками → `Ctrl + Tab` (вперёд) / `Ctrl + Shift + Tab` (назад)
  • Поиск в файле → `Ctrl + F`
  • Поиск и замена → `Ctrl + H`
  • Переход к строке → `Ctrl + G`
  • Переход к файлу → `Ctrl + P`
  • Открыть терминал → `Ctrl + ~`
  • Закрыть терминал → `Ctrl + Shift + ` (backtick)

Инструкция появилась для решения проблемы поддержки уже запущенного веб проекта на PHP (сайт с базой банных) расположенного на удаленном VPS сервере (доступ только SSH).

Чтобы видеть код проекта в удобном графическом интерфейсе, а не в черной консоли, используйте официальное расширение для VS Code — Remote - SSH (от Microsoft).

  1. В VS Code зайдите во вкладку Extensions (расширения) слева (Ctrl + Shift + X).
  2. Найдите и установите Remote - SSH.
  3. Нажмите в левом нижнем углу на синюю кнопку со стрелочками (или Ctrl + Shift + P → введите Remote-SSH: Connect to Host…).
  4. Введите данные вашего VPS (root@ip_вашего_сервера) и пароль/SSH-ключ.
  5. Выберите File → Open Folder и откройте папку с вашим PHP-проектом (например, /var/www/my-project).

Теперь перед вами привычный VS Code: слева дерево папок вашего PHP-сайта, сверху вкладки с файлами, работает вся подсветка синтаксиса.

Вот здесь и происходит совмещение консольной магии и визуального удобства:

  1. В VS Code откройте встроенный терминал (меню Terminal → New Terminal или нажав Ctrl + ` ). Этот терминал уже открыт внутри вашего VPS и в папке вашего проекта!
  2. Прямо там пишите команду для запуска:
    claude

Вам не нужно читать код в консоли.

  1. Вы пишете в терминале обычным текстом задачу:
    Claude, найди где у меня обрабатывается авторизация, и добавь туда проверку на пустые поля. Саму базу MySQL не трогай, только PHP-код.
  2. Claude Code начнет шуршать в терминале, анализировать файлы.
  3. Самое главное: Как только он начнет вносить правки, вы прямо глазами в VS Code увидите, что файлы в дереве слева подсветились (как при работе с Git), а если этот файл у вас открыт на экране, вы в реальном времени увидите изменения.
  4. В терминале Claude Code просто выведет аккуратный список того, что он сделал, и спросит: "Я всё исправил, запустить проверку кода?".

Вы можете в любой момент свернуть терминал, спокойно пройтись по PHP-файлам в VS Code, посмотреть, устраивает ли вас созданный код, поправить что-то руками и только потом согласиться.

Это дает 100% визуальный контроль и избавляет от необходимости «программировать в консоли». На выходе вы получаете чистый PHP-код в привычном редакторе.

При использовании CLI-агента Claude Code, консольных утилит или интеграций в IDE сетевой трафик маршрутизируется в обход настроек системного браузера. Для корректной работы требуется явная конфигурация сетевого слоя.

Для выбора стабильных дата-центровых или ISP-серверов с низкой задержкой используйте сводную таблицу и подборку прокси-провайдеров.

Проброс трафика выполняется через стандартные переменные окружения сессии bash/zsh. Задайте их перед вызовом CLI:

# Системные переменные окружения для HTTP/HTTPS сессий
export HTTP_PROXY="http://username:password@proxy_host:port"
export HTTPS_PROXY="http://username:password@proxy_host:port"
 
# Проверка подключения Claude Code
claude

Для работы прокси внутри редактора и встроенного терминала параметры задаются в пользовательском файле конфигурации`settings.json:

{
  "http.proxy": "http://username:password@proxy_host:port",
  "http.proxyStrictSSL": false,
  "http.proxySupport": "on"
}

При использовании авторизации с логином и паролем убедитесь, что спецсимволы в пароле прошли URL-encoding (например, @ меняется на %40), чтобы избежать ошибок аутентификации HTTP: 407 Proxy Authentication Required.

📌 Удобный подбор VPS по параметрам доступен на DIEGfinder.com - официальном инструменте проекта DIEG. Это часть единой экосистемы, созданной для того, чтобы помочь быстро найти подходящий VPS/VDS сервер для любых задач хостинга.

📌 Для тестирования скриптов, установщиков VPN и Python-ботов рекомендуем использовать надежные VPS на короткий срок. Подробнее о быстрой аренде VPS для экспериментов - читайте здесь.

💥 Подпишись в Телеграм 💥 и задай вопрос по сайтам и хостингам бесплатно!