Visual Studio Code (Русский)
Состояние перевода: На этой странице представлен перевод статьи Visual Studio Code. Дата последней синхронизации: 18 апреля 2022. Вы можете помочь синхронизировать перевод, если в английской версии произошли изменения.
Code — кроссплатформенный текстовый редактор, разрабатываемый Microsoft, основанный на фреймворке Electron. Visual Studio Code — бинарный дистрибутив, основанный на коде из репозитория Code — OSS, имеющий дополнительные изменения от Microsoft и распространяемый на условиях проприеатрной лицензии (подробнее о лицензировании написано в этом комментарии на GitHub). Также есть поддерживаемый сообществом и распространяемый по лицензии MIT форк VSCodium с отключенной по умолчанию телеметрией.
Установка
Редактор VSCode доступен для установки с помощью следующих пакетов:
- Code — OSS — Свободная сборка из официального репозитория code-oss.
- Visual Studio Code — Проприетарная сборка от Microsoft.
- VSCodium — Поддерживаемый сообщством форк с лицензией MIT.
Разница между «Code — OSS» (open-source) и «Visual Studio Code» (сборка от Microsoft без исходного кода) описана здесь.
Поддержка расширений
Использование Microsoft marketplace для расширений ограничено продуктами семейства Visual Studio Code. Следовательно, он не может быть использован в Code-OSS (смотрите FS#67780).
Пакеты code и vscodium-bin AUR / vscodium AUR / vscodium-git AUR настроены на использование Open VSX registry, поддерживаемого Eclipse Foundation. Это объясняет, почему Code-OSS не может найти некоторые расширения.
Известные способы решения проблемы следующие:
- вручную установить расширение из его файла .vsix , который можно получить в Microsoft Visual Studio Code Marketplace;
- попросить сопровождающего загрузить расширение в Open VSX registry;
- добавить Microsoft Visual Studio Code Marketplace с помощью одного из следующих пакетов, относящихся к используемой вами сборке: code-marketplaceAUR / vscodium-bin-marketplaceAUR / vscodium-marketplaceAUR . Эти пакеты устанавливают хук pacman, который патчит файл product.json , как показано в этом комментарии на GitHub, после каждого обновления пакета. Обратите внимание, что использование Microsoft Marketplace таким образом не соответствует его условиям использования.
Использование
Если требуется запустить несколько экземпляров приложения, добавьте ключ -n без параметров.
Настройка
Пакет code хранит конфигурацию в файле ~/.config/Code — OSS/User/settings.json .
Пакет visual-studio-code-bin AUR хранит конфигурацию в файле ~/.config/Code/User/settings.json .
vscodium AUR и связанные пакеты хранят конфигурацию в файле ~/.config/VSCodium/User/settings.json .
При миграции с Code на Codium (или наоборот) каталог настроек может быть скопирован или перемещён, поскольку они имеют общую кодовую базу и настройки совместимы.
Встроенный терминал
Меню Вид > Терминал или Ctrl + ` открывает встроенный терминал. По умолчанию используется Bash без каких-либо параметров, но настройки, указанные далее позволяют изменить данное взаимодействие.
- terminal.integrated.shell.linux устанавливает терминал по умолчанию
- terminal.integrated.shellArgs.linux устанавливает передаваемые в терминал аргументы
Например, установить по умолчанию fish с параметрами.
~/.config/Code/User/settings.json
"terminal.integrated.shell.linux": "/usr/bin/fish", "terminal.integrated.shellArgs.linux": ["--login","--debug-level 3"]
Вы можете столкнуться со странными запросами при установке встроенного терминала, удалением некоторых строк, поэтому рекомендуется либо не использовать аргументы, либо использовать внешний терминал.
Внешний терминал
Если вы используете Terminator как терминал по умолчанию, у вас могут возникнуть проблемы в VS Code с ошибками вида: Unable to launch debugger worker process (vsdbg) through the terminal. spawn truecolor ENOENT , поэтому следует сменить терминал на другой, например, gnome-terminal .
Строка настроек «terminal.external.linuxExec»: «имя терминала» установит терминал на требуемый. Пример установки gnome-terminal :
~/.config/Code/User/settings.json
"terminal.external.linuxExec": "gnome-terminal"
Решение проблем
Глобальное меню не работает в KDE Plasma
Visual Studio Code использует D-Bus для меню, поэтому для него следует установить пакет libdbusmenu-glib .
Невозможно переместить объект в корзину
По умолчанию все приложения, использующие Electron, используют gio для удаления. В Plasma используется kioclient5 . Другой инструмент удаления можно выбрать с помощью переменной окружения ELECTRON_TRASH .
Например, для удаления с помощью trash-cli :
$ ELECTRON_TRASH=trash-cli code
Однако, в новых версиях Electron поддерживает и kioclient5 , и kioclient , и trash-cli , и gio (по умолчанию), и gvfs-trash (отмечен устаревшим). Смотрите также страницу environment-variables в GitHub репозитории Electron.
Невозможно отладить C#
Для отладки приложений на C# (платформа .NET) испольуется расширение OmniSharp, которое требует проприетарный компонент .NET Core Debugger (смотри пакеты в разделе установка). Смотри также объяснение в репозитории GitHub.
Если вы используете свободный пакет, отладка упадёт почти незаметно, лишь оставив в консоли сообщение:
You may only use the Microsoft .NET Core Debugger (vsdbg) with Visual Studio Code, Visual Studio or Visual Studio for Mac software to help you develop and test your applications.
Для отладки в свободном пакете можно использовать пакет netcoredbg AUR . Чтобы использовать его для отладки проектов, требуется в настройке проекта указать соответствующую конфигурацию, например:
./.vscode/launch.json
"configurations": [ < . "pipeTransport": < "pipeCwd": "$", "pipeProgram": "/usr/bin/bash", "pipeArgs": ["-c"], "debuggerPath": "/usr/bin/netcoredbg" > .
Невозможно открыть .csproj с сервером OmniSharp, ошибка расположения Microsoft.Common.props
Требуется сменить путь к SDK. Вот, как выглядит файл до изменений.
/opt/dotnet/sdk//Sdks/Microsoft.NET.Sdk/Sdk/Sdk.props
$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props
Вот, как выглядит файл после изменения.
/opt/dotnet/sdk//Sdks/Microsoft.NET.Sdk/Sdk/Sdk.props
/opt/dotnet/sdk//Current/Microsoft.Common.props
OmniSharp не может обнаружить MSBuild
На странице OmniSharp introduction в GitHub написано, что пользователям Arch Linux требуется установить mono-msbuild . Ошибка, которая появляется при отсутствии пакета:
OmniSharp Log
[info]: OmniSharp.MSBuild.Discovery.MSBuildLocator Registered MSBuild instance: StandAlone 15.0 - "~/.vscode/extensions/ms-vscode.csharp-1.18.0/.omnisharp/1.32.11/omnisharp/msbuild/15.0/Bin" MSBuildExtensionsPath = /usr/lib/mono/xbuild BypassFrameworkInstallChecks = true CscToolPath = ~/.vscode/extensions/ms-vscode.csharp-1.18.0/.omnisharp/1.32.11/omnisharp/msbuild/15.0/Bin/Roslyn CscToolExe = csc.exe MSBuildToolsPath = ~/.vscode/extensions/ms-vscode.csharp-1.18.0/.omnisharp/1.32.11/omnisharp/msbuild/15.0/Bin TargetFrameworkRootPath = /usr/lib/mono/xbuild-frameworks System.TypeLoadException: Could not load type of field 'OmniSharp.MSBuild.ProjectManager:_queue' (13) due to: Could not load file or assembly 'System.Threading.Tasks.Dataflow, Version=4.5.24.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a' or one of its dependencies. .
Возможно, потребуется собрать пакет самостоятельно.
Omnisharp поставляется со своей собственной версией mono, поэтому, если он не может найти установленную версию, если вы хотите сказать omnisharp искать «глобальный» mono, установленный на вашей машине, поместите это в ваш settings.json:
settings.json
"omnisharp.useGlobalMono:"always"
«Повторить попытку в режиме Sudo» не работает
К сожалению, пакет code не поддерживает эту функцию в полной мере, так как официально Microsoft не поддерживает пакет для Arch Linux. Смотри также FS#61516 или тикет на GitHub.
Проблемы с сопоставлением клавиш
Переключение раскладок клавиатуры в некоторых оконных менеджерах Linux не приводит к обновлению низкоуровневых оконных API X, которые VS Code использует для получения текущей раскладки клавиатуры. Это означает, что VS Code иногда считывает одну из других настроенных раскладок клавиатуры, а не текущую активную.
Согласно вики, есть два возможных решения:
- убедитесь, что setxkbmap -query возвращает в качестве первой раскладки клавиатуры ту, с которой вы хотите работать в VS Code.
- укажите «keyboard.dispatch»: «keyCode» в настройках и перезапустите VS Code. Это предотвратит попытки VS Code определить раскладку клавиатуры.
Команда «. » не найдена
В официальной сборке VS Code есть файл product.json со списком расширений, которым разрешено использовать определённые API. Однако этого файла нет в OSS-сборке code [1]
Для включения определённых API могут потребоваться некоторые флаги. [2] Вы можете либо запустить code с этими флагами, либо добавить соответствующие записи в раздел extensionAllowedProposedApi в файле product.json (пакет code устанавливает его в /usr/lib/code/product.json ).
"extensionAllowedProposedApi": [ "ms-vsliveshare.vsliveshare", "ms-vscode.node-debug", "ms-vscode.node-debug2" ]
Также можно установить пакет code-features AUR , который устанавливает хук pacman, исправляющий этот файл при каждом обновлении пакета. В качестве альтернативы вы можете установить проприетарные сборки от Microsoft: visual-studio-code-bin AUR , visual-studio-code-insiders-bin AUR .
VS Live Share missing API
Отредактируйте product.json , или запустите VS Code с опцией:
$ code --enable-proposed-api ms-vsliveshare.vsliveshare
Команда ‘remote-containers.openFolder’ не найдена
Для решения проблемы требуется открыть VS Code со включённым API remote-containers (см. баг FS#63374)
$ code-oss --enable-proposed-api ms-vscode-remote.remote-containers
Command ‘GitHub Pull Requests: Configure Remotes. ‘ resulted in an error (command ‘pr.configureRemotes’ not found)
Запустите VS Code с опцией:
$ code --enable-proposed-api GitHub.vscode-pull-request-github
Git: ssh_askpass: exec(/usr/lib/ssh/ssh-askpass): No such file or directory
Эта ошибка возникает из-за зашифрованного ssh-ключа, и её можно решить, установив какой-нибудь провайдер диалога, например SSH keys#x11-ssh-askpass или альтернативы, перечисленные там, например ksshaskpass для KDE.
Следует отметить, что для ksshaskpass, например, вам потребуется сделать ссылку на него из /usr/lib/ssh/ssh-askpass , чтобы VSCode нашёл его:
# ln /usr/bin/ksshaskpass /usr/lib/ssh/ssh-askpass
Обрезанные символы во встроенном терминале
Слишком широкие символы могут обрезаться. Например, курсивный полужирный текст в стек-трейсах Deno.
Этого можно избежать, установив для параметра «terminal.integrated.rendererType» значение «experimentalWebgl».
No such interface“org.freedesktop.Secret.Collection”
Аутентификация на Github через VSCodium не работает
При подключении аккаунта Github измените «vscodium» на «vscode» в URL, как показано в этом комментарии. Затем скопируйте идентификационный токен в VSCodium.
Внешний вид диалога выбора файла не согласован с внешним видом системы
На данный момент vscodium использует диалог gtk даже в kde. Смотрите Единый вид приложений Qt и GTK#Согласованный диалог выбора файлов для более подробной информации.
Visual Studio Code
Visual Studio Code (VS Code) — это редактор кода для разных языков программирования. Он относительно немного весит, гибкий и удобный. В нем можно писать, форматировать и редактировать код на разных языках.
Освойте профессию «Веб-разработчик»
VS Code не стоит путать с Visual Studio — это IDE, очень мощная и масштабная, но одновременно с этим тяжеловесная. Названия похожи, потому что у обоих средств разработки один и тот же создатель, но продукты разные по своей сути. VS Code меньше весит, проще в освоении и подходит в том числе для начинающих разработчиков.
Редактор кода существует для всех популярных операционных систем: Windows, Linux и macOS. Он бесплатный, в отличие от большинства версий «старшего брата» Visual Studio.
Кто пользуется Visual Studio Code
С VS Code работают программисты на разных языках. Например, им активно пользуются веб-разработчики, пишущие на HTML/CSS, JavaScript, PHP. Но редактор поддерживает намного большее количество языков: Python, Go, Ruby, C#, TypeScript и так далее. Он работает и с расширениями и фреймворками для популярных языков — например, с React JS и Vue.js, с языками стилей SCSS и LESS, которые дополняют CSS.
В теории пользоваться VS Code может разработчик практически на любом из современных языков. Но на практике его применяют там, где не нужны мощности полноценной IDE.
Профессия / 12 месяцев
Веб-разработчик с нуля
Создавайте нужные любому бизнесу сервисы
Для чего нужен VS Code
VS Code позволяет легко писать, форматировать и редактировать код на разных языках. С его помощью можно быстро создать проект и структуру файлов в нем, он подсвечивает синтаксис кода и помогает автоматически править ошибки. В нем есть возможности для отладки и запуска кода на некоторых языках.
Редактор легко расширяется, поэтому к перечисленным функциям можно добавить новые — достаточно просто скачать нужное дополнение из официального каталога. Дополнения тоже распространяются бесплатно.
Где скачать и как установить VS Code
Скачивание
Visual Studio Code можно бесплатно скачать с официального сайта и установить как обычную программу. Надо просто выбрать версию: для Windows, Linux или macOS.
На главной странице официального сайта есть большая кнопка для скачивания в оптимальной конфигурации — она определяется автоматически в зависимости от параметров вашей системы. Для альтернативных вариантов загрузки есть ссылки внизу.
Если устанавливать редактор пока не хочется, а желание попробовать есть, можно воспользоваться онлайн-версией. Она не такая удобная и у человека меньше контроля над ней, но для старта ее может хватить. Но VS Code способен серьезно нагружать браузер, особенно если там открыто что-то ресурсоемкое.
Установка
После загрузки программы нужно запустить инсталлятор и следовать инструкциям на экране. Далее программа установится на ПК.
Запуск на слабых ПК
После завершения установки можно приступить к запуску программы. Однако стоит отметить, что не на каждом компьютере она запустится успешно. Это обусловлено тем, что программа требует значительных вычислительных ресурсов. Из-за этого на слабой машине возможно возникновение такой ситуации: вместо обычного интерфейса программы появляется лишь черный экран, и процессор начинает работать на полную мощность. Тем не менее, существует решение — необходимо открыть контекстное меню ярлыка программы, и в поле пути к исполняемому файлу добавить следующий флаг:
--disable-gpu.Установка русского языка
Для более удобного ознакомления можно установить русский язык интерфейса. Для этого выполните следующие шаги:
- Щелкните на значке расширений в поле поиска;
- Начните вводить «russian» и дождитесь появления пакета «Russian Language Pack for Visual Studio Code»;
- После этого нажмите кнопку Установить. Далее программа запросит перезапуск.
Теперь интерфейс программы стал намного более понятным на русском языке. Однако, если вы хорошо владеете английским языком, то переход на русский язык не является обязательным. Это позволит вам в случае возникновения каких-либо проблем быстрее находить решения в сети, так как большинство ресурсов и инструкций доступны именно на английском языке.
Интерфейс
В рабочей области открывается документ, в котором программист пишет код. Через верхнее меню можно получить доступ к разным функциям и возможностям. Через боковое меню открываются разделы контроля версий, установки дополнений, запуска и отладки кода.
В нижней части страницы можно открыть консоль. В нее будут выводиться результаты выполнения кода, разные сведения о сборке и найденных ошибках. В консоль можно писать и команды — правда, для многих из них есть горячие клавиши, а они быстрее.
Одновременно в VS Code можно открыть несколько файлов в разных вкладках. Экран рабочей области можно разделить на части, чтобы человек видел несколько файлов одновременно. Как в операционной системе, когда открыто несколько окон программ: одно справа, другое слева. Со всеми открытыми файлами можно работать.
Настройка Visual Studio Code
Для доступа к настройкам графического редактора можно воспользоваться сочетанием клавиш Ctrl+, или перейти по пути File → Preferences → Settings.
Затем можно переходить к настройке различных категорий параметров вручную. Чтобы избежать переключения между вкладками, нужные параметры можно просто вводить в строку поиска.
Другой метод настройки Visual Studio Code — редактирование файла settings.json. Этот способ позволяет тонко настраивать программу, но требует определенных навыков. Начинающим лучше избегать этот способ.
Новичкам в разработке не стоит слишком сильно менять настройки Visual Studio Code. При возникновении проблем и поиске решений в сети, советы чаще всего будут предоставлены для стандартных настроек, что может вызвать путаницу.
Visual Studio Code предоставляет ряд полезных настроек для автоматизации рабочего процесса:
- Автосохранение: Найти параметр «Files: Auto Save». Изменить на «afterDelay» и задать временной интервал — файлы будут автоматически сохраняться через заданный промежуток времени.
- Размер шрифта: Параметр «Font Size». По умолчанию 14, но его можно изменить на более удобный.
- Форматирование кода: Параметр «Format On Paste». Код будет автоматически форматироваться при вставке, помогая избежать проблем с лишними отступами.
- Удаление конечных пробелов: Параметр «Trim Trailing Whitespace». При сохранении документов автоматически удаляются пробелы в конце строк. Это помогает убрать лишние символы и соответствовать стандартам кодирования.
Также можно изменить цветовую схему интерфейса. Для этого нажмите CTRL+SHIFT+P, введите theme и выберите Preferences: Color Theme. Вас встретит список доступных тем, из которых можно выбирать.
Возможности Visual Studio Code
Написание и редактирование кода. Первое и главное назначение редактора — писать исходный код на каком-то из языков программирования, редактировать и сохранять его. Так же как редакторы текста оснащены функциями для форматирования контента, редактор кода позволяет структурировать и форматировать программы. Например, он подсвечивает синтаксис, выделяет ошибки, автоматически расставляет отступы. В нем есть и автодополнение: если ввести первые несколько букв команды, он предложит варианты, как можно ее закончить. В VS Code есть целая система для помощи в редактировании кода, ее компоненты сгруппированы под общим названием IntelliSense.
Автоматическое редактирование. Редактирование и исправление кода в VS Code можно автоматизировать. Существуют специальные плагины и расширения для редактора, которые автоматически исправляют мелкие ошибки в программе: неправильные отступы, именование, несоответствие стилю кода и так далее. Кстати, стиль кода можно задать в настройках. Конечно, сложную ошибку такой модуль не исправит: он не поймет, как это можно сделать. Но для устранения мелких недочетов возможность удобная.
Поиск, вставка и другое. Среди возможностей Visual Studio Code — быстрая навигация по документу и его редактирование. Например, строка поиска поддерживает в том числе регулярные выражения — формулы для разных текстовых сочетаний. С редактированием тоже удобно: можно написать сокращенную формулу той или иной команды, и редактор достроит ее сам. А можно, например, выделить код и закомментировать его одним сочетанием клавиш.
Станьте Frontend-разработчиком
и создавайте интерфейсы сервисов, которыми пользуются все
Контроль версий. VS Code «из коробки» поддерживает систему контроля версий Git. Прямо из редактора можно закоммитить изменения или откатить коммит, добавить к нему комментарий или отправить в удаленный репозиторий. Для этого не нужно входить в консоль и набирать команды: все делается через визуальный интерфейс. Сделать коммит можно в несколько кликов в специальной боковой панели.
Установка дополнений. Одна из особенностей VS Code — он очень легко расширяется. Прямо из редактора можно перейти в каталог расширений и дополнений, найти в поиске то, что вам нужно, и установить. Так подключаются поддержка других языков, плагины для автоматического исправления, конфигураторы и много чего еще. Благодаря легкой расширяемости VS Code можно полностью настроить под себя и свои нужды.
Запуск кода. Изначально редактор позволяет запускать код только для малого количества языков. Но к нему есть дополнения, которые открывают такую возможность и для других. Чтобы воспользоваться ей, нужно установить соответствующее расширение и перезагрузить VS Code. После этого в интерфейсе редактора должны появиться кнопки для сборки и запуска. Кстати, изначально в нем есть целая вкладка под названием «Запуск и отладка».
Помощь в отладке. В VS Code есть встроенный отладчик для языка JavaScript и основанных на нем технологий, таких как TypeScript. Для других языков понадобится устанавливать расширение. Но в любом случае возможность интерактивной отладки в редакторе есть, и это удобно, потому что раньше так «умели» делать только IDE. Интерактивная отладка помогает пошагово выполнять код и на каждом шаге просматривать, как изменяются данные. Так легче обнаружить и устранить ошибку.
Горячие клавиши
Горячие клавиши позволяют применять те или иные функции, не заходя в меню. Достаточно просто нажать нужное сочетание на клавиатуре. В VS Code таких клавиш много, и их можно перенастроить под свои вкусы — как вам удобнее.
| Горячая клавиша | Действие |
|---|---|
| Ctrl + N | Создать новый файл |
| Ctrl + O | Открыть существующий файл |
| Ctrl + S | Сохранить файл |
| Ctrl + Shift + S | Сохранить файл как |
| Ctrl + Z | Отменить последнее действие |
| Ctrl + Shift + Z | Повторить отменённое действие |
| Ctrl + X | Вырезать выделенный текст |
| Ctrl + C | Копировать выделенный текст |
| Ctrl + V | Вставить скопированный/вырезанный текст |
| Ctrl + F | Найти текст в файле |
| Ctrl + H | Заменить текст в файле |
| Ctrl + D | Выделить следующее вхождение выделенного текста |
| Ctrl + / | Закомментировать/раскомментировать строку |
| Ctrl + Shift + K | Удалить текущую строку |
| Ctrl + Shift + L | Выделить все вхождения выделенного текста |
| Ctrl + Shift + O | Быстро перейти к символу |
| Ctrl + P | Быстро перейти к файлу |
| Ctrl + ` | Открыть/закрыть терминал |
| Ctrl + B | Показать/скрыть боковую панель |
| Ctrl + Shift + X | Открыть панель расширений |
| F12 | Перейти к определению |
| Ctrl + F12 | Показать список всех ссылок на текущий символ |
| Shift + F12 | Показать быстрый просмотр ссылок |
| Ctrl + F11 | Установить/снять точку останова |
| F5 | Запустить/перезапустить отладку |
| F9 | Установить/снять точку останова |
Вы можете настроить горячие клавиши в Visual Studio Code согласно своим предпочтениям, выбрав File (Файл) > Preferences (Настройки) > Keyboard Shortcuts (Горячие клавиши).
Установка плагинов
Плагины позволяют добавлять языки, отладчики и инструменты для поддержки рабочего процесса разработки.
Поиск плагинов
Расширения можно просматривать и устанавливать из самого приложения VS Code. Для этого нужно перейти в раздел Дополнения, либо воспользуйтесь значком в боковой панели, либо выберите команду Ctrl+Shift+X.
Каждое дополнение в данном списке сопровождается кратким описанием, указанием издателя, а также информацией о количестве загрузок и пятизвездочной шкале оценки. Вам предоставляется возможность выполнить клик по интересующему дополнению, чтобы перейти на страницу с подробностями, где можно узнать дополнительную информацию.
Установка дополнений
Для установки плагина, выберите кнопку Install (установить). После завершения установки кнопка Установить изменится на кнопку с изображением шестеренки Управление.
Возьмем, например, популярное дополнение TODO Highlight. Оно выделяет фрагменты текста вида ‘TODO:’ и ‘FIXME:’ в вашем исходном коде, чтобы помочь быстро обнаружить незавершенные участки.
В разделе Расширения (доступно по Ctrl+Shift+X) введите todo в поле поиска, чтобы отфильтровать результаты. Вы должны обнаружить дополнение в списке.
Помимо прочего, дополнение однозначно опознается по идентификаторам издателя. При выборе «TODO Highlight» откроется страница с подробностями, где можно найти идентификатор данного плагина, например, wayou.vscode-todo-highlight. Знание идентификатора дополнения полезно в случае с несколькими плагинами одинакового названия.
Чтобы увидеть «TODO Highlight» в действии, откройте любой файл с исходным кодом и добавьте текст ‘TODO:’. Вы увидите, что данный текст будет выделен:
Этот пример лишь один из способов установки и использования плагинов. В репозитории содержится множество расширений, поддерживающих сотни языков программирования и задач.
Выбор разнообразен: от полноценной поддержки языков, таких как Java, Python, Go и C++, до простых расширений, которые создают GUID, меняют цветовую тему или добавляют виртуальных питомцев в редактор.
На странице подробностей дополнения можно ознакомиться с README и изучить:
- Вкладки «Возможности» — список настроек, команд и горячих клавиш, языковых грамматик, отладчика и так далее.
- Вкладка «Изменения» — история изменений (CHANGELOG) репозитория дополнения, если она доступна.
- Вкладка «Зависимости» — перечисление зависимостей от других плагинов.
Преимущества Visual Studio Code
Простота освоения. У редактора интуитивно понятный интерфейс, его легко установить и настроить. А после этого им сразу можно начинать пользоваться. Единственной проблемой поначалу могут стать горячие клавиши и дополнительные настройки — они необычно организованы. Но со временем легко разобраться, особенно если вначале держать под рукой памятку или пользоваться туториалами.
Малый вес. По сравнению с IDE редактор быстро работает и мало весит, не так требователен к ресурсам компьютера. При этом он довольно функционален, а огромное количество расширений позволяет добавлять в него новые возможности.
Кроссплатформенность. Visual Studio Code есть для всех популярных операционных систем, так что с ним можно работать вне зависимости от ОС, которую вы предпочитаете. К тому же это позволяет быстрее и удобнее переносить проекты с одного устройства на другое.
Поддержка разных языков. Есть инструменты, которые предназначены специально для какого-то языка, например Python или C++. Visual Studio Code поддерживает огромное количество языков программирования, и они легко подключаются. Поэтому с его помощью можно вести проекты, написанные на нескольких языках одновременно.
Гибкость. У VS Code множество расширений и удобных функций. Помимо вещей, стандартных для редактора кода, вроде подсветки синтаксиса, он «умеет» много чего еще. Его можно легко и гибко настроить под себя в зависимости от потребностей разработчика и технологий, с которыми он работает.
Недостатки Visual Studio Code
Ограниченная функциональность. Конечно, это зависит от того, с чем сравнивать VS Code. По сравнению с рядом других редакторов он, наоборот, более функционален. Но если сравнивать с IDE — любой редактор проигрывает, так как возможности у него намного ниже.
А для некоторых языков возможности IDE критичны. Поэтому работать в редакторе кода для разработчиков на этих языках будет не очень удобно. Например, в VS Code есть модули для Java, но Java-разработчики все же предпочитают пользоваться специализированными средами. У них больше возможностей по работе со специфическими особенностями языка вроде перевода программы в байт-код.
Медленная работа. На старых компьютерах редактор может долго запускаться и работать медленнее. Особенно это характерно для устройств, где установлен жесткий диск HDD, а не твердотельный накопитель SSD, или мало оперативной памяти.
Так происходит из-за того, что VS Code написан на Electron — это фреймворк, который позволяет писать программы для ПК с помощью HTML/CSS и JavaScript. Внутри фреймворка – целый браузер, отвечающий за отображение HTML и CSS. Соответственно, написанные на Electron программы такие же ресурсоемкие, как обычные браузеры, а значит, на слабых устройствах могут работать медленно. Это справедливо и для VS Code.
Fullstack-разработчик на Python
Fullstack-разработчики могут в одиночку сделать IT-проект от архитектуры до интерфейса. Их навыки востребованы у работодателей, особенно в стартапах. Научитесь программировать на Python и JavaScript и создавайте сервисы с нуля.
Статьи по теме:
Visual Studio Code #
Visual Studio Code — это текстовый редактор, вроде блокнота в Windows, но созданный специально для программистов: он поставляется вместе с подсветкой синтаксиса, автодополнением, встроенным терминалом, системой контроля версий и ещё огромным количеством инструментов, упрощающих написание кода. Однако VS Code это не IDE, т.е. он изначально не содержит в себе инструментов для компиляции и запуска написанного кода, что означает, что для комфортной разработки, его необходимо настроить соответствующим образом. Именно этому и посвящена данная статья.
Где скачать #
Загрузить VS Code можно здесь . Сайт сам поймёт, какую операционную систему ты используешь, и предложит соответствующую версию. При установке рекомендуем поставить все галочки и не менять язык на русский, так как вся статья написана для англоязычной версии.
Настройка для работы с C++ #
Windows #
- Установить компилятор g++ отсюда, выбрав последнюю доступную версию нужной разрядности. После установки необходимо перезапустить компьютер;
- Открываем командную строку, для этого нажимаем комбинацию клавиш Win + R , вводим cmd и нажимаем Enter, в открывшемся окне прописываем g++ —version и снова нажимаем Enter. Если ты увидишь сообщение, содержащее версию, значит компилятор установлен и можно переходить к следующему шагу. Если же появится ошибка, значит система не понимает, где установлен компилятор, и ей необходимо указать, где он находится. Для этого необходимо добавить g++ в PATH : Параметры > Система > О системе > Сведения о системе > Дополнительные параметры системы > Переменные среды > Системные переменные > Path, тут необходимо нажать кнопку Добавить и вставить следующий путь: c:\mingw\libexec\gcc\x86_64-w64-mingw32 ;
- Теперь ты можешь компилировать С++ код, прописывая в консоли g++ FILE_NAME.cpp , и запускать скомпилированный файл a.exe . Однако можно автоматизировать этот процесс внутри VS Code. Для этого нужно зайти в раздел с расширениями с помощью комбинации клавиш Ctrl + Shift + X или можно нажать на иконку с кубиками в боковой панели, а затем найти и установить расширение Code Runner ;
- Теперь, чтобы скомпилировать .cpp файл, можно просто использовать комбинацию клавиш Ctrl + Alt + N или соответствующую кнопку в правом верхнем углу. При желании, её можно изменить в настройках;
- Далее необходимо открыть настройки, пользуясь сочетанием клавиш Ctrl + , или нажав на шестерёнку в левом нижнем углу. В строке поиска ввести @ext:formulahendry.code-runner terminal и поставить галочку в Code-runner: Run In Terminal . Теперь код будет запускаться во встроенном терминале, и у тебя появится возможность вводить входные данные с клавиатуры.
Linux #
- Установить компилятор g++ используя пакетный менеджер, например, если ты используешь Ubuntu, тебе нужно открыть терминал и написать sudo apt install gcc ;
- Чтобы убедиться, что компилятор установился правильно, введи в терминале g++ —version . Если всё в порядке, ты увидишь сообщение, содержащее версию g++ ;
- Далее, уже в самом VS Code, заходим в раздел с расширениями с помощью Ctrl + Shift + X или можно просто нажать на иконку с кубиками в боковой панели, а затем найти и установить расширение Code Runner ;
- Теперь, чтобы скомпилировать .cpp файл, ты можешь просто использовать комбинацию клавиш Ctrl + Alt + N . При желании, её можно изменить в настройках;
- Далее необходимо открыть настройки, пользуясь сочетанием клавиш Ctrl + , или нажав на шестерёнку в левом нижнем углу. В строке поиска ввести @ext:formulahendry.code-runner terminal и поставить галочку в Code-runner: Run In Terminal . Теперь код будет запускаться во встроенном терминале, и у тебя появится возможность вводить входные данные с клавиатуры.
Mac #
- На Mac установить компилятор g++ легче всего, используя пакетный менеджер Homebrew, который не установлен по умолчанию. Чтобы его установить, тебе нужно открыть терминал и вставить туда следующую команду:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" Несколько советов для удобства #
- Если ты раньше пользовался Visual Studio, и, открывая свой старый код, у тебя возникают проблемы с отображением кириллицы, тебе следует изменить кодировку файла. Для этого во встроенной командной строке найди Change File Encoding > Reopen with Encoding и выбери самое первое с подписью Guessed from content.
- Для того, чтобы программа корректно компилировалась, каждый раз после её изменения нужно сначала её сохранить с помощью Ctrl + S . Чтобы этого не делать, можно включить автосохранение: для этого нужно найти параметр Files: Auto Save в настройках и выбрать значение afterDelay .
- Чтобы изменить или добавить сочетания клавиш, открой командную строку ( Ctrl + Shift + P на Windows и Linux или Cmd + Shift + P на Mac) и в поиске найди Preferences: Open Keyboard Shortcuts . Например, одной из полезных горячих клавиш будет увеличение/уменьшение размера шрифта, для этого в меню горячих клавиш введи Editor Font Zoom и поставь горячие клавиши на . In и . Out , мы предпочитаем использовать Ctrl + = для увеличения и Ctrl + — для уменьшения шрифта.
- При компиляции .cpp файла в папке с ним появляется .out файл. Чтобы .out файлы не мешались во встроенном проводнике, можно скрыть их в настройках. Для этого в настройках введи Files: Exclude , и добавь туда значение *.exe (аналогично для любого другого расширения).
Работа с Git #
Visual Studio Code даёт всё необходимое для удобной работы с системой контроля версий. Здесь ты можешь спокойно пуллить, коммитить, пушить, мерджить и т.д. Самый простой, на мой взгляд, способ это делать — использовать командную строку Ctrl + Shift + P . Здесь ты можешь найти любое действие в системе контроля версий. Все они начинаются с Git: , а дальше идёт название действия, например, Git: Pull или Git: View File History .
Другим способом работы с Git является вкладка View: Show Source Control , где можно делать всё то же, но используя графический интерфейс.
VS Code в браузере #
GitHub очень тесно интегрируется с VS Code — ты можешь открыть любой репозиторий и нажать на клавиатуре на точку или поменять github.com на guthub.dev в адресной строке, чтобы открыть web-версию VS Code. Тут ты сможешь посмотреть и изменить файлы, не клонируя репозиторий на свой компьютер. Однако, это неполноценная версия VS Code: здесь у тебя не получится воспользоваться терминалом или скомпилировать .cpp файл.
Кастомизация #
Огромным преимуществом VS Code кода является широкая кастомизация. Ты можешь настроить под себя абсолютно всё, начиная от цветов интерфейса и заканчивая шириной полосы прокрутки.
Например, я предпочитаю минималистичный вид, поэтому мой VS Code на данный момент выглядит вот так:
Темы #
Одним из самых простых и очевидных способов изменения внешнего вида редактора является установка тем. Всё, что нужно для этого сделать это:
- Открыть панель расширений c помощью Ctrl + Shift + X на Windows и Linux или Cmd + Shift + X на Mac;
- Найти понравившуюся тему ( @category:»themes» чтобы видеть только темы);
- Нажать на кнопку Install;
- Если тема не применилась автоматически, или ты хочешь выбрать другую среди установленных, достаточно открыть командную строку ( Ctrl + Shift + P на Windows и Linux или Cmd + Shift + P на Mac), после чего найти параметр Preferences: Color Theme и выбрать желаемую тему.
Иконки файлов #
Точно так же, как и темы, ты можешь изменить иконки во встроенном проводнике — боковой панели, которая отображает все файлы рабочей директории. Для этого достаточно просто написать icons в поиске расширений и установить расширение с понравившимися иконками. Если иконки не применились автоматически, или ты хочешь выбрать другую среди установленных, достаточно открыть командную строку и в параметре Preferences: File Icon Theme выбрать желаемую тему иконок.
Шрифт #
В VS Code ты можешь поменять шрифт кода с помощью параметра Editor: Font Family в настройках, где перечисляются шрифты по приоритету. Например, у меня это ‘Fira code’, Menlo, Monaco, ‘Courier New’, monospace , что означает, что будет использоваться шрифт Fira Code, но если он не найдётся среди установленных, будет использоваться Menlo и так далее. Чтобы использовать свой шрифт, просто добавь его первым в эту строку.
Оба этих шрифта поддерживают лигатуры. Что это? Лигатура — это знак, объединяющий два или более символа. В коде они применяются для отображения операторов и помогают уменьшить шум путем слияния символов и удаления лишних деталей и в определённых случаях уравновесить пространство между символами. Вот несколько примеров:
Скрытие панелей #
Ещё одним способом кастомизации VS Code является изменение поведения панелей и других элементов интерфейса, что помогает освободить огромное количество места на экране. У меня обычно скрыты все элементы интерфейса, кроме самого пространства редактора, а когда у меня появляется необходимость воспользоваться, скажем, строкой состояния, я использую соответствующую комбинацию клавиш. Все сочетания клавиш настраиваются в Preferences: Open Keyboard Shortcuts .
Настройки #
На самом деле, в VS Code есть ещё огромное количество настроек, которые ты можешь найти… в настройках. Поэтому, если тебе что-то не нравится, ты всегда можешь поискать этот параметр в настройках приложения или в интернете — скорее всего ты не первый, кто захотел изменить это, и сможешь найти готовое решение.
И ешё, все свои настройки ты можешь синхронизировать через свой аккаунт GitHub, чтобы иметь единые настройки на компьютере дома и в университете. Статья об этом .
Как пользоваться Visual Studio Code
Visual Studio Code – это один из наиболее популярных редакторов кода, разработанный корпорацией Microsoft. Он распространяется в бесплатном доступе и поддерживается всеми актуальными операционными системами: Windows, Linux и macOS. VS Code представляет собой обычный текстовый редактор с возможностью подключения различных плагинов, что дает возможность работать со всевозможными языками программирования для разработки любого IT-продукта.
Несмотря на столь высокую популярность программы, ее функционал до сих пор остается не таким очевидным, из-за чего многие пользователи предпочитают продукт конкурента, нежели VS Code. Чтобы решить все проблемы, возникающие при работе с Visual Studio Code, рекомендую ознакомиться с подробным гайдом по настройке этого редактора кода. В нем я покажу, что VS Code – это мощный инструмент, которым может пользоваться каждый.
Установка Visual Studio Code
С установкой среды не должно возникнуть никаких проблем, но давайте все же проведем небольшой ликбез. Выполним несколько действий:
- Переходим на официальный сайт и загружаем установочный файл.
- Следующим шагом запускаем установочник и ставим редактор кода на компьютер. В блоке «Выберите дополнительные задачи» рекомендую отметить два пункта, позволяющие запускать файлы через выпадающее меню – так вы сможете быстро открыть код в VS Code.
На этом установка завершена. Теперь мы можем использовать редактор кода по назначению. Обычно с этим не должно возникнуть никаких проблем, однако на слабых машинах запуск утилиты часто прерывается. Вылечить такой недуг можно с помощью добавления нового значения к пути ярлыка. Для этого откроем его свойства через правый клик мыши и в графе «Объект» пропишем —disable-gpu.
Готово! Теперь программа должна работать на любом компьютере.
Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей
Интерфейс Visual Studio Code
При первом запуске перед нами отобразится окно приветствия, через которое можно получить быстрый доступ к ранее запущенным проектам либо создать новые. Весь интерфейс на английском языке (всего в несколько кликов он переводится на русский, но об этом чуть позже). Давайте пока разберемся с интерфейсом: откроем для примера файл с кодом, посмотрим, как его идентифицирует программа без предварительных настроек, и разберем каждый блок утилиты.
Запустить файл с кодом мы можем через правый клик мыши -> Открыть с помощью Code. Файл можно открыть и в программе: для этого в верхнем правом углу выбираем «File» и жмем «Open File…». После этого переходим в нужную директорию и выбираем файл.
В результате перед нами отобразится окно с кодом из файла. Давайте визуально разделим интерфейс на блоки и рассмотрим каждый из них более детально.
Первое, что бросается в глаза, – это блок кода, для которого отведено больше всего места. Название функций и прочее подсвечено разными цветами. Здесь же указан путь до файла, а чуть выше расположены вкладки-файлы, по которым можно перемещаться. С помощью них мы можем добавлять не просто один файл с кодом, а целый проект.
Следующий блок – левая панель управления, включающая в себя 5 основных вкладок: «Проводник», «Поиск», «Система управления версиями», «Запуск кода» и «Расширения». Первая предоставляет пользователю возможность просматривать содержимое проекта и быстро перемещаться внутри него.
Вторая вкладка – поиск. Используется для нахождения слов в документе. Он также может быть запущен с помощью комбинации клавиш «CTRL+SHIFT+F». Алгоритм использования довольно прост – вводим название в поиск и смотрим результат.
Система управления версиями – предназначена для взаимодействия с git.
Запустить и проверить работоспособность кода мы можем в следующей вкладке:
Еще одна важная вкладка, с помощью которой из Visual Studio Code можно сделать функциональную утилиту, это «Расширения». В ней находятся установочники для всех популярных инструментов, используемых разработчиками.
Следующий блок – нижний статус-бар. В нем отображается общая информация о состоянии программы. Обратите внимание, что VS Code автоматически определяет язык программирования и информирует нас об этом.
И еще один раздел – правая панель, включающая в себя небольшой дисплей, который отображает код в уменьшенном варианте, а также позволяет удобно скроллить внутри него. Здесь же мы можем разделить окно кода на несколько столбцов, а также закрыть все файлы одним кликом – для этого используются две верхние кнопки.
Как видите, если пройтись по интерфейсу программы, то она уже не кажется такой сложной. Чтобы сделать все еще проще, давайте проведем русификацию всех элементов интерфейса. О том, как это сделать, поговорим далее.
Русификация Visual Studio Code
Чтобы провести русификацию программы, открываем вкладку с расширениями и прописываем запрос vscode-language-pack-ru. В результате будет отображен новый элемент с кнопкой «Install» – кликаем по ней и ожидаем завершения установки.
Перезагружаем программу и смотрим, что язык интерфейса был изменен на русский:
Если вы захотите вернуть англоязычный интерфейс, для этого потребуется открыть раздел с плагинами и удалить установленный пакет с русским языком.
Внешний вид
Мы можем полностью изменить цветовую схему утилиты. Чтобы это сделать, воспользуемся комбинацией клавиш «CTRL+SHIFT+P» и введем запрос «theme». В отобразившемся списке выберем «Параметры: Цветовая тема».
В результате отобразится список возможных тем – для примера возьмем солнечную тему.
После применения темы интерфейс примет следующий вид:
Обратите внимание, что это не весь список тем – вы можете установить и другие. Для этого пролистайте в самый низ списка и выберите «Установить дополнительные цветовые темы…». После этого в левой части отобразится дополнительный блок с доступными цветовыми решениями.
Вот так мы можем изменить внешний вид программы. Теперь давайте перейдем к техническим моментам и рассмотрим работу наиболее важных плагинов.
Управление проектами
По умолчанию Visual Studio Code поддерживает работу с несколькими проектами, однако перемещаться между ними не очень удобно. Для удобства обычно используют плагин под названием Project Manager. С его помощью открывается возможность перемещения между рабочими областями всего в один клик. Установка проходит через магазин расширений, о котором мы говорили ранее. После того как менеджер проектов будет установлен, в левой панели управления появится новая вкладка для работы с плагином.
Теперь работа с проектами не должна вызывать никаких трудностей.
Автоформатирование кода
Один из важных этапов программирования – умение приводить все к единому виду с правильными отступами. Для таких задач в VS Code есть специальные плагины, позволяющие форматировать весь текстовый документ. Это такие расширения, как PHP-CS-Fixer для PHP, Prettier для JS/HTML/CSS и другие.
Рассмотрим, как форматируется код, написанный на JavaScript:
- Возьмем для примера функцию, отступы в которой выстроены случайным образом.
- Устанавливаем плагин Prettier через магазин расширений и открываем документ, который нужно отформатировать. Зажимаем комбинацию клавиш «CTRL+SHIFT+P» и вводим запрос «Format Document».
- Смотрим на код и видим, что он преобразился и принял аккуратный вид.
Аналогичным образом мы можем отформатировать код, написанный на других языках программирования. Для этого достаточно установить нужное расширение.
Автодополнение
В популярных программах, подобных Visual Studio, встроена функция автодополнения, помогающая завершить код. Например, вы пишите строчку кода, а среда подсказывает, как ее завершить. С помощью этой опции можно не только вспомнить нужную функцию, но и быстро написать код.
По умолчанию функция автодополнения в Visual Studio Code доступна только для некоторых языков. Для прочих языков программирования существуют дополнительные пакеты с окончанием «intellisense».
Посмотреть, какие пакеты доступны, вы можете в магазине плагинов.
Рекомендую установить PHP Intellisense, CSS Intellisense и Path Intellisense.
Управление Vim
Vim – это свободный текстовый редактор, работающий на основе vi. По умолчанию он установлен на каждой операционной системе семейства Unix. Кроме того, он доступен и в Visual Studio Code. Для работы с ним потребуется установить расширение с аналогичным названием:
Теперь мы можем перемещаться по файлу клавишами h, j, k, l, использовать Esc и сохранять файл командой :w.
Отладка кода
Для того чтобы запустить код в VS Code, нам нужно воспользоваться одним из расширений. Например, для JavaScript подойдет Debugger for Chrome. Узнать, какое расширение необходимо для конкретного языка, можно через «Выполнить» -> «Установить дополнительные отладчики…».
В результате в левой части окна будет отображен список доступных плагинов – найдите в нем подходящий для вас и следуйте инструкции.
После того как нужный плагин будет установлен, можно запускать отладку кода. Для этого достаточно открыть пункт «Выполнить» и нажать на кнопку «Запустить отладку». Также это можно сделать с помощью клавиши «F5».
С помощью плагинов мы можем отладить код, написанный на любом языке программирования.
Заключение
Сегодня мы разобрали функционал инструмента Visual Studio Code. Данная среда хороша не только для профессионалов, но и для новичков, изучающих основы программирования. Одно из преимуществ программы – это минимальное требование к железу: запустить программу можно практически на любом компьютере.
Надеюсь, что работа в VS Code больше не будет для вас проблемой, а активные проекты ждет успех. Удачи!