Stack Overflow и Microsoft разработали бота для Visual Studio Code


Оглавление (нажмите, чтобы открыть):

Создание бота с помощью пакета SDK Bot Framework для .NET Create a bot with the Bot Framework SDK for .NET

ОБЛАСТЬ ПРИМЕНЕНИЯ: пакет SDK версии 4 пакет SDK версии 3 APPLIES TO: SDK v4 SDK v3

В этом кратком руководстве описывается, как с помощью шаблона C# создать бот и протестировать его, используя Bot Framework Channel Emulator. This quickstart walks you through building a bot by using the C# template, and then testing it with the Bot Framework Emulator.

Создание бота с помощью службы Azure Bot и локальных средств — это независимые друг от друга параллельные процессы. Creating a bot with Azure Bot Service and creating a bot locally are independent, parallel ways to create a bot.

Предварительные требования Prerequisites

  • Visual Studio 2020 или более поздней версии Visual Studio 2020 or later
  • Шаблон пакета SDK Bot Framework версии 4 для C# Bot Framework SDK v4 template for C#
  • Bot Framework Emulator. Bot Framework Emulator
  • Опыт работы с ASP.Net Core и асинхронного программирования в C#. Knowledge of ASP.Net Core and asynchronous programming in C#

Создание бота Create a bot

Установите шаблон BotBuilderVSIX.vsix, скачанный при выполнении предварительных требований. Install BotBuilderVSIX.vsix template that you downloaded in the prerequisites section.

В Visual Studio создайте проект бота с использованием шаблона эхо-бота для Bot Framework версии 4. In Visual Studio, create a new bot project using the Echo Bot (Bot Framework v4) template.

При необходимости укажите для проекта тип сборки .Net Core 2.1 . If needed, change the project build type to .Net Core 2.1 . Также, если потребуется, обновите пакеты NuGet Microsoft.Bot.Builder . Also if needed, update the Microsoft.Bot.Builder NuGet packages.

Благодаря шаблону проект содержит весь код, необходимый для создания бота в рамках этого краткого руководства. Thanks to the template, your project contains all the code that’s necessary to create the bot in this quickstart. Теперь нет необходимости писать дополнительный код. You won’t actually need to write any additional code.

Запуск бота в Visual Studio Start your bot in Visual Studio

Когда вы нажмете кнопку запуска, Visual Studio создаст приложение, развернет его в узле localhost и запустит веб-браузер для отображения страницы приложения default.htm . When you click the run button, Visual Studio will build the application, deploy it to localhost, and launch the web browser to display the application’s default.htm page. На этом этапе бот выполняется локально. At this point, your bot is running locally.

Запуск эмулятора и подключение бота Start the emulator and connect your bot

После этого запустите эмулятор и подключитесь к боту в эмуляторе. Next, start the emulator and then connect to your bot in the emulator:

  1. Щелкните ссылку Create a new bot configuration (Создать конфигурацию бота) на вкладке Welcome (Приветствие) эмулятора. Click the Create a new bot configuration link in the emulator «Welcome» tab.
  2. Заполните поля для своего бота. Fill out the fields for your bot. Используйте адрес страницы приветствия своего бота (обычно https://localhost:3978) и добавьте к нему сведения маршрутизации «/api/messages». Use your bot’s welcome page address (typically https://localhost:3978) and append routing info ‘/api/messages’ to this address.
  3. Щелкните Сохранить и подключиться. then click Save and connect.

Взаимодействие с ботом Interact with your bot

Отправьте сообщение боту и получите от него сообщение в ответ. Send a message to your bot, and the bot will respond back with a message.

Если вы видите, что сообщение не отправляется, вам может потребоваться перезагрузить компьютер, так как ngrok еще не получил необходимые привилегии в вашей системе (это нужно выполнить только один раз). If you see that the message cannot be sent, you might need to restart your machine as ngrok didn’t get the needed privileges on your system yet (only needs to be done one time).

Дополнительные ресурсы Additional resources

Подключение к удаленно размещенном боту описано в документации по туннелированию (ngrok). See tunneling (ngrok) for how to connect to a bot hosted remotely.

Что такое «Open Workspace. » в MS VSCode?

А теперь попробуйте догадаться, как я нашёл эту ссылку.

You can save settings at the workspace level and you can open multiple folders in a workspace. If you want to do either of those things, use a workspace, otherwise, just open a folder.

A VS Code workspace is a list of a project’s folders and files. A workspace can contain multiple folders. You can customize the settings and preferences of a workspace.

Неужели не понятно? Ну смотри, я даже болдом выделил!

Пока что в VS Code можно открыть только один workspace (рабочее пространство) в котором (до недавнего времени) можно было открыть только один каталог с проектом

Теперь стало доступно открыть сразу несколько каталогов

Например, я пишу свой шаблон для проектов, в нем есть api-сервер, есть client у них обоих есть еще и ядра, а еще есть документация ко всему этому в итоге у меня уже 5 репозиториев

Все это мне нужно одновременно открыть и работать, вот для этого и сделан multi-root folders

В итоге я могу открыть сразу все 5 репозиториев и работать с ними, делать коммиты и отправлять их в GIT как будто они все открыты отдельно

Иначе мне пришлось бы открывать несколько окон vs code и переключаться между ними

P.S. Сейчас вот многие ждут когда сделают возможность открывать несколько рабочих пространств (workspaces) чтобы каждый каталог открыть в своем пространстве, это нужно чтобы код не конфликтовал между собой

Для примера опять же возьмем мой проект (он написан на php), есть ядро в котором есть разный код и библиотеки, это ядро подключается в api-сервер в качестве библиотеки в итоге в одном пространстве vs code видит сразу несколько одинаковых файлов, один и те же файлы находятся в двух каталогах (в ядре и в api-сервере), чтобы это жестко разделить и нужен multiple workspaces

Используем VS Code для Веб-разработки

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

VS Code обладает своими уникальными фичами, такими, как, например, IntelliSense «из-коробки».

В этой статье я бы хотел поделиться тем, что нашел для себя полезным в VS Code для веб-разработки.

Осторожно! Под катом много картинок и гифок.

Stable vs Insiders

У Visual Studio есть два канала обновлений — stable и insiders. Первый — стабильные версии, второй же обновляется каждую неделю и в обмен на возможно большее количество багов включает самые современные фичи. Скачать последнюю версию можно либо по ссылке, либо указав update.channel как «insiders» в настройках VS Code.

React и JSX

В настоящий момент, чтобы получить достойную поддержку JSX в VS Code, прийдется немного пот помучаться и установить два расширения:

Последний, впрочем, может быть заменен на XO.

Если вы выбрали ESLint, то в проекте должен быть .eslintrc следующего содержания:

Если вы все сделали правильно, то теперь JSX будет подсвечиваться без ошибок:

CSS, LESS, SCSS и Stylus

В качестве линтера файлов стилей я рекомендую расширение stylelint. В качестве «бекенда» он использует PostCSS, что означает, что поддерживаются любые файлы стилей, поддерживаемые последним.

Чтобы включить stylelint в VS Code, понадобится снова пойти в настройки и добавить:

Другие полезные плагины в зависимости от языков, с которыми вы работаете

Сниппеты

Я не фанат сниппет-плагинов. Но если вы, напротив, являетесь таковым, то на Visual Studio Marketplace вас ждет огромный раздел с ними

Мастер Йода рекомендует:  Как заказать SEO продвижение (Москва)

Полезные расширения

Align


Beautify

Интерфейс к jsbeautifier.org. Крайне полезен если приходится часто приводить в порядок совсем некудышный JS-код.

Bookmarks

Позволяет запоминать строки и быстро переходить к ним

Color Highlighter

Интеграция с Dash

Debugger for Chrome

Интеграция с отладчиком Google Chrome или другими отладчиками, поддерживающими его протокол.

ECMAScript Quotes Transformer

Преобразует кавычки в ES строковых литералах

Editor Config for VSCode

Поддержка формата .editorconfig

ftp-sync

Автоматически синхронизирует файлы по ftp протоколу

Project Manager

Менеджер проектов для VS Code

Runner

Позволяет запускать скрипты прямо из редактора

Темы оформления

К сожалению, VS Code пока что не поддерживает тем оформления интерфейса.

Но есть много классных тем подсветки синтаксиса. Ниже некоторые из них.

Base16 Ocean

Base16 Ocean Dark — конвертирована из Sublime Spacegray пакета (на скриншоте она)

Material-theme

Бинды (сочетания клавиш)

В VS Code сочетания клавиш достаточно легко меняются через меню Code > Preferences > Keyboard Shortcuts. Меня немного смущало то, что под Mac Tab/Shift+Tab не назначены, но меня рефлекторно тянет в файлах, отформатированных табами, под Маком, использовать именно эти бинды. Если вас тоже, то решается все парой строк в keybindings.json:

Нет нужного расширения?

Для VS Code есть официальная утилита Yo Code, которая позволяет сконвертировать множество расширений из TextMate и Sublime в формат Visual Studio Code.

Заключение

Надеюсь, что вы нашли здесь что-то полезное для себя. И, если вы еще только знакомитесь с VS Code, знакомство будет приятным. 🙂

Мы создали список расширений и полезных ресурсов по VS Code на github, awesome-vscode. Если у вас есть, что добавить в него — открывайте Pull Request, или просто поддерживайте авторов «звездочками». К сожалению, по правилам awesome, попасть в список awesome-репозиториев мы сможем только через несколько недель, за это время мы надеемся собрать там все самые лучшие ресурсы для редактора!

Stack Overflow і Microsoft розробили бота-помічника для Visual Studio Code

Обсяг знань у галузі програмування, комп’ютерних наук і ШІ, якими розробники діляться на платформі Stack Overflow, постійно збільшується.

Компанія Stack Overflow у співпраці з Microsoft та їх платформою Cognitive Services розробила бота, який використовує напрацювання Microsoft у галузі ШІ. Цей бот є розширенням для Visual Studio Code і дозволяє розробникам знаходити відповіді на запитання без перемикання між середовищем розробки і веб-браузером, у такий спосіб підвищуючи продуктивність.

Бот є самонавченим, і чим більше людей ним користується, тим точніші результати він зможе надавати користувачам. Код бота та інструкція з його установки доступні на сторінці GitHub.

Представники Stack Overflow у своєму блозі зазначили:

Ми захоплені створенням таких умов, щоб розробники могли взаємодіяти один з одним і стимулювати зміни в суспільстві. Підтримка обміну знаннями і використання ШІ на платформі Stack Overflow відкриє великі можливості для всіх користувачів сервісу.

Київ, Харків, Одеса, Дніпро, Запоріжжя, Кривий Ріг, Вінниця, Херсон, Черкаси, Житомир, Хмельницький, Чернівці, Рівне, Івано-Франківськ, Кременчук, Тернопіль, Луцьк, Ужгород, Кам’янець-Подільський, Стрий — за статистикою саме з цих міст програмісти найбільше переїжджають працювати до Львова. А Ви розглядаєте relocate?

Visual Studio. (проблема решена)

Подскажите, из за чего может отключаться правильное отображения плагина C# в Visual Studio Code?

Пробовал сносить винду на 1 машине. На 2 машине все работало нормально, а теперь появляется ошибка ( на скриншоте ). Отваливается плагин, вроде ссылается на фреймворк 4.5.

Только сейчас пробовал на другой машине — все работало. Перезашел в юнити — перестало работать. Может кто сталивался с такой проблемой ? Гугл не помог.

Starting OmniSharp server at 1/16/2020, 8:01:48 PM

Target: c:\Users\MrBILL\Desktop\Path of Caravan\Играбельный билд 12.01.2020\Path of Caravan\Path of Caravan.sln

OmniSharp server started.

Starting OmniSharp on Windows 6.2.9200.0 (x64)

DotNetPath set to dotnet

Located 1 MSBuild instance(s)

1: StandAlone 15.0 — «C:\Users\MrBILL\.vscode\extensions\ms-vscode.csharp-1.17.1\.omnisharp\1.32.8\msbuild\15.0\Bin»

MSBUILD_EXE_PATH environment variable set to ‘C:\Users\MrBILL\.vscode\extensions\ms-vscode.csharp-1.17.1\.omnisharp\1.32.8\msbuild\15.0\Bin\MSBuild.exe’

Registered MSBuild instance: StandAlone 15.0 — «C:\Users\MrBILL\.vscode\extensions\ms-vscode.csharp-1.17.1\.omnisharp\1.32.8\msbuild\15.0\Bin»

Detecting Cake files in ‘c:\Users\MrBILL\Desktop\Path of Caravan\Играбельный билд 12.01.2020\Path of Caravan’.

Could not find any Cake files

Project system ‘OmniSharp.DotNet.DotNetProjectSystem’ is disabled in the configuration.

Detecting projects in ‘c:\Users\MrBILL\Desktop\Path of Caravan\Играбельный билд 12.01.2020\Path of Caravan\Path of Caravan.sln’.

Queue project update for ‘c:\Users\MrBILL\Desktop\Path of Caravan\Играбельный билд 12.01.2020\Path of Caravan\Assembly-CSharp.csproj’

Detecting CSX files in ‘c:\Users\MrBILL\Desktop\Path of Caravan\Играбельный билд 12.01.2020\Path of Caravan’.

Could not find any CSX files

Invoking Workspace Options Provider: OmniSharp.Roslyn.CSharp.Services.CSharpWorkspaceOptionsProvider

Omnisharp server running using Stdio at location ‘c:\Users\MrBILL\Desktop\Path of Caravan\Играбельный билд 12.01.2020\Path of Caravan’ on host 11476.


Loading project: c:\Users\MrBILL\Desktop\Path of Caravan\Играбельный билд 12.01.2020\Path of Caravan\Assembly-CSharp.csproj

The reference assemblies for framework «.NETFramework,Version=v4.5» were not found. To resolve this, install the SDK or Targeting Pack for this framework version or retarget your application to a version of the framework for which you have the SDK or Targeting Pack installed. Note that assemblies will be resolved from the Global Assembly Cache (GAC) and will be used in place of reference assemblies. Therefore your assembly may not be correctly targeted for the framework you intend.

✨ Расширения для Visual Studio Code, которые поднимут процесс разработки на новый уровень

Давайте поговорим о Code — Visual Studio Code.

Мои дорогие читатели попросили меня рассказать о тех расширения, которые я использую для разработки. Этим мы сейчас и займёмся.

Наш VSC будет пятирогим лазеростреляющим единорогом —после того как мы снабдим его самыми полезными расширения, которыми я пользуюсь каждый день.

О, а если вы еще не используете замечательный редактор VSC, под картинкой выше есть ссылка на официальный сайт, с которого его можно загрузить.

Material Theme

Самая эпичная тема для Visual Studio Code:

Auto Import

Автоматически находит, парсит и дополняет названия методов и событий для всех доступных файлов. Поддерживает Typescript и TSX.

Import Cost

Это расширение отобразит в редакторе размер импортируемого пакета в одной строчке с соответствующим методом. Расширение использует Webpack с babili-webpack-plugin для обнаружения импортируемого объекта и оценки его размера.

Indent-Rainbow

Простое расширение, которое делает отступы более читабельными.

IntelliSense for CSS >Расширение VSCode, которое автоматически дополняет название CSS-класса для HTML-атрибута class на основе определений, найденных в вашей рабочей области или внешних файлов, на которые ссылается элемент link .

SVG Viewer

Простой способ предпросмотра SVG.

Prettier — Code formatter

Не могу жить без него — пакет VSCode для форматирования JavaScript / TypeScript / CSS с использованием Prettier.

React Native Tools

Подсказки, отладка и встроенные команды для React Native.

Sublime Text Keymap and Settings Importer

Это расширение позволяет в VSCode использовать горячие клавиши Sublime Text 3. Попробуйте потестировать его, открыв консоль сочетанием клавиш:
cmd ⌘ + P — Mac
ctrl + P — Windows

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

Очень удобная штука для тех из нас, кто привык к ST3. ��

npm Intellisense

Плагин VSCode, который автоматически дополняет имена модулей npm в операциях импорта.

lit-html

Добавляет подсветку синтаксиса и поддержку разметки HTML внутри строк JavaScript и TypeScript, как это используется в lit-html и других фреймворках.

highlight-matching-tag

Это расширение предназначено для подсветки парных открывающих или закрывающих тегов — функциональности, отсутствующей в VSCode, но которая должна бы быть встроена в редактор из коробки.

GitLens — Git supercharged

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

Git Project Manager

Git Project Manager (GPM) — это расширение Microsoft VSCode, которое позволяет вам открыть новое окно на основе git-репозитория непосредственно из VSCode.

Git History

Просмотр логов git и истории изменения файлов и сравнение веток или коммитов.

File Utils

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

Bracket Pair Colorizer

Настраиваемое расширение для раскрашивания парных скобок. Крайне полезно при работе с большим количеством обратных вызовов.

Color Highlight

Это расширение подсвечивает CSS / веб-цвета, найденные в вашем документе.

CSS Peek

Переход к CSS-свойствам идентификаторов (id) и классов непосредственно из файлов HTML. Поддерживает переключение и между файлами и быстрый переход из одного в другой.

Debugger for Chrome

Инструмент для отладки JavaScript-кода или любого другого кода в браузере Chrome.

Quokka.js

Выполняет JavaScript-код в консоли параллельно с тем, как вы его пишете. (Полезно для быстрых демонстраций).

Trailing Spaces

Мгновенно выделяет и удаляет конечные пробелы.

TypeScript Hero

Это расширение пригодится всем, кто пишет на TypeScript и хочет, чтобы VSC организовал импорты за него.

WakaTime

Метрики, инсайты и отслеживание времени, автоматически генерируемые на основании статистики вашей работы по программированию.

Vetur

Поддержка Vue для VSCode

Code Runner

Запустите фрагмент кода или целый файл сразу в нескольких языках.


PHP IntelliSense

Расширенная поддержка автозаполнения и рефакторинга кода на PHP.

vscode-icons

Иконки для редактора VSCode.

Пользуйтесь Jest от Facebook с удовольствием.

React.js code snippets

Сниппеты кода для разработки на React.js в синтаксисе ES6.

Благодарю вас за то, что прочитали эту статью! Переходите по ссылке в твиттере, чтобы узнать о других расширениях VSCode. Знаете еще какие-то полезные плагины, которые не упомянуты здесь? Пожалуйста, пишите их в комментариях❤

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

Use This Stack Overflow-Microsoft’s Programming Bot To Get Coding Answers In No Time

While the bot is intended to showcase integrations between Microsoft Bot Framework and Microsoft Cognitive Services, the developers can use this bot to ask simple queries in English language and get relevant answers.

Мастер Йода рекомендует:  JS Charting Таблицы Google Javascript

At the event, Microsoft showed how they are trying to empower developers using their tools and bring AI-driven experiences.

However, contrary to what you might be expecting, you can’t simply go ahead and try this Stack Overflow bot online. Instead, Microsoft has shared the code and instructions on GitHub page to set up the bot.

The bot components are:

  • StackBot — JS project that demonstrates the use of Bing Custom Search, LUIS, QnA Maker, and Text Analytics
  • DialogAnalyzerFunc — C# project that parses content of a screenshot using Computer Vision and Text Analytics
  • StackCode — TypeScript project to build the bot in VS Code

You must be having Node.js installed to run the Stack Overflow bot. Visual Studio Code also lets you use the bot as a programming companion, helping you increase your productivity.

Find all the required GitHub code for Stack Overflow bot here.

Как пользоваться отладчиком (в Visual Studio)

Прежде, чем создавать темы типа «Программа вылетает после запуска»,
«Выводится непонятно что» и т.п. попробуйте воспользоваться встроенным отладчиком.

Определите примерно, с какой строки начинает происходить непонятно что и поставьте там точку останова.
Это можно сделать либо щелчком мыши на этой строке левее номера строки, либо нажав клавишу F9.
Перед номером строки появится красный кружок:

Можно теперь посмотреть текущее значения переменных.
Они отображаются на вкладках внизу.
Несколько переменных автоматически отображается на вкладке Видимые (Auto). Помечено красной цифрой 2.
На вкладке Контрольные значения 1(Watch 1) (Цифра 3) Вы можете сами напечатать имена нужных переменных.
Наконец, можно просто подвести курсор мыши к нужной переменной в тексте (цифра 1), и ее значение отобразится.

После того, как Вы убедились, что текущие значения правильные можем продолжить выполнение программы.
Нажимая на клавишу F10 Вы каждый раз будете выполнять по одной строке.
Если выясниться, что ошибка именно в текущей строке, то можно нажав клавишу F11 зайти внутрь функций
которые вызываются в этой строке и аналогичным образом пройтись по коду функции.

Имеется возможность, повторно выполнить часть кода (откатиться назад). Для этого левой кнопкой мыши
схватите желтую стрелку и потяните ее назад по коду до желаемого места.
Таким образом, сможете, например, повторно ввести другие значения.
Этот же метод позволяет повторно выполнить код, в который Вы внесли небольшие изменения.

25.09.2014, 09:12

Как пользоваться отладкой в Visual Studio?
Здравствуйте. Я новичек, недавно начал изучать ООП на С# Есть программка состоящая из 3 класов.

Проблемы с отладчиком в Visual Studio Express 2012
Доброго времени суток, уважаемые! Вопросов у меня несколько: 1. При написании в С# вместо.

Как продолжить пользоваться бесплатной лицензией Visual Studio 2020
Доброго времени суток, дамы и господа. Подскажите пожалуйста с такой темой, как продление.

Как открыть проект созданный в Visual Studio 2012 в Visual Studio 2008?
Нашел здесь же тему открытия Visual Studio 2012 в Visual Studio 2010 там написано так. Открыть.

Как проект на visual studio 2012 открыть на visual studio 2008
Программа(курсовая) создана на 2012, надо показать и чтобы работала на 2008. Подскажите пожалуйста.

30.09.2014, 20:48

Комментарий модератора
Эта тема открыта для добавления информации.
Если вы желаете обсудить данную тему, внести поправки или замечания — просьба писать вот в эту тему: https://www.cyberforum.ru/faq/thread1766346.html
Если у вас возник вопрос по отладке в Visual Studio, создайте новую тему в данном разделе.
Меню пользователя @ tezaurismosis
Читать блог
04.02.2015, 22:52 3

добавлю инфу про такую фичу как Call Stack (стек вызовов). Стек вызовов функций.
Найти можно из менюшки: Debug->Windows->Call Stack. Меню доступно, когда студия стоит
на какой-нибудь точке останова. На картинках первого поста в правой нижней области есть вкладочка
с надписью «Ст. » — вот это скорее всего оно. Стек вызовов.

Где полезен:
Часто на форуме приводят код с вопросом: при выполнении крашится с таким то окошком. Что делать.
Окошки на самом деле разные. Нарушение прав доступа, либо ассерт какой-то сработал, либо что-то еще.
Так вот когда вылазиет такое окошко, нужно нажать на кнопку Break или Repeat. Студия перебросит вас
в код, который вызвал проблему (желтая стрелочка). Скорее всего это будет какая-то функция из студийных
исходников, трогать которые не надо. Так вот, чтобы понять, как программа пришла в эту точку
как раз пригодится стек вызовов. Вы просто поднимаетесь по нему нажимая строчку в этом стеке и студия
вас будет перебрасывать на реализацию соответствующей функции. Если эта функция ваша — смотрите
значение переменных, при которых нижележащие функции тупанули. Если проблема где-то выше — значит
поднимаетесь по стеку выше, попутно расставляя точки останова для запуска кода еще раз. На этот раз
студия уже будет останавливаться на подозрительных с вашей точки зрения участках кода и вы сможете
проконтролировать выполнение в этих точках.

Visual Studio Code для начинающих

Visual Studio Code — редактор кода, который поддерживает работу с более чем 30 языками программирования и форматами файлов, включая C#, TypeScript, JavaScript. Не просто редактор кода, а полезный инструмент разработчика, обладающий дополнительными возможностями.

VS Code можно использовать на компьютерах под управлением Windows, OS X и Linux. Инструмент вышел весной 2015 года, и постоянно обновлялся. За время существования Visual Studio Code расширил свой функционал, список поддерживаемых языков, основываясь на отзывах и пожеланиях пользователей.

Редактор базируется на продуктах с открытым кодом, что иногда является важным критерием для разработчиков, поддерживает интеграции с системами контроля версий, встроенный отладчик и возможности подключения внешних инструментов.

Подготовленные видеоматериалы содержат различные аспекты работы с Visual Studio Code, включая работу сценарии работы с различными языками программирования, интеграцию с Git, Visual Studio Online и Unity3D, отладку приложений и многое другое.

Visual Studio Code простая установка и настройка инструмента

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

Как работать с новым редактором кода

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

Быстрая разработка с Codesnippets

Visual Studio Code позволяет вставлять заранее заготовленные блоки кода. Эта возможность способна значительно облегчить разработку и упростить задачу переиспользования кода.

Продолжите работу с GIT в Visual Studio Code

Если вы привыкли работать с Git, то попробуйте воспользоваться им вместе с Visual Studio Code.

Используйте VisualStudioOnline для управления исходным кодом

В предыдущем видео мы обсудили, как установить Git и использовать его с локальным хранилищем. Для полноценного использования Git воспользуйтесь популярными провайдерами — GitHub и Visual Studio Online.

Интегрируйте Visual Studio Code с GitHub

Если вам необходимо опубликовать проект с открытым исходным кодом — воспользуйте GitHub, но если код должен быть закрыт от внешнего мира, то необходимо будет приобрести подписку или воспользоваться Visual Studio Online.

Инструмент для работы с Unity проектами на Mac

Используйте Unity plugin, для интеграции Visual Studio Code и Unity.

Внешние компиляторы, средства отладки и тестирования

Следующая важная возможность в Code — это задачи. Благодаря задачам вы можете выполнить любую команду командной строки в контексте Visual Studio Code и просмотреть результаты работы прямо из среды разработки. Таким образом, вы можете использовать внешние компиляторы, отладчики, средства тестирования и многое другое.

Встроенный отладчик для Node.jsи Monoпроектов

Visual Studio Code поддерживает отладку для Node.js проектов и для проектов на Mono. Поскольку Unity использует Mono, то мы можем так же использовать отладчик для подобных проектов без каких-либо проблем.

Опубликуйте сайт в Azure с вашего Mac


Используя Visual Studio Community, доступную для установки на Windows, вы без лишних усилий смогли бы выполнить развертывание приложений, настройку пакетов и создавать отдельные службы. Несмотря на то, что редактор Visual Studio Code лишен этих возможностей, существует способ, который облегчит процесс развертывания ваших веб-сайтов из Code в Microsoft Azure. При помощи сервиса Visual Studio Online.

Возможности VisualStudioCodeдля JavaScriptразработчиков

Достаточно большое количество разработчиков используют Visual Studio Code для построения веб-приложений и здесь следует упомянуть JavaScript, и сопутствующие технологии, такие как Node.js, TypeScript и т.д. Visual Studio Code предоставляет множество интерфейсных возможностей для JavaScript.

Ещебольшевозможностейс TypeScript

В случае некоторых действительно сложных проектов у разработчиков появляется проблема с поддержкой JavaScript кода, ведь в сравнении с C#, C++ и Java, языку JavaScript не хватает статических типов, классов, интерфейсов и других атрибутов современных ООП языков. В результате, классические средства разработки лишены многих полезных возможностей, связанных с IntelliSense и рефакторингом, а найти ошибки становится не очень просто.

Именно поэтому многие разработчики предпочитают TypeScript, CoffeScript или системы наподобие Dart.

TypeScript достаточно популярный язык на сегодня и имеет «родную» поддержку в Visual Studio Code.

Оцените работу с Node.js в новом редакторе кода

Visual Studio Code

Программист постоянно работает с исходными кодами. Инструменты для написания кода можно разделить на две группы: среды разработки (IDE) и редакторы. Первые предоставляют большие возможности при разработке программ: отладку, управление пакетами, интеграцию с тестами и тд. Например: Visual Studio, Intellij IDEA, Eclipse. Редакторы – легковесные программы, в которых нет таких широких возможностей как в IDE. Тем не менее они выполняют главную функцию – помогают быстро писать код. А многие из них предоставляют богатые возможности по настройке под себя. Примеры редакторов кода: Sublime Text, Atom, Notepad++.

Visual Studio Code – промежуточный вариант между IDE и простым редактором. Он позиционируется как редактор кода, но содержит ряд возможностей, свойственных средам разработки. Сегодня мы разберемся, что из себя представляет VS Code, и рассмотрим некоторые функции, которые могут вам пригодиться. Поэтому пост заинтересует и тех, кто не знаком с этим редактором, и активных пользователей, которые найдут полезное для себя.

VS Code

Visual Studio Code – редактор кода от Microsoft. Он бесплатный, и скачать его можно на официальном сайте. VS Code соответствует новой политике Microsoft, поэтому он опенсорсный и работает на нескольких платформах. Рассмотрим отличительные черты этого редактора:

  • Скорость. Часто возникает ситуация, когда нужно поправить пару файлов в проекте или посмотреть, как что-то реализовано. В такой ситуации открывать тяжеловесную IDE совсем не хочется. Время запуска VS Code сопоставимо с другими редакторами кода.
  • Кастомизация. При разработке программ можно повысить свою продуктивность, настроив редактор под себя. Создавайте сниппеты, меняйте комбинации клавиш и создавайте новые, измените внешний вид редактора. VS Code предоставляет большие возможности для кастомизации и сегодня мы посмотрим на них подробно.
  • Поддержка различных языков. VS Code понимает более 30 языков программирования. Под этим я имею ввиду выделение разными цветами методов, локальных переменных и так далее. Кроме того, из коробки полностью поддерживаются распространенные языки для веб-разработки: JavaScript, TypeScript, HTML, CSS. Для них работают все фичи, которые нужны при полноценной разработке: подсветка ошибок, подсказки по их исправлению, IntelliSense, навигация по коду, отладка, рефакторинг. Однако, это не значит, что остальные языки обделены. Перейдем к следующему пункту.
  • Расширяемость. В VS Code богатая коллекция плагинов. С их помощью можно не только включить поддержку любых языков программирования, но и значительно повысить свою производительность.
  • IntelliSense. Все предыдущие пункты не новы для других редакторов кода, но, как уже было сказано, VS Code – не просто редактор кода. Он предоставляет возможности, которые свойственны IDE, и IntelliSense одна из них. Этим термином называется умный автокомплит. Например, во время ввода он может подсказать, какие методы и свойства есть у объекта.
  • Отладка. Еще одна стандартная фича IDE. Обходы методов, Call Stack, просмотр состояний локальных объектов, точки останова, в том числе и условные – все это есть.

Внешний вид

В нужной директории введите в терминал code . и увидите подобную картину:

Слева находятся пять блоков. Посмотрим, за что отвечает каждый из них.

  • Explorer. На изображении выше открыт этот блок. В нем определяется workspace – файлы, с которыми вы работаете. Имя рабочего пространства соответствует корневой директории. Над ним перечислены все открытые в редакторе файлы. Кружком помечены те, которые не сохранены.
  • Search. Поиск по workspace. Можно искать с учетом регистра, целых слов и по шаблону. В этом же блоке работает замена строк. Для перехода в режим поиска можно использовать комбинацию CTRL + SHIFT + F . При наведении курсора на любой блок VS Code подскажет какие комбинации клавиш им соответствуют.
  • Source Control. Встроенная поддержка git и других систем контроля версий.
  • Debug. Все для отладки: Variables, Call Stack, Watch, Breakpoints.
  • Extensions. Набор всевозможных плагинов, которые можно установить. Вот список самых популярных:

В центральной части редактора вкладки с открытыми файлами. Несохраненные также помечаются кружком. При запуске VS Code открывается вкладка Welcome. Начать изучение редактора советую с нее. Открыть ее всегда можно через меню Help. Еще один способ изучить возможности VS Code – нажать CTRL + SHIFT + P . Так вы откроете Command Palette, где перечислены все команды редактора. Рядом с названием команды указывается комбинация клавиш, которая ей соответствует.

В нижней части – несколько других полезных вкладок. В Problems перечислены все ошибки и предупреждения от VS Code. Во время отладки можно смотреть значения локальных объектов в разделе Debug Console, а результаты выполнения во вкладке Output. В VS Code есть встроенный терминал, который открывается в корневой директории. По кнопке “плюс” можно добавлять терминалы, например, чтобы выполнять команды в разных директориях внутри проекта. По умолчанию для Windows в VS Code используется Powershell терминал, но это можно изменить. Займемся этим в следующем разделе.

Кастомизация

В VS Code можно настроить очень многое под свои нужды. Меняйте внешний вид редактора и автоматизируйте ваши действия.

Изменение темы

Выберете цветовую гамму, которая нравится вам больше. В дефолтном варианте у редактора темная тема. Для смены нажмите CTRL + K, CTRL + T . Если набора из 14 стандартных тем будет недостаточно, введите в разделе с плагинами category:themes и выберете подходящую для вас.

Изменение настроек

Все дефолтные настройки VS Code перечислены в формате JSON. Чтобы переопределить их для себя, нужно создать файл settings.json и перечислить настройки, которые вы хотите изменить. Для этого нажмите CTRL + , . Слева перечислены все стандартные настройки и описание того, зачем они нужны. Справа – две вкладки: для пользовательских настроек и для настроек конкретного workspace. Для изменения дефолтного значения просто кликните на значок карандаша справа от настройки.

Рассмотрим некоторые настройки, которые могут вам пригодиться:

  • Настройки редактирования.
    • Размер шрифта. «editor.fontSize»: 14
    • Размер таба. «editor.tabSize»: 4
    • Шрифт. «editor.fontFamily»: «Consolas, ‘Courier New’, monospace»
    • Перенос слов. «editor.wordWrap»: «on»

    Если с первыми тремя настройками все понятно, то последнюю нужно пояснить. Когда она включена, слово, которое не помещается по длине в размер редактора, будет целиком перенесено на следующую строку. При этом горизонтальный скролл никогда не появится. Удобная настройка, которая по умолчанию отключена.

  • Настройки файлов.
    • Автосохранение. «files.autoSave»: «on»
    • Задержка при автосохранении. «files.autoSaveDelay»: 5000

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

  • Терминал.
    • Размер шрифта. «terminal.integrated.fontSize»: 14
    • Выбор терминала. «terminal.integrated.shell.windows»: «C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe»
    • Тип курсора. «terminal.integrated.cursorStyle»: «line»

    Все настройки, связанные с терминалом, находятся в разделе Integrated Terminal. Например, вы можете изменить отображение курсора с блока на линию.

  • Специфичные для языка. Настройки для кода также можно ограничивать конкретными языками. Для этого нужно перед настройкой указать идентификатор языка в квадратных скобках: «[csharp]»: < "editor.wordWrap": "off" >. Идентификаторы можно посмотреть в списке всех языков ( CTRL + K, M ).

Создание задач

Зачем нужны задачи покажу на конкретном примере. Для локального запуска сайта я использую команды:

Для того, чтобы делать это, не выходя из редактора, можно использовать встроенный терминал. Однако, можно автоматизировать и этот процесс. Для этого существуют задачи. Откроем их конфигурацию через Command Palette: Tasks. Configure Tasks . В открывшемся файле tasks.json создадим кастомную задачу.

Однако, это несильно автоматизирует наш процесс. Для запуска этой задачи нужно открывать Command Palette и искать ее среди других команд. Чтобы запускать задачу по кнопке, откроем файл keybindings.json (в Command Palette: Preferences. Open Keyboard Shortcuts File ) и добавим нужные комбинации клавиш.

Также задачи часто используются для автоматизации сборки кода и прогона тестов.

Создание сниппетов

Сниппетом называется фрагмент кода, который можно многократно использовать. Для этого нужно ввести ключевое слово, и он будет вставлен в текст программы. Создадим простой сниппет, который генерирует цикл for для языка C#. В Command Palette введите Preferences. Open User Snippets и выберите нужный язык программирования. Так выглядит сниппет для цикла for:

Сниппет – не просто текст. В нем можно определять переменные и указывать для них индексы, в результате чего будут изменяться все вхождения переменной сразу. Переходить между переменными можно с помощью таба.

Полезные комбинации клавиш

Если вы уже привыкли к горячим клавишам в других редакторах или IDE и не хотите из-за этого переходить на VS Code, то вы можете подключить знакомые настройки, просто установив нужный плагин.

Рассмотрим стандартные команды и соответствующие им комбинации клавиши, которые полезны в самых разных ситуациях. Маппинг команд и сочетаний клавиш можно открыть через CTRL + K, CTRL + S и переопределить на свой вкус.

  • Zen Mode ( CTRL + K, Z ). В этом режиме окно с кодом занимает весь экран. Это располагает к максимальной сосредоточенности на этом файле и работе. Он отличается от полноэкранного режима ( F11 ), в котором все пространство занимает именно редактор. В режиме Zen вы не будете отвлекаться ни на что. Для переключения на другой файл используйте комбинацию CTRL + P . Она работает во всех режимах и позволяет искать именно по файлам в рабочем пространстве. Выход из режима Zen осуществляется двойным ESC .
  • Markdown Preview ( CTRL + K, V ). Полезная операция для тех, кто пользуется Markdown. Она отображает справа от текста результаты вашей верстки.
  • Дублирование строки вниз/вверх ( ALT + SHIFT + DOWN/UP ).
  • Перемещение строки вниз/вверх ( ALT + DOWN/UP ).
  • Комментирование строки ( CTRL + / ).

Команды выше работают и для нескольких строк.

  • Вставка новой строки вверх/вниз ( CTRL + ENTER / CTRL + SHIFT + ENTER ).
  • Выделение строки ( CTRL + I ).
  • Выделение слова ( CTRL + D ).
  • Множественный курсор. ( ALT + CLICK ).

Заключение

Мне трудно представить свой рабочий процесс без VS Code. Если вы им не пользуетесь, то советую хотя бы попробовать. Сегодня мы посмотрели на малую часть того, как можно упростить работу с кодом с помощью этого редактора. В следующий раз мы рассмотрим некоторые полезные плагины, которые есть в маркете VS Code.

Written on February 17th, 2020 by Alexey Kalina

Мастер Йода рекомендует:  Как работают Web сервисы ASP.NET
Добавить комментарий