Visual studio code insiders что это

Обновлено: 13.05.2024

Visual Studio Code - это среда разработки от компании Microsoft, созданная совсем недавно с использованием новых технологий (например Node.js). В отличие от полного пакета Visual Studio, эта среда представляет собой текстовый редактор с возможностью подключения огромного количества плагинов. Она предназначена для разработки на различных языках программирования и для разных платформ. Поддерживаются не только Windows, но и Linux, а также MacOS.

По умолчанию среда - это всего лишь очень продвинутый текстовый редактор. Поэтому для полноценной работы её предстоит настроить. В этой статье я расскажу, как пользоваться Visual Studio Code и как настроить полноценное окружение для веб-разработки. А если быть более точным - для беэкнд разработки. Поговорим про внешний вид, русификацию и, конечно же, полезные расширения.

Как пользоваться Visual Studio Code

В отличие от предыдущих статей на эту тему, я не буду рассказывать про установку. Об этом есть полноценная статья, поэтому посмотрите там. Программа без труда ставится с официального сайта или из snap-пакета в любом дистрибутиве, основанном на Debian или RedHat. Первым делом остановимся на интерфейсе программы. Причём будет рассмотрена именно работа Visual Studio Code для начинающих. Если вы уже опытный разработчик, вряд-ли вы найдёте для себя что-то новое.

1. Интерфейс Visual Studio Code

Интерфейс программы типичен для многих редакторов кода. Но есть и свои особенности. Условно главное окно программы можно разделить на семь частей:

Именно этими участками вы будете пользоваться во время работы с VS Code:

Главное меню программы - можно использовать для доступа к настройкам, открытия проектов и папок и многого другого;
Левая панель - эта панель есть только в VS Code, она позволяет переключаться между просмотром дерева каталогов, поиском, отладкой и окном установки дополнений. Сюда же некоторые расширения добавляют свои меню, например Docker, Git и расширение для управления проектами.
Проводник - по умолчанию здесь отображается дерево каталогов, но тут же вы обнаружите настройки отладки или доступные для установки расширения, если выбран соответствующий пункт на боковой панели.
Рабочая область - здесь выполняется редактирование файла.
Мини карта - позволяет быстро ориентироваться по открытому исходнику.
Нижняя панель - здесь отображается вывод программы при выполнении, консоль самой Visual Code, а также здесь есть встроенный терминал.
Статус бар - отображается общая информация о состоянии программы.

2. Русификация Visual Studio Code

По умолчанию среда устанавливается на английском языке. Лучше так всё и оставить: большинство информации по программированию в интернете на английском языке, и, если вы привыкните к такому формату, вам будет проще во всём этом ориентироваться. Но если вас интересует, как русифицировать Visual Studio Code, то делается это очень просто. На боковой панели кликните по значку с квадратиками, который отвечает за установку дополнений, и наберите в поле поиска vscode-language-pack-ru; утилита найдёт только один пакет, нажмите Install, чтобы установить его:

Для выбора языка нажмите Ctrl+Shift+P и начните набирать Config, в предложенном списке выберите Configure Display Language:

Затем выберите ru и перезапустите программу. Всё. После этого интерфейс программы станет русским.

3. Внешний вид

Одна из важных вещей для среды разработки - её внешний вид и тема оформления. Чтобы изменить тему оформления, надо нажать сочетание Ctrl+Shift+P и набрать Theme. Затем в меню надо выбрать Color Theme:

Затем в открывшемся меню осталось выбрать нужную тему стрелками и нажать Enter. По умолчанию доступно несколько тёмных и светлых тем:

4. Управление проектами

Очень часто бывает, что приходится переключаться между несколькими проектами во время работы. По умолчанию в VS Code для этого надо открывать рабочую папку проекта через меню. Но есть выход. Это расширение Project Manager. С его помощью вы можете сохранять проекты и переключаться между ними в один клик. Установите Project Manager как было описано выше, затем кликните на боковой панели по значку с папкой.

Здесь отображается список доступных проектов. Чтобы запомнить текущую папку в качестве проекта, кликните по значку с дискетой и введите имя проекта:

После этого вы сможете очень просто управлять своими проектами.

5. Авто-форматирование кода

Один из самых важных моментов в работе с кодом - это его однообразие. Приводить код к одному виду вручную не всегда удобно - для этого и были придуманы различные расширения. Это PHP-CS-Fixer для PHP и Prettier для JS/HTML/CSS. Установите их через меню установки дополнений, а затем используйте сочетание клавиш Ctrl+Shift+F в Windows или Ctrl+Shift+I в Linux, для того чтобы выполнять выравнивание кода Visual Studio Code.

6. Автодополнение

Очень сильно помогает в разработке автоматическое дополнение кода. Вы пишите начало слова, а среда сама вам подсказывает, чем его можно завершить. Пакеты, которые позволяют выполнять автодополнение, называются *-intellisense. Рекомендуется установить PHP Intellisense, CSS Intellisense и Path Intellisense для автодополнения путей к файлам. Для разных фреймворков существуют свои расширения автоматического дополнения кода, например, для Laravel есть Laravel Extra Intellisense. Подсветка синтаксиса обычно уже встроена в VS Code для многих языков, однако если её нет, тоже ищите расширение.

7. Управление Vim

Я привык к редактору Vim и хочу использовать его стиль везде, даже в Visual Studio Code. Если вы тоже хотите, для нас с вами есть расширение Vim, которое переносит все сочетания клавиш и режимы работы Vim в редактор Visual Studio. После его установки вы сможете перемещаться по файлу кнопками h, j, k, l , использовать Esc и сохранять файл командой :w.

8. Отладка кода

В Visual Code есть интерфейс, с помощью которого выполняется отладка кода, но прежде, чем вы его сможете использовать для PHP, его придётся настроить. Для отладки кода на PHP используется отладчик Xdebug, поэтому необходимо установить дополнение PHP Debug. Далее кликните по треугольнику со значком жука на боковой панели. Если вы раньше ничего не отлаживали в этом проекте, то программа предложит вам создать файл launch.json. Кликните по этой ссылке. В открывшемся списке выберите PHP:

В полученном файле надо обратить внимание только на поле port. Он должен быть такой же, как и значение переменной xdebug.remote_port в php.ini. У меня это 9008. Сохраните изменения и нажмите зелёный треугольник для начала отладки.

Возможно, программа ещё спросит путь к папке с файлами проекта. Если это локальный компьютер, то проблем возникнуть не должно. Затем нужно выбрать точки остановки. Эти точки ставятся в самой левой части области редактора напротив строчки, в которой вы хотите остановится:

Последний шаг: надо открыть отлаживаемую страницу в браузере, но при этом для Chrome надо использовать расширение Xdebug Helper, которое включает необходимый флаг и сообщает Xdebug, что этот код надо отлаживать. Для этого надо выбрать режим Debug в расширении:

Затем Xdebug подключается к VS Code по выбранному нами порту и передаёт туда всю необходимую информацию. Только после этого вы сможете смотреть переменные и выполнять код пошагово:

9. Терминал

В завершении поговорим о чём-то более простом. Одно из преимуществ VS Code перед другими редакторами - это встроенный терминал, который позволяет выполнять команды в системной оболочке Linux или в выбранной оболочке Windows. Если терминал ещё не открыт, вы можете сделать это с помощью Ctrl+Shift+P или из меню Терминал -> Создать терминал:

10. Использование Git

Ещё одна очень полезная возможность в Visual Studio Code - это интеграция с Git. Она работает по умолчанию, и вам даже не надо ничего дополнительно устанавливать. Достаточно только, чтобы в директории с проектом уже был инициализирован Git-репозиторий. Все новые или изменённые файлы будут подсвечены в проводнике.

Кроме того, вы можете делать фиксацию изменений (коммиты) и отправлять изменения на сервер прямо в графическом интерфейсе. Сначала надо добавить файлы в коммит: кликните по значку разветвления на боковой панели. Здесь отображаются все изменённые файлы. Нажмите + напротив файлов, которые надо добавить:

Для того чтобы зафиксировать изменения, наберите пояснение к комиту в текстовой строке, затем нажмите Ctrl+Enter или галочку над текстовым полем:

Выводы

В этой статье мы рассмотрели, как работать в Visual Studio Code для программирования на PHP и других языках программирования, предназначенных для веб-разработки. Как видите, эта среда намного лучше подготовлена по умолчанию, чем тот же Atom и то, что приходится настраивать там, здесь уже есть "из коробки". А какой средой разработки пользуетесь вы? Напишите в комментариях!

Нет похожих записей

Статья распространяется под лицензией Creative Commons ShareAlike 4.0 при копировании материала ссылка на источник обязательна.

У нас в TestMace Visual Studio Code является одним из самых популярных инструментов. И тем более отрадно, что он развивается семимильными шагами. Вашему вниманию предлагается перевод статьи об еще одной вкусной фиче, которая доступна пока только в VS Code Insiders.

Согласен, немного переборщил с заголовком, просто меня переполняют эмоции. Я решил поделиться своими первыми впечатлениями от удалённой разработки в VS Code, на момент написания статьи доступной в VS Code Insiders.

Расширения для удалённой разработки требуют установки Visual Studio Code Insiders.

Возможность удалённой разработки в Visual Studio Code — это возможность использовать контейнер, удалённый компьютер или подсистему Windows для Linux (WSL) в качестве полноценной среды разработки. При этом весь процесс разбивается на две части: клиентская часть приложения запускается на локальном компьютере, а сервер VS Code практически где угодно. Комплект расширений для удалённой разработки включает в себя три расширения. Следующие три статьи помогут изучить каждое из них более детально:

Remote — SSH — получение доступа к любой директории на удалённой или виртуальной машине с помощью SSH.
Remote — Containers — работа с изолированным набором инструментальных средств или контейнерезированными приложениями внутри контейнера (или подмонированными в контейнер).
Remote — WSL — разработка приложений в подсистеме Windows для Linux (WSL).
Приведу конкретный пример. Допустим, необходимо разработать приложение на каком-либо языке, но на вашем компьютере нет ни самого языка, ни SDK, ни нужных инструментов.

Многие разработчики, пишущие под Windows, создают виртуальные машины Windows в облаке, а затем подключаются к рабочему столу по RDP и рулят виндовыми окошками. При этом виртуальная машина выполняет все сопутствующие операции. Разработчики, пишущие под Linux, создают виртуальные машины Linux или контейнеры и подключаются к ним по SSH через терминал, запускают vim или tmux и строчат в консоль. При этом виртуальная машина выполняет все сопутствующие операции. В обоих сценариях реализуется не клиент-серверное соединение, а взаимодействие терминала или тонкого клиента с сервером. VS Code — толстый клиент с чётким и понятным интерфейсом языковых служб и прозрачностью местоположения.

Когда вы пишете код — например, экземпляр объекта, и после символа точки (.) у вас срабатывает автодополнение названий содержимого этого объекта. Кто выполняет эту работу? Откуда берётся этот список? Если код запускается локально, да ещё и в контейнере, необходимо убедиться, что обе стороны (клиент и сервер) синхронизированы, используют один и тот же SDK и тому подобное. Непростая задача.

Допустим, на вашем компьютере не установлен Rust и необходимые для разработки инструменты.

Тогда производим клонирование следующего репозитория:

Запускаем VS Code Insiders:

Затем VS Code интересуется, хотите ли вы открыть данный контейнер.
В файле devcontainer.json содержится список расширений, необходимых для текущего проекта. Расширения VS Code будут установлены в контейнер Docker, а затем их можно будет использовать удалённо. Ваша локальная система вовсе не нуждается во всех них, достаточно установить только те, которые вы планируете использовать в текущем проекте. Конечно, можно обойтись вообще без установки чего-либо на свой локальный компьютер, но золотая середина в том, чтобы избавиться от излишнего ручного конфигуриорвания системы.

Посмотрите на скриншот ниже. Здесь необходимые вам инструментальные средства добавляются в файл dockerfile, запускается исполняемый файл Docker, и мы видим сервер VS Code!

Зайдите в раздел Extensions в VS Code и обратите внимание на левый нижний угол. Зелёная строка состояния сигнализирует о том, что реализовано клиент-серверное взаимодействие. Все нужные расширения Rust установлены в контейнер и готовы к использованию в VS Code. Весь процесс установки занял считанные минуты.

Редактируя код таким способом, вы получаете те же функции автодополнения, отладки и прочее.

Вот пример сеанса отладки приложения на Rust в режиме реального времени, не требующего никакой настройки, кроме установки VS Code Insiders, Remote Extensions, и Docker (который у меня уже был).

Как я уже говорил, вы можете запускать код с помощью WSL, в контейнерах или через SSH. Такой стиль разработки только набирает обороты. Он прост и понятен, и мне очень интересно понаблюдать, куда это нас приведёт. Нам приходится выполнять так много рутинных задач, а удалённое редактирование кода позволяет выкинуть из процесса разработки всё лишнее, и сконцентрировать своё внимание на самом главном.

Наша команда создает крутой инструмент TestMace — мощная IDE для работы с API. Создавайте сценарии, тестируйте эндпоинты и пользуйтесь всей мощью продвинутого автодополнения и подсветки синтаксиса. Пишите нам! Мы тут: Telegram, Slack, Facebook, Vk

Visual Studio Code — кроссплатформенный, бесплатный и свободный (используется лицензия MIT) текстовый редактор, разрабатываемый Microsoft. Он использует фреймворк Electron и поддерживает расширения, список которых можно найти на странице магазина расширений или в самом редакторе. Несмотря на то, что проект является открытым, Microsoft также распространяет проприетарные сборки с пользовательским соглашением (EULA), см. объяснение в репозитории GitHub.

Установка

Редактор VSCode доступен для установки с помощью следующих пакетов:

code — свободная сборка
visual-studio-code-binAUR — проприетарная сборка Microsoft
visual-studio-code-insiders-binAUR — проприетарная сборка Microsoft с ежедневными обновлениями
code-gitAUR — свободная сборка (нестабильная версия для разработчиков)
vscodium-binAUR — свободная сборка со стандартной конфигурацией, поддерживаемой сообществом

Утилита ptvsd (Python Tools for Visual Studio Debug) предоставляется пакетом python-ptvsd AUR .

Использование

Запустите командой code ( code-git для пакета code-git AUR ).

Если требуется запустить несколько экземпляров приложения, добавьте ключ -n без параметров.

Конфигурация

Пакет code хранит конфигурацию в файле

Пакет visual-studio-code-bin AUR хранит конфигурацию в файле

Встроенный терминал

Меню Вид > Терминал или Ctrl + ` открывает встроенный терминал. По умолчанию используется Bash без каких-либо параметров, но настройки, указанные далее позволяют изменить данное взаимодействие.

terminal.integrated.shell.linux устанавливает терминал по умолчанию
terminal.integrated.shellArgs.linux устанавливает передаваемые в терминал аргументы

Например, установить по умолчанию fish с параметрами.

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

Внешний терминал

Если вы используете Terminator как терминал по умолчанию, у вас могут возникнуть проблемы в VS Code с ошибками вида: Unable to launch debugger worker process (vsdbg) through the terminal. spawn truecolor ENOENT , поэтому следует сменить терминал на другой, например, gnome-terminal .

Строка настроек "terminal.external.linuxExec": "имя терминала" установит терминал на требуемый. Пример установки gnome-terminal :

Решение проблем

Глобальное меню не работает в KDE Plasma

Visual Studio Code использует D-Bus для меню, поэтому для него следует установить пакет libdbusmenu-glib .

Невозможно переместить объект в корзину

По умолчанию все приложения, использующие Electron, используют gio (из пакета glib2 ) для удаления. Конфигурирование утилиты происходит через установку переменной окружения ELECTRON_TRASH .

Однако, в новых версиях Electron поддерживает и kioclient5 , и kioclient , и trash-cli , и gio (по умолчанию), и gvfs-trash (отмечен устаревшим). Смотрите также страницу environment-variables в GitHub репозитории Electron.

Для отладки в свободном пакете можно использовать пакет netcoredbg AUR . Чтобы использовать его для отладки проектов, требуется в настройке проекта указать соответствующую конфигурацию, например:

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

Вот, как выглядит файл после изменения.

OmniSharp не может обнаружить MSBuild

На странице OmniSharp introduction в GitHub написано, что пользователям Arch Linux требуется установить mono-msbuild . Ошибка, которая появляется при отсутствии пакета:

Возможно, потребуется собрать пакет самостоятельно.

«Повторить попытку в режиме Sudo» не работает

remote-containers.openFolder не найдена

VS Live Share missing API

Пакет code не имеет некоторых API, которые нужны для работы расширения Live Share. Вот ошибка, которая появляется при такой проблеме:

Давайте начнем разработку в облаке! Давно прошли времена установки локального стека XAMPP и написания кода в Sublime Text. Итак, каковы мои настройки для кодирования плагинов WordPress? Я научу вас, как начать удаленную разработку с Visual Studio на Amazon EC2. Использование AWS улучшило мой стиль работы. Почему это полезно?

Весь ваш код будет существовать в среде, которая может близко соответствовать производству.
Все очень быстро, когда вы выбираете физическое местоположение сервера, сохраняя низкую задержку (по крайней мере, в AWS).
Вы сможете работать с разных компьютеров, поскольку все настройки рабочего пространства VS Code хранятся удаленно.
Вы можете указать домен разработки на сервере, так что больше нет локального хоста, динамического IP-адреса вашего интернет-провайдера или проблем с переадресацией портов, чтобы показать ваш прогресс клиентам и коллегам.
Серверы Amazon, вероятно, более надежны, чем ваш компьютер.
Команды Bash из учебников или GitHub неожиданно станут более понятными и хорошо работают на сервере. У вас будет терминал и доступ к экземпляру AWS EC2 через SSH.
Если вы беспокоитесь о том, что код не будет у вас под рукой … Регулярные автоматические резервные копии обеспечивают душевное спокойствие (вы все равно должны делать это при локальной разработке).

Предпосылки

Подготовительные шаги дольше, чем фактическая настройка для удаленной разработки. Я предполагаю, что вы работаете на Windows 10, и вы немного новичок во всем этом. Не стесняйтесь переходить на части, которые имеют отношение к вам.

Экземпляр Amazon EC2 с OLS AMI

В предыдущей статье я указывал, что мы используем образ машины Amazon на основе Ubuntu для WordPress, который включает в себя веб-сервер OpenLiteSpeed и все другие необходимые вещи. Хотя шаги этой статьи работают в другом месте, теперь вы знаете, какова наша исходная среда. Впредь я предполагаю, что у вас уже есть сервер Ubuntu с минимум 2 ГБ ОЗУ.

Пользователь Linux

Вам понадобится не-root, но пользователь sudo на сервере. DigitalOcean хорошо объясняет, как его создать. В двух словах, следующие команды создают пользователя. Как пользователь root или с префиксом sudo:

Пароль дважды, Enter кучу раз, потом Y. После того:

Ключевая пара для SSH

Одна часть – это закрытый ключ, который находится в файле без расширений или .pem, который содержит много строк. Клиент (ваше программное обеспечение SSH или сам код VS) использует его для входа в систему, а сервер проверяет его по своему аналогу. Это более короткий однострочный открытый ключ, найденный в файле .pub, который входит в список авторизованных ключей, который мы инициируем следующим образом:

Разбейте Enter3 раза за последний. Продолжать…

Вот и все. Теперь вам нужно сохранить содержимое закрытого ключа в виде файла в Windows 10. Выберите все, что выглядит следующим образом:

Скопируйте и вставьте его в текстовый файл и сохраните его примерно так:

Назовите это как хотите. Не забудьте создать папку в вашем профиле, путь к которой включает в себя имя пользователя Windows.

Конфигурационный файл SSH для Visual Studio

Создайте текстовый файл с содержимым, похожим на это:

Сохраните его как файл без расширения с именем в C :UsersExample.ssh папке, такой же, как указано выше. Объяснение:

Host (aws-ec2) – это просто имя, которое будет отображаться в VS Code (как заголовок окна и индикатор соединения в левом нижнем углу).
HostName – это хост или IP-адрес сервера.
User – это имя пользователя Ubuntu.
IdentityFile – это путь к закрытому ключу.

Windows 10 OpenSSH клиент

Есть встроенный SSH-клиент, но он по умолчанию скрыт. Найдите в меню «Пуск» пункт « Управление дополнительными функциями». Если вы не видите OpenSSH Client в списке, нажмите кнопку Добавить функцию. Найдите его среди дополнительных функций и нажмите « Установить» .

Visual Studio Code (Инсайдеры)

Если вы еще этого не сделали, загрузите VS Code (один из их установщиков). Я выбрал редакцию Visual Studio Code Insiders, которая является передовой с более частыми обновлениями и зеленым значком. Удаленная разработка отлично работает с обычной версией, которая идет с синим значком.

Пакет расширений для удаленной разработки

Получив VS Code, также установите пакет расширений Remote Development (от Microsoft). После этого вы увидите, что он поставляется с другими, которые вы можете счастливо удалить: Remote – Containers и WSL. Это не нужно. Если вы застряли, более подробная информация находится в деталях расширения.

Удаленная разработка с кодом Visual Studio

Подключиться к серверу

Нажмите F1клавишу или нажмите темно-оранжевую кнопку в углу.
Начните вводить слово поэтому появится автоматическое предложение Remote-SSH: Connect to Host… и нажмитеEnter
Выберите имя, которое вы указали в качестве Host, например, SSH: aws-ec2 Код VS получает это из файла конфигурации без расширения, который вы создали.
Все! Вы подключены. Не волнуйся; это происходит в новом окне… закройте старое.

Удаленная разработка с использованием кода Visual Studio совсем не медленная.

Создать рабочее пространство

В VS Code одного и того же можно достичь несколькими способами.

Наконец, посмотрите файлы WordPress, загруженные в Проводнике слева.

Чтобы создать ярлык для других папок на вашем сервере, используйте функцию « Добавить папку в рабочую область …» . Мне нравится иметь доступ ко всему дереву WordPress на случай, если я захочу извлечь уроки из основных файлов или осмотреть другие плагины.

Теперь остается только сохранить это представление в виде рабочего пространства, поэтому вернуться к нему легко.

Чтобы открыть панель сохранения, выберите или нажмите F1 и введите сохранить работу.
Сохраните его как wp .code-workspace или подобное в месте вашего проекта (расширение не является обязательным, будет добавлено в любом случае).
Закройте и снова откройте VS Code, и он либо автоматически загрузит его, либо сделает рабочее пространство вашего проекта доступным в разделе Recent !

Если у вас есть другие рабочие пространства и вам нужно переключаться между ними, перейдите к или F1 введите open work и выберите то, что вам нужно оттуда. Я предпочитаю хранить эти файлы вне WordPress.

Необязательная доп., символическая ссылка

Если это плагин WordPress, я обычно символически связываю папку проекта (или, лучше, сборку разработки / производства). Левый путь – это настоящая папка, правая – это символическая ссылка.

Удивитесь своему творчеству и начните кодировать

Рабочая установка завершает мое руководство по настройке удаленной разработки с помощью кода Visual Studio. Я использовал для кодирования в Cloud9, который теперь также принадлежит Amazon, но так быстро и круто. Огромное сообщество разработчиков создает расширения, которые помогут вам настроить все по своему вкусу.

Читайте также: