Visual Studio Code (VS Code) — бесплатный редактор кода от Microsoft для Windows, macOS и Linux. Его скачивают с официального сайта code.visualstudio.com, интерфейс переводят на русский пакетом Russian Language Pack, а возможности IDE добавляют расширениями. Веб-разработчику для старта хватает пяти: ESLint, Prettier, Live Server, REST Client и Remote - SSH.
Ниже — установка на трёх системах, русификация, настройки, которые стоит поменять сразу, горячие клавиши, терминал и Git, а затем то, чего нет в типовых обзорах: как из редактора смотреть HTTP-заголовки сайта, править файлы прямо на сервере и подключить ИИ-ассистента вроде DeepSeek вместе с MCP-серверами.
Что такое VS Code и чем он отличается от Visual Studio
Названия похожи, но это два разных продукта. VS Code — лёгкий редактор, который превращается в среду под нужный язык за счёт расширений. Visual Studio — полноценная IDE, исторически заточенная под .NET, C# и C++. Исходный код редактора открыт в проекте Code - OSS под лицензией MIT; сборка, которую раздаёт Microsoft, распространяется под собственной лицензией компании и включает телеметрию и доступ к Marketplace.
| Параметр | VS Code | Visual Studio |
|---|---|---|
| Тип | Редактор кода с расширениями | Интегрированная среда разработки (IDE) |
| Системы | Windows, macOS, Linux | Windows (версия для Mac снята с поддержки в 2024 году) |
| Цена | Бесплатно | Community бесплатна с лицензионными ограничениями, Professional и Enterprise платные |
| Основные языки | Любые: JavaScript, TypeScript, Python, PHP, Go и другие через расширения | C#, .NET, C++, разработка под Windows |
| Размер установки | Небольшой дистрибутив | Зависит от выбранных рабочих нагрузок, обычно намного больше |
| Кому подходит | Веб-разработка, скрипты, правка конфигов, работа на серверах | Крупные .NET-проекты, десктопные приложения, игровые движки |
Если вы делаете сайты, пишете на JavaScript, PHP или Python и правите конфиги nginx, вам нужен именно VS Code. Visual Studio имеет смысл ставить, когда проект изначально построен на .NET.
Как установить VS Code на Windows, macOS и Linux
Скачивайте редактор только с официальной страницы code.visualstudio.com/Download. Сборки с файлообменников и «портативные версии» с чужих сайтов — классический способ получить троян вместе с редактором.
Windows
На странице загрузки есть User Installer (ставится в профиль пользователя, права администратора не нужны) и System Installer (для всех пользователей компьютера). В мастере установки отметьте два пункта: добавление в PATH, чтобы работала команда code, и пункт контекстного меню «Открыть с помощью Code» для файлов и папок. Альтернатива — менеджер пакетов:
winget install -e --id Microsoft.VisualStudioCodemacOS
Скачайте архив, распакуйте и перенесите Visual Studio Code.app в папку «Программы». Чтобы открывать проекты из терминала, откройте палитру команд (Cmd+Shift+P) и выполните Shell Command: Install 'code' command in PATH. Через Homebrew:
brew install --cask visual-studio-codeLinux
Для Debian и Ubuntu есть пакет .deb, для Fedora и RHEL — .rpm. Скачанный .deb ставится так:
sudo apt install ./code_*.debУстановщик заодно подключает репозиторий Microsoft, и дальше редактор обновляется вместе с системой. Есть и вариант через Snap: sudo snap install --classic code.
После установки проверьте, что команда доступна: code --version. Команда code . открывает текущую папку как проект — это самый быстрый способ начать работу.
Как в VS Code поменять язык на русский
Русский интерфейс добавляется официальным пакетом локализации от Microsoft. Порядок действий:
- Нажмите Ctrl+Shift+P (на macOS Cmd+Shift+P) — откроется палитра команд.
- Начните набирать Configure Display Language и выберите эту команду.
- В списке выберите «русский». Если пакет ещё не установлен, редактор предложит поставить Russian Language Pack for Visual Studio Code.
- Нажмите Restart — после перезапуска меню, настройки и сообщения будут на русском.
Часто редактор сам предлагает установить пакет при первом запуске, если язык системы русский. Вернуть английский можно той же командой — после русификации она называется «Настроить язык отображения»: выберите en и перезапустите. Выбор хранится в файле argv.json в параметре "locale".
Совет практика: названия команд в палитре работают и на английском даже в русском интерфейсе. Большинство инструкций в сети написаны для английской версии, поэтому искать команду по английскому названию удобнее.
Базовые настройки VS Code, которые стоит поменять сразу
Окно настроек открывается по Ctrl+, (запятая). Но надёжнее править файл напрямую: палитра команд → Preferences: Open User Settings (JSON). Минимальный набор для веб-разработки:
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"files.autoSave": "onFocusChange",
"files.trimTrailingWhitespace": true,
"files.insertFinalNewline": true,
"telemetry.telemetryLevel": "off"
}Что это даёт: код форматируется Prettier при каждом сохранении, ESLint исправляет то, что умеет исправить автоматически, файл сохраняется при переключении на другое окно, лишние пробелы в конце строк удаляются, а телеметрия выключена. Строки с Prettier и ESLint начнут работать после установки соответствующих расширений.
Настройки бывают двух уровней. Пользовательские действуют во всех проектах. Настройки рабочей области лежат в .vscode/settings.json внутри проекта — их можно закоммитить, и у всей команды будет одинаковое форматирование. Чтобы не настраивать редактор заново на другом компьютере, включите встроенную синхронизацию настроек (Settings Sync) через значок учётной записи внизу слева — вход через GitHub или аккаунт Microsoft.
Горячие клавиши VS Code
Главная клавиша — палитра команд: через неё доступно всё, включая команды расширений, и не нужно помнить, в каком меню что лежит. Остальные сочетания экономят время на ежедневных действиях.
| Действие | Windows / Linux | macOS |
|---|---|---|
| Палитра команд | Ctrl+Shift+P или F1 | Cmd+Shift+P |
| Быстро открыть файл по имени | Ctrl+P | Cmd+P |
| Показать или скрыть терминал | Ctrl+` (Ctrl+ё в русской раскладке) | Ctrl+` |
| Поиск по всем файлам | Ctrl+Shift+F | Cmd+Shift+F |
| Выделить следующее такое же слово | Ctrl+D | Cmd+D |
| Закомментировать строку | Ctrl+/ | Cmd+/ |
| Переместить строку вверх или вниз | Alt+↑ / Alt+↓ | Option+↑ / Option+↓ |
| Отформатировать документ | Shift+Alt+F (Windows), Ctrl+Shift+I (Linux) | Shift+Option+F |
| Перейти к определению / переименовать символ | F12 / F2 | F12 / F2 |
| Разделить редактор | Ctrl+\ | Cmd+\ |
| Все сочетания клавиш | Ctrl+K, затем Ctrl+S | Cmd+K, затем Cmd+S |
Дополнительные курсоры ставятся щелчком с зажатым Alt (Option на Mac) — удобно, когда нужно одновременно поправить несколько похожих строк.
Как писать HTML в VS Code и открыть страницу в браузере
Поддержка HTML и CSS встроена, ставить ничего не нужно. Создайте файл index.html, наберите восклицательный знак и примите подсказку Emmet клавишей Enter или Tab — редактор развернёт каркас HTML5 с тегами <!DOCTYPE html>, <head> и <body>. Emmet понимает и более сложные сокращения: ul>li*3 превратится в список из трёх пунктов, div.card — в блок с классом card.
Закрывающий тег редактор вставляет сам. Чтобы при переименовании открывающего тега менялся и парный, включите "editor.linkedEditing": true — отдельное расширение для этого больше не требуется.
Посмотреть результат можно тремя способами:
- Live Server — после установки в строке состояния появляется кнопка Go Live. Она запускает локальный сервер и открывает страницу в браузере; при сохранении файла страница перезагружается сама.
- Live Preview от Microsoft — показывает страницу во вкладке прямо внутри редактора.
- Открыть файл в браузере напрямую. Это работает для простой вёрстки, но не для страниц, которые загружают данные через fetch: у адресов
file://другие правила безопасности, чем у настоящего сервера.
Как запустить JavaScript в Visual Studio Code
Отдельно «устанавливать JavaScript в VS Code» не нужно: подсветка, подсказки и проверка синтаксиса встроены. Вопрос в другом — где выполнять код. JavaScript для страницы выполняется браузером: подключите скрипт тегом <script src="app.js"></script>, откройте страницу через Live Server и смотрите вывод console.log в инструментах разработчика браузера (F12).
Чтобы выполнять JavaScript вне браузера, установите Node.js с официального сайта nodejs.org и проверьте установку в терминале редактора:
node -v
npm -v
node app.jsДля отладки откройте файл и нажмите F5, выберите Node.js — редактор запустит скрипт с точками останова, которые ставятся щелчком слева от номера строки. Ещё удобнее JavaScript Debug Terminal (палитра команд → Debug: JavaScript Debug Terminal): любая команда node или npm run в нём сразу запускается под отладчиком. Если вы путаете JavaScript с Java, у нас есть разбор чем Java отличается от JavaScript.
Встроенный терминал и Git
Терминал открывается по Ctrl+` и запускается в папке проекта. На Windows по умолчанию используется PowerShell; сменить оболочку на Git Bash, cmd или WSL можно командой Terminal: Select Default Profile. Несколько терминалов открываются кнопкой «+» на панели, их можно разделить на соседние окна.
Для работы с Git сам Git должен быть установлен в системе: на Windows — с git-scm.com, на Linux — sudo apt install git, на macOS — через Xcode Command Line Tools (xcode-select --install). Дальше всё делается в панели «Система управления версиями» (Ctrl+Shift+G): кнопка инициализации репозитория, индексация изменений значком «+», сообщение коммита и Ctrl+Enter для фиксации. Изменённые строки отмечаются цветной полосой слева от кода, а щелчок по файлу в списке показывает построчный diff.
Полезные расширения VS Code для веб-разработчика
Расширения ставятся из панели Extensions (Ctrl+Shift+X) или из терминала по идентификатору. Перед установкой смотрите на издателя и число установок: в Marketplace встречаются клоны популярных расширений.
| Расширение | Идентификатор | Зачем |
|---|---|---|
| ESLint | dbaeumer.vscode-eslint | Находит ошибки и нарушения стиля в JavaScript и TypeScript прямо при наборе |
| Prettier - Code formatter | esbenp.prettier-vscode | Единое форматирование HTML, CSS, JS, JSON, Markdown |
| Live Server | ritwickdey.LiveServer | Локальный сервер с автообновлением страницы |
| REST Client | humao.rest-client | HTTP-запросы из файла .http, ответ вместе с заголовками |
| Remote - SSH | ms-vscode-remote.remote-ssh | Работа с файлами и терминалом на сервере по SSH |
| EditorConfig | EditorConfig.EditorConfig | Отступы и кодировка из .editorconfig проекта |
code --install-extension dbaeumer.vscode-eslint
code --install-extension esbenp.prettier-vscode
code --install-extension humao.rest-client
code --list-extensionsПоследняя команда выводит список установленных расширений — его удобно сохранить и восстановить на новой машине. Имейте в виду: ESLint в редакторе лишь показывает результаты, сам линтер ставится в проект через npm и настраивается конфигом проекта.
REST Client: HTTP-запросы и заголовки прямо из редактора
Это расширение заменяет curl и Postman для быстрых проверок. Создайте файл checks.http, опишите запросы и нажмите появившуюся над каждым ссылку Send Request:
@host = https://example.com
### Главная страница
GET {{host}}/ HTTP/1.1
User-Agent: vscode-restclient
### Только заголовки ответа
HEAD {{host}}/ HTTP/1.1
### Проверка редиректа с http на https
GET http://example.com/ HTTP/1.1Ответ открывается в соседней вкладке: строка статуса, все заголовки и тело. Так удобно проверять после правки конфига, отдаёт ли сервер Strict-Transport-Security, Cache-Control и Content-Security-Policy и куда ведёт редирект. Строки ### разделяют запросы, а переменная @host позволяет переключаться между тестовым и боевым адресом одной правкой. Что означает каждый заголовок, разобрано в статье HTTP-заголовки: полный разбор запроса и ответа. Файл .http можно хранить в репозитории как набор регрессионных проверок.
Remote - SSH: правка файлов на сервере без FTP
Расширение открывает папку на удалённом сервере так, будто она лежит локально: дерево файлов, поиск, терминал и расширения работают на сервере. Сначала опишите хост в ~/.ssh/config:
Host mysite
HostName 203.0.113.10
User deploy
IdentityFile ~/.ssh/id_ed25519Затем палитра команд → Remote-SSH: Connect to Host... → mysite → откройте нужную папку, например /var/www/site. При первом подключении редактор ставит на сервер свой серверный компонент в каталог ~/.vscode-server, поэтому на совсем маленьких VPS подключение может заметно нагрузить память. Настройте вход по ключу, а не по паролю — пошагово это описано в статье вход по SSH-ключу.
Предупреждение из практики: правка файлов прямо на боевом сервере удобна для срочного исправления, но изменения легко потерять при следующем деплое из Git. Постоянные правки делайте в репозитории.
Как подключить DeepSeek и другие LLM к VS Code
ИИ-ассистент подключается расширением. Встроенный вариант — GitHub Copilot, но он требует аккаунт GitHub и работает со своим набором моделей. Для DeepSeek обычно используют сторонние расширения с поддержкой собственного API-ключа, например Cline (saoudrizwan.claude-dev) или Continue (Continue.continue).
- Получите ключ в личном кабинете DeepSeek. Как устроены API-ключи и почему их нельзя хранить в коде, объясняет статья как получить API-ключ.
- Установите выбранное расширение и откройте его панель на боковой полосе.
- В настройках провайдера выберите DeepSeek, вставьте ключ и выберите модель. API DeepSeek совместим с форматом OpenAI, поэтому если провайдера DeepSeek нет в списке, подойдёт вариант «OpenAI Compatible» с адресом
https://api.deepseek.com(подробности — в документации DeepSeek API).
Если код нельзя отправлять во внешний сервис, модель можно запустить локально через Ollama (ollama pull deepseek-r1:7b) и выбрать в расширении провайдера Ollama. Локальная модель работает без интернета, но качество и скорость зависят от видеокарты и объёма памяти.
MCP-серверы: инструменты для ИИ-агента
MCP (Model Context Protocol) позволяет дать ассистенту внешние инструменты: не просто писать код, а, например, проверить DNS-записи домена или срок действия сертификата. В VS Code серверы описываются в файле .vscode/mcp.json проекта или добавляются командой MCP: Add Server. Формат для удалённого сервера:
{
"servers": {
"enterno": {
"type": "http",
"url": "<адрес сервера со страницы enterno.io/mcp>"
}
}
}У enterno.io есть MCP-сервер с инструментами проверки HTTP, DNS, SSL и WHOIS. Адрес и способ авторизации смотрите на странице MCP-сервера, а пошаговое подключение к Claude, Cursor и другим клиентам — в статье как дать Claude и Cursor инструменты диагностики сайта. Ключи доступа не вписывайте в mcp.json, который попадает в Git: VS Code умеет запрашивать секрет при запуске через раздел inputs.
Как проверить сайт после правок из VS Code
REST Client показывает ответ сервера с вашего компьютера. Но то, что видите вы, не всегда совпадает с тем, что видят посетители и поисковые роботы: мешают локальный кэш DNS, файл hosts, корпоративный прокси. После выкладки полезно посмотреть на сайт снаружи:
- Проверка HTTP-заголовков и доступности — код ответа, редиректы и заголовки безопасности так, как их отдаёт сервер внешнему клиенту.
- Проверка SSL-сертификата — если меняли конфиг веб-сервера или перевыпускали сертификат.
- MCP-сервер enterno.io — чтобы ассистент в редакторе выполнял эти проверки сам по вашей просьбе.
Полезная привычка: держите в проекте файл checks.http с запросами к ключевым страницам и после каждого деплоя прогоняйте его, а затем сверяйтесь с внешней проверкой.
Частые вопросы
VS Code действительно бесплатный?
Да, редактор бесплатен для любого использования, включая коммерческое. Платными бывают отдельные расширения и сервисы, например подписки на ИИ-ассистентов.
Как вернуть английский интерфейс после русификации?
Палитра команд → «Настроить язык отображения» (Configure Display Language) → en → перезапуск. Пакет русского языка можно оставить или удалить в панели расширений.
Нужен ли Node.js, чтобы писать HTML и CSS?
Нет. HTML, CSS и браузерный JavaScript работают без Node.js — хватит Live Server или браузера. Node.js нужен для запуска JavaScript вне браузера, npm-пакетов, сборщиков и линтеров.
Почему не открывается терминал по Ctrl+`?
Проверьте раскладку: в русской это та же физическая клавиша, что и «ё». Если сочетание перехвачено другой программой, откройте терминал через палитру команд (View: Toggle Terminal) или назначьте свою клавишу в Ctrl+K Ctrl+S.
Безопасно ли редактировать файлы сервера через Remote - SSH?
Да, соединение идёт по SSH, как и обычный вход в консоль. Риски организационные: вход по паролю вместо ключа и правки, которых нет в Git. Используйте ключ и отдельного пользователя без прав root.
