Содержание
Visual Studio — это замечательная IDE с массой возможностей для разработчиков, однако, для web-разработчиков не менее качественным, быстрым и удобным является инструмент от Microsoft под названием Visual Studio Code или просто — VS Code. И сегодня мы настроим VS Code для работы с C# и создадим своё первое приложение Blazor Server.
Установка и настройка Visual Studio Code
Для установки VS Code необходимо перейти на сайт https://code.visualstudio.com/ и скачать последнюю стабильную версию редактора:
Процесс установки VS Code не отличается от установки любой другой программы Windows — необходимо принять лицензионное соглашение, прочие параметры установки можно оставить по умолчанию. После установки VS Code откроется главное окно приложения где вы можете выбрать цветовую схему редактора, а также, при желании, установить языковой пакет, чтобы руссифицировать интерфейс:
Если вы согласитесь установить языковой пакет, то VS Code произведен установку и автоматически перезапуститься.
Установка расширений VS Code
Чтобы установить какое-либо расширение для VS Code, необходимо перейти на вкладку «Расширения». Кнопка перехода к списку расширений располагается в окне слева:
В VS Code можно работать с любыми языками программирования, однако, для каждого из языков, для нашего удобства, необходимо устанавливать отдельные расширения, которые позволят нам сделать работу в VS Code более комфортной и удобной. Чтобы найти необходимое расширение, необходимо набрать его название (или часть названия) в строке поиска. Например, по запросу «C#» можно получить следующий список расширений:
Чтобы установить какие-либо расширение, необходимо нажать кнопку «Установить». Для C# я пока установил следующие расширения:
«Hello World» на C# в VS Code
Попробуем написать своё первое приложение в VS Code. Для этого:
Переходим в проводник
Нажимаем кнопку «Открыть папку» и указываем путь к папке на диске в которой будет располагаться наш проект. Например, я указал папку «C:\VSCode». VS Code спросит доверяем ли мы файлам в этой папке? Указываем, что полностью доверяем:
Теперь нам необходимо создать проект. Для этого, в главном меню выбираем «Терминал -> Создать терминал«:
В нижней части окна появится окно терминала Windows Power Shell:
В терминале набираем следующую команду: dotnet new console и нажимаем Enter. В терминале появится сообщение о том, что проект успешно создан, а в списке файлов слева появятся уже знакомы нам файлы шаблона консольного приложения:
Теперь попробуйте открыть файл Program.cs, выбрав его в списке файлов и увидите в терминале, что VS Code самостоятельно доустанавливает необходимые пакеты расширений для работы с приложениями C#, в том числе и отладчик для приложений .NET, Razor Language Server и другие необходимые для работы компоненты
Чтобы запустить приложение, необходимо перейти в окно терминала и набрать команду dotnet run. Результат работы программы отразится в том же окне терминала:
После того, как мы убедились, что VS Code запускает нашу первую программу на C#, а минимально необходимые пакеты и расширения установлены, можно приступать к дальнейшей настройке VS Code для работы с Blazor.
Автоматическая настройка VS Code для работы с Blazor
Для того, чтобы VS Code смогла установить все необходимые пакеты для работы с Blazor, мы можем поступить аналогично, как и с обычным консольным приложением, то есть создать проект, например, Blazor Server, а VS Code автоматически установит необходимый набор пакетов для работы с Blazor.
Создадим на диске C:/ папку с именем BlazorApp и в VS Code выберем её:
теперь в терминале набираем следующую команду: dotnet new blazorserver -f net6.0. Эта команда создает в папке приложение Blazor Server, нацеленное на работу с .NET 6. Как только будет создан шаблон проекта VS Code предложит установить необходимые ресурсы для работы с этим типом проектов — соглашаемся установить:
Теперь мы можем запустить наше приложение. Заходим в терминал и набираем команду: dotnet watch. В терминале вновь появится информация от запущенного приложения:
а в браузере откроется страница нашего приложения:
Теперь попробуйте открыть, например, файл Pages/index.razor и что-либо в нем изменить. Как только вы сохраните изменения (нажмете Ctrl+S) Ваше приложение автоматически пересоберется и обновиться в браузере. Например, я изменил строку «Hello, world!» на «Привет, мир». Вывод в терминале:
Результат в браузере:
Установка расширений для Blazor
В принципе, уже на этом этапе работы с VS Code мы можем разрабатывать приложения Blazor, но для большего удобства, установим ещё несколько расширений VS Code для Blazor.
ASP.NET Core Switcher
Это расширение позволяет быстро переключаться между представлениями, контроллерами, страницами, моделями страниц и компонентами Blazor в ASP.NET Core с помощью горячих клавиш, контекстного меню или палитры команд.
Razor+
Расширение Razor+ обеспечивает «Улучшенную подсветку синтаксиса Razor для кода в VS», работая с директивами Razor и Blazor.
Blazor Snippets
Это расширение позволяет ускорить работу с компонентами Blazor, используя большое количество различных сниппетов. Например, можно набрав буквально два-три символа получить в редакторе «скелет» компонента Blazor:
Итого
Сегодня мы, в общих чертах, познакомились с редактором кода Visual Studio Code, настроили VS Code для работы с .NET C#, а также создали свое первое приложение Blazor Server и установили несколько полезных расширений, облегчающих работу в VS Code с Blazor.