Какие технологии веб программирования можно использовать при работе в visual studio
Мотивация
-
— Нужен для установки различных библиотек в JavaScript, требуется повсеместно. — Нужен если JavaScript и другой контент нужно упаковывать, минифицировать, использовать Less вместо ванильного CSS, шаблонизаторы HTML, использовать транспиляторы JavaScript и тому подобное. — Его можно использовать как транспайлер из новых версий JavaScript в старые. Также можно использовать сам язык TypeScript. Два в одном получается, плюс грех не использовать так как в Visual Studio сделана неплохая его поддержка.
Умея быстро создать такое приложение дальше уже можно смело изучать любые веб-технологии (включая сам npm, Webpack и TypeScript), при этом сервер будет на родном дотнете.
Стандартный компилятор TypeScript в данном туториале отключается, и используется тот, который является модулем для npm.
Подготовка
Что понадобится скачать и установить для начала работы
Создание проекта
Теперь у нас есть стартовый проект, он должен компилироваться и запускаться.
В случае, если используется git, то сразу добавляем .gitignore файл в папку с solution-ом (Там же инициализируем git репозиторий). Файл .gitignore для solution-ов в Visual Studio можно взять отсюда.
Упрощаем типовой проект
Далее изменим проект так, чтобы он получился максимально простым.
Сделаем из него Hello World.
Удаляем следующие файлы
- bower.json (и вложенный в него .bowerrc), bundleconfig.json
- Все содержимое папки wwwroot. Можно оставить favicon.ico.
- Папка Views — удаляем все внутренности, кроме Views/Home/Index.cshtml
В файле Controllers/HomeController.cs в классе HomeController
заменяем внутренности на следующий код
По сути тут убирается все кроме методов Index() и Error() , при этом Error() теперь возвращает строку "Error" вместо вьюшки (так как мы ранее удалили файл с этой вьюшкой).
Последний штрих — заменяем содержимое файла Views/Home/Index.cshtml на следующее
Все, теперь у нас есть базовый максимально упрощенный проект. Его можно скомпилировать и запустить, на странице будет отображаться текст "Hello world"
Добавляем npm
Добавляем в проект файл package.json
Вместо "yourappname" вписываем название проекта маленькими буквами.
npm при своей работе может писать в лог с названием npm-debug.log. Стоит исключить его из проекта, чтобы не мешал. Это можно сделать либо вызвав в студии на нем контекстное меню и выбрав Exclude From Project. Либо, в случае если он еще не создан (Скорее всего, так оно и есть), можно отредактировать файл проекта .csproj, добавив в корневой тег следующее
Все, теперь у нас есть поддержка npm, в зависимостях проекта студия теперь показывает узел "npm".
Если построить проект (А так же при открытии проекта, изменении файла package.json и т.д) начнется процесс восстановления зависимостей npm, в случае если они указаны (Сейчас их нет). Зависимости скачиваются в папку node_modules в папке проекта (Студия не воспринимает эту папку как часть проекта).
Добавляем Webpack
Webpack является зависимостью npm, по этому его нужно добавить в package.json как зависимость. Так как он не будет использоваться в клиентском JavaScript коде, он объявляется как dev dependency. Для нас это значит что он будет работать как дополнительный инструмент компиляции для Visual Studio, ни на сервере, ни на клиенте его не будет, на клиенте же будет тот контент (включая JavaScript код), который Webpack сгенерирует.
Кроме самого Webpack-а понадобятся также две вещи, облегчающие работу (Тем не менее они не обязательны)
Сначала скачаем и установим расширение для Visual Studio, его можно найти по названию "NPM Task Runner", либо скачать по этой ссылке.
Теперь добавим в package.json следующие строки (добавляем внутрь корневых фигурных скобок)
В "devDependencies" мы указали сам Webpack и плагин для очистки того, что он генерирует.
В "scripts" мы указали скрипт с названием "webpack-script" , который будет запускать Webpack (В этот момент он будет генерировать контент, транспилировать код и тд). Расширение Visual Studio, которое мы установили ранее делает так, что этот скрипт будет виден студии как задача, которую можно выполнить, таким образом мы можем запланировать эту задачу на выполнение при построении приложения.
В "-vs-binding" мы указали, что Visual Studio должна вызывать задачу "webpack-script" (Которую студия теперь видит, благодаря установленному расширению) каждый раз перед построением проекта.
Теперь нужно настроить сам Webpack. Он настраивается в с помощью JavaScript скрипта webpack.config.js, который будет выполняться через node.js в момент вызова задачи webpack-script . Добавим файл webpack.config.js в проект и заполним его содержимое следующим кодом
Тут мы настроили входной и выходной пути к JavaScript файлам, а также прописали ранее добавленный плагин для очистки выходной папки.
Со стороны клиента выходной файл будет находится по адресу ~/bundle/script.js, где ~ это адрес сайта, на котором работает веб-приложение.
Изменим файл Views/Home/Index.cshtml так, чтобы он включал выходной файл, и, чтобы скрипт мог менять текст на странице (по id элемента "helloworld").
Для этого заменим внутренности тега на следующее
В случае, если используется git, также следует исключить генерируемые Webpack-ом файлы. Для этого создадим еще один файл .gitignore, но теперь уже в папке проекта (Не путать с папкой solution-а)
Студия при этом будет показывать .gitignore файл в проекте, чтобы этого не происходило, в в файле проекта .csproj надо добавить следующие строки внутри корневого тега (Ну или через контекстное меню по файлу -> Exclude From Project)
Все, теперь проект полностью настроен под использование npm и Webpack. Если скомпилировать и запустить приложение, на странице должен отобразиться текст "Hello world from script"
На этом этапе уже можно устанавливать JavaScript библиотеки, объявляя их в разделе "dependencies" в package.json и использовать их в Scripts/main.js, подключая эти библиотеки как модули через функцию require("название библиотеки") . Например, если установить таким образом библиотеку "jquery", то файл Scripts/main.js можно переписать следующим образом (Примечание: это просто пример, для продолжения не обязательно ни устанавливать jquery, ни изменять main.js)
Добавляем TypeScript
Прежде всего, нужно отключить стандартную транспиляцию TypeScript. Для этого нужно в файле проекта .csproj добавить следующие строки внутри корневого тега
Далее, нужно добавить TypeScript как dev dependency для npm. Для этого в файл package.json в разделе "devDependencies" добавляем следующее
Теперь нужно создать файл конфигурации для компилятора TypeScript. Создаем файл tsconfig.json следующего содержания
Описание некоторых указанных в этом файле значений
- "allowJs": true — разрешаем транспиляцию из JavaScript в JavaScript (Из новой версии языка в старую. Расширение файлов .js)
- "target": "es5" — выходная версия JavaScript, в которую будет транспилиться TypeScript и входной JavaScrpt
- "module": "es2015" — синтакс для работы с модулями
- "moduleResolution": "node" — стратегия разрешения модулей — такая же как в node.js
- "sourceMap": true — включаем генерацию данных для отладки TypeScript
- "include": [ "./Scripts/*" ] — указываем, откуда брать исходники .ts и .js, которые надо транспилировать в выходной JavaScript
Далее нужно подружить TypeScript с Webpack-ом. Для этого заменяем файл скрипта для настройки конфигурации Webpack-а webpack.config.js на следующий (По сути мы меняем некоторые места, но чтобы не писать все изменения, выкладываю полный файл)
Тут мы поменяли расширение входного скрипта с .js на .ts, указали, что входной скрипт нужно пропускать через загрузчик TypeScript ( loader: "ts-loader" ) и сделали некоторые другие вещи.
И последний шаг — переименовываем файл входного скрипта с Scripts/main.js на Scripts/main.ts, внутренности можно оставить прежними.
Так же теперь доступна отладка TypeScript из Visual Studio, можно во входном .ts файле поставить точку останова, запустить проект в режиме отладки (Запускать при этом надо в браузерах chrome либо internet explorer, иначе отладка работать не будет, также в chrome у меня оно работает только когда я после загрузки страницы явно нажимаю refresh страницы, видимо отладчик к chrome подсоединяется не сразу). При этом обратите внимание что точки останова ставятся во входных файлах, но реално код работает выходной (В выходном коде в виде комментария webpack записывает информацию нужную для маппинга с выходного на входные файлы).
Можно создавать и другие входные файлы в папке Scripts, в виде .ts или .js и те и другие будут полностью поддерживать новый стандарт EcmaScript (Выходной файл же будет es5 стандарта). Для подключения дополнительных входных файлов нужно оформить их в виде модулей и подключать в main.ts через оператор import либо функцию require() .
Еще небольшое замечание — выходные файлы (те, что в папке wwwroot/bundle/) лучше не исключать из проекта через .csproj файл, так как если студия их не видит, отладка входных файлов работать перестает.
Легко меняйте языки и типы проектов в лучшем в мире редакторе HTML5, CSS3 и JavaScript. Предоставьте разработчикам интерфейсов мощные возможности LESS и SASS.
Контейнеры ПО
Создавайте, отлаживайте, тестируйте и развертывайте контейнеры ПО
Вы можете уверенно создавать и развертывать свои приложения, используя средства разработки контейнеров Visual Studio. Создавайте образы Docker со всеми зависимостями своих приложений, чтобы упростить их запуск в разнообразных службах Azure или других средах размещения контейнеров.
Множество платформ
Веб-платформы
Angular, jQuery, Bootstrap, Django, Backbone.js и Express
Увеличьте производительность с помощью мощных веб-платформ. Visual Studio включает в себя IntelliSense для клиентского кода JavaScript, а также запускает расширенную поддержку таких наиболее популярных современных веб-платформ, как Angular и Bootstrap.
Открытый код
Диспетчеры пакетов
LibMan, NuGet, npm
Расширяемая экосистема
Расширьте возможности Visual Studio, изучите наше сообщество и сделайте его своим!
Настройте Visual Studio с помощью тысяч расширений, предлагаемых в постоянно растущей экосистеме, или даже создайте собственные расширения.
Масштаб облака
Развертывание на любом узле, масштабирование до облака
Visual Studio содержит интегрированные инструменты для развертывания веб-приложения на любом узле или для его масштабирования в облаке Microsoft Azure. Публикуйте веб-сайты и виртуальные машины и управляйте ими из Visual Studio.
Лучший редактор кода
Универсальный инструмент с интегрированной средой разработки мирового уровня
Пишите, редактируйте, изучайте, отлаживайте, тестируйте и проверяйте код в Visual Studio. Управляйте исходным кодом, отслеживайте ошибки и рабочие элементы в Azure DevOps или Team Foundation Server (TFS). Работайте с репозиторием Git на свой выбор, включая те, что доступны в GitHub. Получите беспрецедентное представление о коде с помощью CodeLens, получив все, что вам нужно знать, в одной строке.
Лучший отладчик
Универсальный инструмент с интегрированной средой разработки мирового уровня
Visual Studio Code включает встроенную поддержку JavaScript, TypeScript и Node.js, поэтому это отличный инструмент для веб-разработчиков. Visual Studio Code — это легкий, но мощный редактор исходных кодов, доступный для Windows, Linux и macOS.
В этой статье представлен обзор расширений для Visual Studio Code, которые добавляют функции для пользователей Microsoft Edge DevTools.
Microsoft Edge Расширение DevTools для Visual Studio Code
С расширением Microsoft Edge DevTools для Visual Studio Code можно использовать средство Elements браузера Microsoft Edge в Visual Studio Code. Используйте средство Elements для:
- Присоединение к экземпляру или запуск экземпляра Microsoft Edge.
- Отображение структуры HTML в режиме запуска.
- Обновление макета.
- Устранение проблем со стилем.
В Visual Studio Marketplace содержится больше сведений о Microsoft Edge средствах для Visual Studio Code.
Установка расширения
Чтобы установить расширение Microsoft Edge DevTools:
В Visual Studio Code перейдите к расширениям. Для этого можно нажать Ctrl ++ Shift``X кнопку Windows Linux или X Command + Shift +macOS.
Поиск marketplace для расширения Microsoft Edge для VS Code, выберите расширение, а затем выберите Установить.
Расширение webhint для Visual Studio Code
Используйте веб-хинт, настраиваемый инструмент подкладки, чтобы улучшить функциональность вашего сайта, в том числе:
- Доступность.
- Производительность.
- Совместимость между браузерами.
- PWA совместимости.
- Безопасность.
веб-хинт проверяет код на наличие лучших практик и распространенных ошибок. Определение и устранение проблем в файлах, включая HTML, CSS, JavaScript и TypeScript. Подсказки отображаются как волнистые в текстовом редакторе и суммируются в области Проблем :
VS Code (Visual Studio Code) — относительно новый текстовый редактор, выпущенный Microsoft. Он, также как и Atom, основывается на облочке Electron (написанной командой Atom), кардинально отличаясь реализацией самого редактора.
VS Code обладает своими уникальными фичами, такими, как, например, IntelliSense "из-коробки".
В этой статье я бы хотел поделиться тем, что нашел для себя полезным в VS Code для веб-разработки.
Осторожно! Под катом много картинок и гифок.
Stable vs Insiders
В настоящий момент, чтобы получить достойную поддержку JSX в VS Code, прийдется немного пот помучаться и установить два расширения:
Последний, впрочем, может быть заменен на XO.
Если вы выбрали ESLint, то в проекте должен быть .eslintrc следующего содержания:
Если вы все сделали правильно, то теперь JSX будет подсвечиваться без ошибок:
В качестве линтера файлов стилей я рекомендую расширение stylelint. В качестве "бекенда" он использует PostCSS, что означает, что поддерживаются любые файлы стилей, поддерживаемые последним.
Чтобы включить stylelint в VS Code, понадобится снова пойти в настройки и добавить:
Я не фанат сниппет-плагинов. Но если вы, напротив, являетесь таковым, то на Visual Studio Marketplace вас ждет огромный раздел с ними
Align
Beautify
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-репозиториев мы сможем только через несколько недель, за это время мы надеемся собрать там все самые лучшие ресурсы для редактора!
Visual Studio Code — редактор кода, с поддержкой более 30 языков программирования и форматов файлов, а так же обладающий рядом дополнительных, полезных возможностей.
Инструмент вышел весной этого года, и ранее мы уже успели рассказать о базовых возможностях этого кроссплатформенного редактора. Напомню, что использовать VS Code можно на компьютерах под управлением Windows, OS X и Linux.
Однако, за полгода существования инструмент регулярно обновлялся и продолжает обновляться раз в месяц, расширяя свой функционал, список поддерживаемых языков, постоянно улучшая существующие возможности, основываясь на отзывах и пожеланиях пользователей.
Полный список поддерживаемых языков на текущий момент:
Системы контроля версий
Интеграция с Git
Visual Studio Code поддерживает локальное и удаленное Git хранилища. Как только Git утилита будет установлена, Visual Studio Code необходимо перезапустить и инициализировать Git для текущего рабочего пространства:
Начиная с этого момента с Git можно работать локально. Переключившись на Git окно можно увидеть все измененные файлы и сравнить их содержимое с предыдущими версиями:
VS Code так же позволяет работать с различными ветвями проекта:
Visual Studio Online
Для полноценного использования платформы Git может потребоваться сторонний провайдер. В этой статье рассмотрим GitHub и Visual Studio Online. Если необходимо опубликовать проект с открытым исходным кодом — используйте GitHub, но если код должен быть закрыт от внешнего мира, то нужно будет приобрести подписку.
Visual Studio Online не поддерживает проекты с открытым кодом, но позволяет создавать закрытые проекты и если ваша команда состоит из 5 и менее разработчиков, то использование Visual Studio Online будет бесплатным. При этом, нужно отметить, что система контроля версий, это всего лишь одна из возможностей Visual Studio Online, вместе с тем можно использовать много других возможностей, таких, как утилиты планирования, Kanban доска, виртуальная комната для команды и др. Таким образом, VS Code и VS Online способны обеспечить полную поддержку цикла разработки программного обеспечения.
Для начала работы с Visual Studio Online необходимо зарегистрировать свой аккаунт. После чего можно приступать к созданию нового проекта. Под проектом понимается все рабочее пространство, которое создается внутри Visual Studio Online с возможностью хранить документы, исходный код всех проектов, входящих в решение и тд.
Если Git устанавливался, как часть утилит командной строки XCode, то все необходимые файлы уже есть на Mac и нужно просто выполнить команду: git config --global credential.helper osxkeychain
GitHub
Перейдем на основную страницу проекта и скопируем ссылку, которую необходимо использовать для клонирования содержимого. Воспользуемся терминалом, чтобы выполнить процесс инициализации. Сделать это можно из VS Code, используя контекстное меню или окно Command Palette:
Как и в случае в Visual Studio Online Git можно ассоциировать с выбранным именем: git config --global user.name xxxxx
Команда клонирования создаст на диске новый каталог со всеми исходными файлами внутри и, используя VS Code, откроем полученный каталог.
Unity 3D
Эти форматы поддерживаются Visual Studio Code, поэтому можно открыть каталог.
Unity работает с несколькими проектами, которые используются для сборки игры на различных этапах, но чтобы открыть только один из них воспользуемся строкой состояния и нажмем pick a project:
Visual Studio Code отобразит всплывающее окно, где можно выбрать проект. В этом случае нужен проект с суффиксом csharp:
Теперь IntelliSense система работает правильно, и можно продолжать работу в Code:
Отладка
Visual Studio Code поддерживает отладку для node.js проектов и для проектов на mono. Продемонстрируем возможности отладчика на примере интеграции Unity и Visual Studio Code, поскольку Unity использует Mono.
Чтобы активировать отладку в Code необходимо создать файл launch.json и внести туда настройки отладчика. Переходи в окно Debug и нажимаем кнопку Settings, чтобы активировать создание launch.json:
Удаляем из созданного файла весь код для работы с node.js, и добавим следующий:
Если используется Unity plugin, то небходимо проверить, что опция Write Launch File установлена:
Если опция установлена, то необходимо запустить приложение в Unity плейере и launch.json будет создан автоматически.
Для запуска отладчика перейходим в окно Debug и нажимаем Start. Сразу после этого можно перейти в Unity и запустить игру в плейере. Если все хорошо, то можно увидеть работу отладчика:
Отладчик обладает всеми необходимыми атрибутами, характерными для профессиональных инструментов: Breakpoints, Call Stack, Watch, Variables, Debug Action Panel, Debug Console.
Задачи
В контексте Visual Studio Code можно выполнить любую команду командной строки и просмотреть результаты работы прямо из среды разработки. Таким образом можно использовать внешние компиляторы, отладчики, средства тестирования и тд.
Открыв Command Palette и набрав Run Task, Вы можете увидеть, что Code распознал все задачи в конфигурационном файле для grunt и их можно запустить. В результате работы задачи, можно увидеть новый JavaScript файл со всем исходным кодом внутри, преобразованным по алгоритму. При этом, результаты работы будут отображаться в окне Output, что позволит вовремя обнаружить проблему.
Azure
Прямой интеграции Visual Studio Code c Azure не предусмотрено. Но существует способ, который облегчает процесс развертывания веб-сайтов из Code в Azure.
Для этого необходимо завести учетную запись Azure, открыть панель управления и создать новое веб-приложение, используя шаблон Web App, благодаря которому в течении нескольких секунд можно создать хостинг пространство для будущего сайта и разместить его там.
Как только инфраструктура создана можно перейти к настройкам. В данном сценарии — Continuous deployment:
Отсюда, видно, что Azure поддерживает возможность развертывания решений из различного типа хранилищ. Именно с помощью интеграции с хранилищами GitHub и Visual Studio Online, описанных ранее, можно связать между собой Code и Azure. Таким образом, получая возможность продолжать выполнять удаленное развертывание кода прямо из интерфейса редактора Visual Studio Code.
Заключение
Visual Studio Code позволяет реализовать различные сценарии работы и выходит за рамки обычного редактора кода. Описанные сценарии охватывают только часть возможных сценариев, подробнее описанных на странице официальной документации.
Так же, мы с удовольствием делимся с вами видео-материалами, включающими в себя пошаговые инструкции по установке, настройке и работе с инструментом Visual Studio Code на Mac:
Читайте также: