Как открыть visual studio tools

Обновлено: 06.07.2024

Одно из основных преимуществ над другими интегрированными средами разработки состоит в том, что компания Microsoft предлагает пользователям реальную возможность перемещать элементы при проектировании как веб-, так и сложных клиентских приложений. Все эти элементы размещены в окне Toolbox ( Ctrl+Alt+X ), доступ к которому можно получить посредством меню View:

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

Окно Toolbox содержит все доступные компоненты для активного в данный момент документа, открытого в главном рабочем окне. Ими могут быть визуальные компоненты, например кнопки и текстовые поля; невидимые, сервисные объекты, например таймеры или регистрационные журналы системных событий; и даже элементы дизайна, такие как классы и интерфейсные объекты, используемые в инструменте Class Designer.

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

По умолчанию эти группы представлены в виде списка. Каждый компонент представлен с помощью своей собственной пиктограммы и имеет название. Этим новая версия системы Visual Studio 2013 отличается от старого способа представления доступных объектов, в которых окно Toolbox просто представляло собой список пиктограмм, а пользователь должен был угадать, каким компонентам они соответствуют. Вы можете изменять представление каждой группы элементов управления по отдельности. Для этого щелкните правой кнопкой мыши в любом месте области, где расположена группа, и снимите флажок с команды List View в контекстном меню.

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

Система Visual Studio 2013 просматривает все проекты в вашем решении и перед, и после построения решения. Если решение состоит из многих проектов, то этот процесс может занять много времени. В таком случае следует подумать об отключении этой возможности, установив свойство AutoToolboxPopulate узла Windows Forms Designer в диалоговом окне Options равным false (Tools --> Options).

Для того чтобы настроить внешний вид элементов в окне Toolbox, добавьте в проект ваш компонент или элемент в виде побитового изображения размером 16x16 пикселей. Затем выберите вновь вставленное побитовое изображение в окно Solution Explorer и перейдите к окну Properties. Убедитесь, что свойство Build установлено равным Embedded Resource. Теперь достаточно связать атрибут вашего элемента управления с атрибутом изображения ToolboxBitmap.

Следует отметить, что при настройке окна Toolbox и внешнего вида элементов управления в программной модели Windows Presentation Foundation (WPF) используется понятие хранилища метаданных, а не атрибуты. Обычно это приводит к появлению дополнительных сборок, которые можно использовать для уточнения внешнего вида элементов управления как в системе Visual Studio 2013, так и в системе Expression Blend.

Настройка компонентов

Перечисление элементов в окне Toolbox в алфавитном порядке - хороший вариант, принятый по умолчанию, поскольку он позволяет найти неизвестный пользователю элемент. Однако, если вы используете только несколько компонентов и вам надоело прокручивать список вверх и вниз, можете создать свои собственные группы элементов управления и переместить существующие типы объектов.

Перемещение отдельного компонента не составляет труда. Найдите его в окне Toolbox, щелкните на нем и перетащите в новое место. Когда достигнете пункта назначения, отпустите кнопку мыши, и компонент будет перемещен в новое место списка. Точно так же можете переместить компонент в другую группу - просто перетаскивайте его вверх или вниз по окну Toolbox, пока не окажетесь в нужной группе. Эти действия можно выполнять как с представлением List, так и с представлением Icon.

Если хотите скопировать компонент из одной группы в другую, а не переместить его, то в ходе перетаскивания удерживайте нажатой клавишу Ctrl . Иногда удобно иметь свою собственную группу, чтобы хранить в ней элементы управления и компоненты, которые используются чаще других. Для того чтобы создать новую группу в окне Toolbox, щелкните правой кнопкой мыши в любом месте окна Toolbox и выполните команду Add Tab. Внизу окна Toolbox будет добавлена новая пустая закладка, которой вы должны присвоить имя. После того как вы назовете закладку, добавьте в нее компоненты, следуя инструкциям, описанным в этом разделе.

Если вы впервые запускаете систему Visual Studio 2013, то элементы в каждой группе будут упорядочены по алфавиту. Однако после перемещения элементов вы можете обнаружить, что они перепутаны, и решите просто начать все сначала. Все, что вам для этого необходимо, - щелкнуть правой кнопкой мыши в группе и выполнить команду Sort Items Alphabetically.

По умолчанию элементы управления добавляются в окно Toolbox в порядке следования имен их классов. Это значит, что вы столкнетесь с непонятными именами, особенно, если захотите добавить в окно Toolbox элементы управления COM. Система Visual Studio 2013 позволяет пользователю изменять имена компонентов на что-нибудь более понятное.

Для того чтобы изменить имя компонента, щелкните правой кнопкой мыши в окне Toolbox и выполните команду Rename Item. На месте первоначального названия появится поле редактирования, в которое можете ввести удобное для вас имя, даже если оно содержит специальные символы.

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

Добавление компонентов

Помните: команда Reset Toolbox удаляет все группы команд, созданные пользователем, поэтому сначала убедитесь, что вам действительно необходимо выполнить эту функцию!

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

Состав панели элементов меняется в зависимости от того, какую платформу вы выбираете для разработки. Например, ниже на рисунке показаны различные варианты Toolbox для трех вариантов проектов: WinForms, WPF и UWP:

По умолчанию в панели элементов (toolbox) появятся только стандартные элементы управления. Например, мы захотим использовать в нашем проекте компоненты Ribbon Controls (как в Office). Для того, чтобы их использовать в своем проекте, мы должны добавить ссылку на них в свой проект. Сделать это можно следующим образом:

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

Добавим наши компоненты Ribbon Controls в панель элементов. Элементы могут добавляться как в уже существующие вкладки, так и в новые, созданные нами. Воспользуемся вторым вариантом.

5. Теперь в панели элементов появятся новые элементы управления, которые можно добавлять на форму приложения простым перетаскиванием мышкой:

Сегодня мы разобрались с вопросом как добавить новые элементы управления в проект и добавить их в панель элементов (toolbox) Visual Studio 2019. Не всегда устанавливаемые элементы управления автоматически отображаются в панели элементов, поэтому иногда требуется воспользоваться их добавлением вручную, используя возможности IDE.

Сегодня практически невозможно представить приложение, в котором нет графического интерфейса пользователя (GUI -Graphical User Interface). Windows API обладает необходимыми инструментами для создания GUI. Однако их использование требует больших затрат времени и практического опыта. Даже библиотека MFC, которая призвана облегчить процесс написания GUI приложений на С++ для ОС Windows, не дает той простоты и легкости создания программ, как хотелось бы. Но самый большой недостаток этих инструментов и библиотек — это платформозависимость. В отличие от MFC библиотека Qt кроссплатформенная. При этом она предоставляет возможности создавать GUI в интерактивном режиме.

В открывшемся окне для выбора модулей нажимаем кнопки Next>Finish (модули по умолчанию). В результате создается шаблон проекта со следующим кодом в файле main.cpp:

Запускаем программу (клавиша F5). Тест пройден успешно, если открывается окно консоли:

Если при запуске возникают ошибки, вероятнее всего это связано с отсутствием каких-либо необходимых компонентов в VS. Запустите снова онлайн-инсталлятор Visual Studio 2017 и доустановите их в соответствии с рекомендациями (см. Установка Visual Studio 2017 и Installing Visual Studio 2017 + Qt Interface Library).

Давайте распечатаем «Hello World», изменив исходный файл:

Класс QCoreApplication предоставляет цикл обработки событий для консольных приложений Qt. Для приложений с графическим интерфейсом мы будем использовать QApplication. При вызове a.exec () запускается цикл обработки событий.

Создаем проект Qt GUI приложения (File>New>Project>Visual C++>Qt>Qt GUI Application>OK>Next>Next>Finish). Получаем шаблон приложения с заготовленным кодом. Запускаем его, открывается окно:

Посмотрим на исходный код в файлах проекта:

Файл main.cpp

В первой строке подключается заголовочный файл QtGuiApplication2.h, который расположен непосредственно в созданном проекте. Во второй строке подключается заголовочный файл QApplication, который расположен в модуле QtWidgets:

В файле main.cpp сначала создается объект класса QApplication, который осуществляет контроль и управление приложением. Для его создания в конструктор этого класса необходимо передать два аргумента. Первый аргумент представляет собой информацию о количестве аргументов в командной строке, с которой происходит обращение к программе, а второй — это указатель на массив символьных строк, содержащих аргументы, по одному в строке. Любая использующая Qt программа с графическим интерфейсом должна создавать только один объект этого класса, и он должен быть создан до использования операций, связанных с пользовательским интерфейсом. После создания элементы управления Qt по умолчанию невидимы, и для их отображения необходимо вызвать метод show().

В последней строке программы приложение запускается вызовом QApplication::exec(). С его запуском приводится в действие цикл обработки событий, определенный в классе QCoreApplication, являющимся базовым для QApplication. Этот цикл передает получаемые от системы события на обработку соответствующим объектам. Он продолжается до тех пор, пока не будет вызван статический метод QCoreApplication::exit(), либо не закроется окно последнего элемента управления. По завершению работы приложения метод QApplication::exec() возвращает значение целого типа, содержащее код, информирующий о его завершении.

Файл QtGuiApplication2.h

В первой строке подключается заголовочный файл QMainWindow, который расположен в модуле QtWidgets.

В файле QtGuiApplication2.h описывается класс QtGuiApplication2, производный от класса QMainWindow, предоставляемого системой Qt. В разделе public объявляется конструктор. В разделе private создается переменная ui, через которую устанавливается пользовательский интерфейс.

Макрос Q_OBJECT должен появляться в закрытом разделе описания класса, который объявляет свои собственные signals и slots (см. Signals и slots. Обработка событий) или использует другие сервисы, предоставляемые системой Qt.

Файл QtGuiApplication2.cpp

В файле QtGuiApplication2.cpp определяется конструктор с передачей параметра parent конструктору базового класса. Функция setupUi берет на себя все действия по созданию этого (this) окна.

Изменяем код в файле main.cpp на следующий:

Запускаем приложение, получаем результат:

Изменяем код в файле main.cpp на следующий:

Запускаем приложение, получаем результат:

Обеспечим агрегацию, чтобы элемент (виджет) label появлялся не отдельно от окна, а входил в него. Для этого изменяем код файлов проекта:

Файл main.cpp

Файл QtGuiApplication2.h

Файл QtGuiApplication2.cpp

Запускаем приложение, получаем результат:

В модели события участвуют три участника:

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

Создадим проект приложения под названием Click и изменим код файлов проекта.

Файл main.cpp

Файл Click.h

Обратите внимание, что вместо трех заголовочных файлов (они закомментированы) можно подключать только лишь модуль QtWidgets, в котором эти файлы находятся. При большем количестве подключаемых файлов читаемость программы заметно ухудшается. Кроме того, подключение модулей дает возможность ускорить компиляцию самой программы за счет предварительно откомпилированных заголовочных файлов (Precompiled Headers) в том случае, если ваш компилятор позволяет это делать.

Файл Click.cpp

sender — указатель на объект, отправляющий сигнал;
signal — это сигнал, с которым осуществляется соединение;
receiver — указатель на объект, который имеет слот для обработки сигнала;
slot — слот, который вызывается при получении сигнала.
type — управляет режимом обработки.

KeyPress
QMoveEvent
Disconnecting a signal
Timer

Создаем проект Qt GUI приложения (File>New>Project>Visual C++>Qt>Qt GUI Application>OK>Next>Next>Finish). Получаем шаблон приложения с заготовленным кодом. В окне Solution Explore выполняем dblclick на файле QtGuiApplicatin3. ui .

Откроется редактор Qt Desiner. С панели виджетов перетаскиваем на заготовку окна две кнопки Push Button и меняем надписи на кнопках (через dblclick):

Выполняем настройки соединения сигнала clicked() кнопки Quit со слотом close() через окно настроек. Окно открывается, когда отпускаем левую кнопку мышки после движения курсора от кнопки Quit.

Сохраняем результаты роботы в редакторе Qt Desiner (Файл>Сохранить), возвращаемся в редактор VS и запускаем приложение:

Теперь нужно добавить реализацию этого слота (метода slot1 ()) в программном коде:

Изменяем код файлов проекта:

Файл QtGuiApplication3.h

Файл QtGuiApplication2.cpp

Visual Studio Code – это один из наиболее популярных редакторов кода, разработанный корпорацией Microsoft. Он распространяется в бесплатном доступе и поддерживается всеми актуальными операционными системами: Windows, Linux и macOS. VS Code представляет собой обычный текстовый редактор с возможностью подключения различных плагинов, что дает возможность работать со всевозможными языками программирования для разработки любого IT-продукта.

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

Установка Visual Studio Code

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

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

На этом установка завершена. Теперь мы можем использовать редактор кода по назначению. Обычно с этим не должно возникнуть никаких проблем, однако на слабых машинах запуск утилиты часто прерывается. Вылечить такой недуг можно с помощью добавления нового значения к пути ярлыка. Для этого откроем его свойства через правый клик мыши и в графе «Объект» пропишем --disable-gpu.

Готово! Теперь программа должна работать на любом компьютере.

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

При первом запуске перед нами отобразится окно приветствия, через которое можно получить быстрый доступ к ранее запущенным проектам либо создать новые. Весь интерфейс на английском языке (всего в несколько кликов он переводится на русский, но об этом чуть позже). Давайте пока разберемся с интерфейсом: откроем для примера файл с кодом, посмотрим, как его идентифицирует программа без предварительных настроек, и разберем каждый блок утилиты.

Запустить файл с кодом мы можем через правый клик мыши -> Открыть с помощью Code. Файл можно открыть и в программе: для этого в верхнем правом углу выбираем «File» и жмем «Open File…». После этого переходим в нужную директорию и выбираем файл.

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

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

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

Вторая вкладка – поиск. Используется для нахождения слов в документе. Он также может быть запущен с помощью комбинации клавиш «CTRL+SHIFT+F». Алгоритм использования довольно прост – вводим название в поиск и смотрим результат.

Система управления версиями – предназначена для взаимодействия с git.

Запустить и проверить работоспособность кода мы можем в следующей вкладке:

Еще одна важная вкладка, с помощью которой из Visual Studio Code можно сделать функциональную утилиту, это «Расширения». В ней находятся установочники для всех популярных инструментов, используемых разработчиками.

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

И еще один раздел – правая панель, включающая в себя небольшой дисплей, который отображает код в уменьшенном варианте, а также позволяет удобно скроллить внутри него. Здесь же мы можем разделить окно кода на несколько столбцов, а также закрыть все файлы одним кликом – для этого используются две верхние кнопки.

Как видите, если пройтись по интерфейсу программы, то она уже не кажется такой сложной. Чтобы сделать все еще проще, давайте проведем русификацию всех элементов интерфейса. О том, как это сделать, поговорим далее.

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

Чтобы провести русификацию программы, открываем вкладку с расширениями и прописываем запрос vscode-language-pack-ru. В результате будет отображен новый элемент с кнопкой «Install» – кликаем по ней и ожидаем завершения установки.

Перезагружаем программу и смотрим, что язык интерфейса был изменен на русский:

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

Внешний вид

Мы можем полностью изменить цветовую схему утилиты. Чтобы это сделать, воспользуемся комбинацией клавиш «CTRL+SHIFT+P» и введем запрос «theme». В отобразившемся списке выберем «Параметры: Цветовая тема».

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

После применения темы интерфейс примет следующий вид:

Обратите внимание, что это не весь список тем – вы можете установить и другие. Для этого пролистайте в самый низ списка и выберите «Установить дополнительные цветовые темы…». После этого в левой части отобразится дополнительный блок с доступными цветовыми решениями.

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

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

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

Теперь работа с проектами не должна вызывать никаких трудностей.

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

Один из важных этапов программирования – умение приводить все к единому виду с правильными отступами. Для таких задач в VS Code есть специальные плагины, позволяющие форматировать весь текстовый документ. Это такие расширения, как PHP-CS-Fixer для PHP, Prettier для JS/HTML/CSS и другие.

Рассмотрим, как форматируется код, написанный на JavaScript:

Возьмем для примера функцию, отступы в которой выстроены случайным образом.
Устанавливаем плагин Prettier через магазин расширений и открываем документ, который нужно отформатировать. Зажимаем комбинацию клавиш «CTRL+SHIFT+P» и вводим запрос «Format Document».
Смотрим на код и видим, что он преобразился и принял аккуратный вид.

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

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

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

По умолчанию функция автодополнения в Visual Studio Code доступна только для некоторых языков. Для прочих языков программирования существуют дополнительные пакеты с окончанием «intellisense».

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

Рекомендую установить PHP Intellisense, CSS Intellisense и Path Intellisense.

Управление Vim

Vim – это свободный текстовый редактор, работающий на основе vi. По умолчанию он установлен на каждой операционной системе семейства Unix. Кроме того, он доступен и в Visual Studio Code. Для работы с ним потребуется установить расширение с аналогичным названием:

Теперь мы можем перемещаться по файлу клавишами h, j, k, l, использовать Esc и сохранять файл командой :w.

Отладка кода

Для того чтобы запустить код в VS Code, нам нужно воспользоваться одним из расширений. Например, для JavaScript подойдет Debugger for Chrome. Узнать, какое расширение необходимо для конкретного языка, можно через «Выполнить» -> «Установить дополнительные отладчики…».

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

После того как нужный плагин будет установлен, можно запускать отладку кода. Для этого достаточно открыть пункт «Выполнить» и нажать на кнопку «Запустить отладку». Также это можно сделать с помощью клавиши «F5».

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

Заключение

Сегодня мы разобрали функционал инструмента Visual Studio Code. Данная среда хороша не только для профессионалов, но и для новичков, изучающих основы программирования. Одно из преимуществ программы – это минимальное требование к железу: запустить программу можно практически на любом компьютере.

Надеюсь, что работа в VS Code больше не будет для вас проблемой, а активные проекты ждет успех. Удачи!

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