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 в Linux
Следуем официальной документации 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 в фоновом режиме. Также вы будите автоматически получать уведомление об обновлении продукта.
Как в VS Code, быстро создать HTML шаблон?
Нажимаем сочетание кнопок с Shift + ! и должен появится выпадающий список Emmet. Поддержка фрагментов и расширений Emmet встроена прямо в Visual Studio Code, никаких расширений не требуется. Подробнее в официальной документации Emmet in Visual Studio Code.
Большинство действий Emmet можно использовать и с мультикурсорами:
PHP в Visual Studio
Visual Studio Code подходит для разработки на PHP. Вы получаете такие функции, как подсветка синтаксиса и сопоставление скобок, IntelliSense (дополнение кода) и сниппеты из коробки, а также можете добавить больше функциональности с помощью расширений VS Code, созданных сообществом.
Горячие клавиши Visual Studio Code
Я считаю, что приведённые горячие клавиши — одни из самых полезных для повседневной работы в 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)
Настройка VS Code и Claude Code на вашем VPS
Инструкция появилась для решения проблемы поддержки уже запущенного веб проекта на PHP (сайт с базой банных) расположенного на удаленном VPS сервере (доступ только SSH).
Шаг 1. Подключаем VS Code к удаленному VPS
Чтобы видеть код проекта в удобном графическом интерфейсе, а не в черной консоли, используйте официальное расширение для VS Code — Remote - SSH (от Microsoft).
- В VS Code зайдите во вкладку Extensions (расширения) слева (Ctrl + Shift + X).
- Найдите и установите Remote - SSH.
- Нажмите в левом нижнем углу на синюю кнопку со стрелочками (или Ctrl + Shift + P → введите Remote-SSH: Connect to Host…).
- Введите данные вашего VPS (root@ip_вашего_сервера) и пароль/SSH-ключ.
- Выберите File → Open Folder и откройте папку с вашим PHP-проектом (например, /var/www/my-project).
Теперь перед вами привычный VS Code: слева дерево папок вашего PHP-сайта, сверху вкладки с файлами, работает вся подсветка синтаксиса.
Шаг 2. Запускаем Claude Code во встроенном терминале
Вот здесь и происходит совмещение консольной магии и визуального удобства:
- В VS Code откройте встроенный терминал (меню Terminal → New Terminal или нажав Ctrl + ` ). Этот терминал уже открыт внутри вашего VPS и в папке вашего проекта!
- Прямо там пишите команду для запуска:
claude
Шаг 3. Как это выглядит в работе (Без чтения "консольного" кода)
Вам не нужно читать код в консоли.
- Вы пишете в терминале обычным текстом задачу:
Claude, найди где у меня обрабатывается авторизация, и добавь туда проверку на пустые поля. Саму базу MySQL не трогай, только PHP-код.
- Claude Code начнет шуршать в терминале, анализировать файлы.
- Самое главное: Как только он начнет вносить правки, вы прямо глазами в VS Code увидите, что файлы в дереве слева подсветились (как при работе с Git), а если этот файл у вас открыт на экране, вы в реальном времени увидите изменения.
- В терминале Claude Code просто выведет аккуратный список того, что он сделал, и спросит: "Я всё исправил, запустить проверку кода?".
Вы можете в любой момент свернуть терминал, спокойно пройтись по PHP-файлам в VS Code, посмотреть, устраивает ли вас созданный код, поправить что-то руками и только потом согласиться.
Это дает 100% визуальный контроль и избавляет от необходимости «программировать в консоли». На выходе вы получаете чистый PHP-код в привычном редакторе.
Настройка прокси для Claude Code и CLI-инструментов
При использовании CLI-агента Claude Code, консольных утилит или интеграций в IDE сетевой трафик маршрутизируется в обход настроек системного браузера. Для корректной работы требуется явная конфигурация сетевого слоя.
Для выбора стабильных дата-центровых или ISP-серверов с низкой задержкой используйте сводную таблицу и подборку прокси-провайдеров.
1. Терминал (Linux / macOS / WSL)
Проброс трафика выполняется через стандартные переменные окружения сессии 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
2. Конфигурация в VS Code
Для работы прокси внутри редактора и встроенного терминала параметры задаются в пользовательском файле конфигурации`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 для экспериментов - читайте здесь.
💥 Подпишись в Телеграм 💥 и задай вопрос по сайтам и хостингам бесплатно!