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

Обновлено: 26.11.2024

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

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

Я. Введение

Что такое «текстовые редакторы»?

Текстовые редакторы, также называемые редакторами кода, представляют собой приложения, используемые разработчиками для написания кода. Они могут выделить и отформатировать ваш код, чтобы его было легче читать и понимать. Если вы использовали Codecademy, вы уже знакомы с текстовым редактором. Это область, в которой вы пишете свой код.

Использование текстового редактора является частью создания вашей "среды разработки", набора инструментов, которые вы используете для работы над проектами кодирования. Это позволит вам взять то, чему вы научились на Codecademy, и применить это на практике, когда вы работаете над проектами на своем компьютере. Это не только познакомит вас с инструментами, которые обычно используются профессиональными разработчиками, но также означает, что вы выросли как разработчик и готовы начать работать самостоятельно — отличная работа!

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

  • Подсветка синтаксиса для конкретного языка
  • Автоматический отступ кода
  • Цветовые схемы в соответствии с вашими предпочтениями и облегчают чтение кода.
  • Подключаемые модули или дополнительные программы для обнаружения ошибок в коде.
  • Древовидное представление или визуальное представление папок и файлов проекта для удобной навигации по проекту.
  • Сочетания клавиш или их комбинации для ускорения разработки

Возможно, вы также читали или слышали об интегрированных средах разработки или «интегрированных редакторах разработки». IDE позволяет не только редактировать, но также компилировать и отлаживать код с помощью одного приложения или интерфейса. Хотя текстовый редактор, который мы рекомендуем, не считается IDE, он имеет множество функций, подобных IDE, которые упрощают жизнь разработчика, не требуя большого количества ресурсов, которые обычно требуются для IDE. Лучшее из обоих миров!

Выбор текстового редактора

На выбор предлагается несколько текстовых редакторов. Например, Visual Studio Code — один из самых популярных текстовых редакторов, используемых разработчиками. (Это Visual Studio Code, а не Visual Studio, который немного отличается. Нам нужен первый, тот, в названии которого есть «Code».) Другими популярными текстовыми редакторами, о которых вы, возможно, слышали, являются Atom и Sublime Text.

  • Бесплатно
  • Открытый исходный код (это означает, что код программы можно просматривать, изменять и публиковать)
  • Функции, подобные IDE
  • Поддерживается большим сообществом пользователей и Microsoft

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

II. Установка кода Visual Studio

Итак, мы выбрали наш текстовый редактор, теперь нам просто нужно установить его на наш компьютер!

Видеоинструкции

В этом видео показано, как загрузить и установить Visual Studio Code. Письменные инструкции приведены ниже.

Этапы установки

Процесс установки для компьютеров под управлением macOS, Windows и Linux (в частности, Ubuntu и Debian) будет очень похожим, и использование Visual Studio Code на всех них будет одинаковым.

Посетите веб-сайт Visual Studio Code, чтобы загрузить последнюю версию Visual Studio Code.

Вы должны увидеть, что отображается операционная система вашего компьютера, но если она неверна, нажмите стрелку вниз и найдите параметр, соответствующий вашей операционной системе, в раскрывающемся меню, а затем щелкните значок стрелки вниз в разделе «Стабильная».< /p>

Пользователи Windows: будет загружена последняя версия Visual Studio Code в виде файла .exe.

Пользователи Mac: будет загружена последняя версия Visual Studio Code для Mac в виде ZIP-файла.

Пользователи Linux: .deb и .rpm — это разные типы файлов для хранения данных. Мы предлагаем вам скачать файл .deb, чтобы автоматические обновления работали так, как предлагает документация Visual Studio Code.

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

Пользователи Windows: откройте файл .exe, щелкнув его, и запустите программу установки. Продолжайте нажимать «Далее», а затем «Готово».

Пользователям Mac: загруженный ZIP-файл должен находиться в папке «Загрузки». Откройте файл. Если вы видите это сообщение, выберите «Открыть».

Пользователям Linux: загруженный файл должен находиться в папке «Загрузки».

Найдите его в файловом менеджере, дважды щелкните и выберите «Установить» в центре программного обеспечения с графическим интерфейсом или выполните следующие команды по одной в терминале:

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

Пользователи Windows: он будет автоматически помещен в меню "Пуск".

Пользователи Mac: нажмите и перетащите значок Visual Studio Code из папки "Загрузки" в папку "Приложения".

Пользователи Linux: он должен появиться на панели задач программ.

Вот и все, вы успешно установили текстовый редактор и готовы приступить к написанию кода!

III. Практика: используйте Visual Studio Code для запуска проекта вне платформы

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

Для этого нам понадобится текстовый редактор, который мы установили выше. Давайте на минутку попробуем Visual Studio Code.

Что такое «папки разработки»?

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

Большинство разработчиков хранят свои проекты в удобном для поиска каталоге (который вы, возможно, привыкли называть «папкой»). Здесь, в Codecademy, мы рекомендуем называть этот каталог проектами. Он будет хранить все ваши проекты кодирования. Всякий раз, когда вы создаете новый проект, независимо от того, насколько он мал, вы всегда должны создавать новую папку внутри каталога ваших проектов. Вы обнаружите, что проекты из одного файла могут быстро превратиться в большие проекты с несколькими папками.

Практика: создадим проект

Ниже приведены шаги, которые необходимо выполнить, чтобы создать новую папку для всех ваших программных проектов. Вы также узнаете, как загрузить новую папку проекта в Visual Studio Code и создать свой первый HTML-проект «Hello World».

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

1. Создайте папку разработки.

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

Пользователи Mac: это может быть ваша учетная запись пользователя или папка «Домашняя».

Пользователи Windows: вы можете сохранить это на диск C.

Пользователям Linux: вы можете сохранить это в папке пользователя в папке «Домашняя».

В папке проектов создайте новую папку с именем HelloWorld. Все, что вы добавите в эту папку, станет частью вашего проекта HelloWorld.

2. Откройте код Visual Studio
3. Откройте папку разработки

Нажмите значок «Проводник» в меню слева, затем нажмите кнопку «Открыть папку» и выберите папку разработки. Это запустит ваш файловый менеджер.

Перейдите к папке HelloWorld и выберите Открыть. Папка откроется на боковой панели Visual Studio Code. На данный момент в папке не должно быть содержимого. Мы добавим файл на следующем шаге.

4. Добавьте файл.

Прежде чем вы научитесь добавлять файлы в папку проекта, важно понять назначение расширений файлов. Расширение файла — это суффикс имени файла (последние 3 или 4 символа в имени файла, которым предшествует точка) и описывает тип содержимого, содержащегося в файле. Например, расширение HTML-файла — .html, и оно указывает браузеру (и другим приложениям) интерпретировать содержимое файла как HTML-документ. После того как Visual Studio Code загрузит папку проекта, вы можете добавлять файлы. Шаги ниже описывают, как добавить файлы. Не беспокойтесь о том, чтобы сделать это на своем собственном компьютере. Мы вернемся к этому позже.

На панели проводника Visual Studio Code щелкните имя папки разработки. Вы увидите четыре значка справа от имени папки. Щелкните значок «Новый файл». Введите имя нового файла с соответствующим расширением (например, .html, .css, .csv). Крайне важно указать правильное расширение файла, чтобы такие программы, как линтеры, знали, как интерпретировать его содержимое. Когда закончите, нажмите Enter.

5. Начинайте программировать!

Скопируйте и вставьте следующий стандартный HTML-код:

Почаще сохраняйте файл с помощью функции автоматического сохранения и отслеживайте изменения с помощью системы контроля версий, если вы знаете, как ею пользоваться. (Чтобы включить автосохранение, нажмите «Файл», а затем «Автосохранение». Когда оно включено, вы увидите галочку рядом с «Автосохранение».) Это уменьшит вероятность потери несохраненной работы.

Расширения файлов и подсветка синтаксиса

Синтаксис – это набор правил, которые говорят нам, как создавать правильно написанный код.Visual Studio Code и другие текстовые редакторы могут интерпретировать расширения файлов и обеспечивать подсветку синтаксиса для конкретного языка. Подсветка синтаксиса — это инструмент, облегчающий чтение кода. Взгляните на свой файл index.html. Текст и теги разного цвета. Вот как Visual Studio Code выделяет синтаксис .html. С каждым новым языком, который вы изучаете, Visual Studio Code будет выделять текст таким образом, чтобы ваш код было легко читать. Это может отличаться от других текстовых редакторов, а также отличаться от того, как ваш код выделяется в Codecademy.

Необязательно: измените цветовую схему

Хотя Visual Studio Code поставляется с подсветкой синтаксиса по умолчанию, вы можете изменить используемые цвета. Хорошие цветовые темы сделают чтение всех этих строк кода легким для ваших глаз. (Попробуйте низкоконтрастные темные темы, такие как «Solarized Dark» или «Dracula Dark».)

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

6. Просмотрите свой HTML-файл в браузере

На этом этапе ваш файл готов для просмотра в веб-браузере. Следующие шаги следует предпринять вне Visual Studio Code:

Перейдите к файлу index.html в папке Hello World с помощью файлового менеджера или терминала.

Дважды щелкните или откройте index.html. Страница должна открыться в веб-браузере по умолчанию. Восхищайтесь своей работой на втором месте — вы создали свой первый проект с помощью Visual Studio Code.

Расширьте возможности Visual Studio Code

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

Отладка кода в редакторе: правильно, вы можете запускать и тестировать код из редактора!

Контроль версий: вам не нужно переключаться на терминал на вашем компьютере, чтобы отслеживать изменения с помощью Git.

Встроенный терминал: вы можете запускать команды командной строки из своего редактора с помощью Visual Studio Code.

IV. Подведение итогов

Поздравляем! Вы успешно настроили текстовый редактор и готовы создавать веб-сайты на своем компьютере.

Поддержка C/C++ для Visual Studio Code обеспечивается расширением Microsoft C/C++, позволяющим осуществлять кроссплатформенную разработку на C и C++ в Windows, Linux и macOS.

Установите расширение

  1. Откройте VS Code.
  2. Выберите значок просмотра расширений на панели действий или используйте сочетание клавиш ( ⇧⌘X (Windows, Linux Ctrl+Shift+X )).
  3. Выполните поиск по запросу "C++".
  4. Выберите "Установить".

После установки расширения при открытии или создании файла *.cpp у вас будет подсветка синтаксиса (раскрашивание), интеллектуальное завершение и наведение (IntelliSense) и проверка ошибок.

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

C++ – это компилируемый язык. Это означает, что исходный код вашей программы должен быть переведен (скомпилирован) до того, как его можно будет запустить на вашем компьютере. VS Code — это, прежде всего, редактор, и он полагается на инструменты командной строки, которые выполняют большую часть рабочего процесса разработки. Расширение C/C++ не включает компилятор или отладчик C++. Вам нужно будет установить эти инструменты или использовать те, которые уже установлены на вашем компьютере.

В вашей академической или рабочей среде разработки уже могут быть компилятор и отладчик C++. Обратитесь к своим преподавателям или коллегам за инструкциями по установке рекомендуемого набора инструментов C++ (компилятор, отладчик, система проектов, линтер).

На некоторых платформах, таких как Linux или macOS, уже установлен компилятор C++. В большинстве дистрибутивов Linux установлена ​​коллекция компиляторов GNU (GCC), и пользователи macOS могут получить инструменты Clang с помощью Xcode.

Проверьте, установлен ли у вас компилятор

Убедитесь, что исполняемый файл вашего компилятора находится в пути вашей платформы (%PATH в Windows, $PATH в Linux и macOS), чтобы расширение C/C++ могло его найти. Вы можете проверить доступность своих инструментов C++, открыв встроенный терминал ( ⌃` (Windows, Linux Ctrl+` ) ) в VS Code и попытавшись напрямую запустить компилятор.

Проверка компилятора GCC g++:

Проверка Clang компилятора Clang:

Примечание. Если вы предпочитаете полную интегрированную среду разработки (IDE) со встроенной компиляцией, отладкой и шаблонами проектов (Файл > Новый проект), доступно множество вариантов, таких как Visual Studio Издание сообщества.

Если у вас не установлен компилятор, в приведенном ниже примере мы описываем, как установить минималистские инструменты GNU для Windows (MinGW) C++ (компилятор и отладчик). MinGW — популярный бесплатный набор инструментов для Windows. Если вы используете VS Code на другой платформе, вы можете прочитать учебные пособия по C++, в которых рассматриваются конфигурации C++ для Linux и macOS.

Пример: установка MinGW-x64

Мы установим Mingw-w64 через MSYS2, который предоставляет актуальные встроенные сборки GCC, Mingw-w64 и других полезных инструментов и библиотек C++. Вы можете загрузить последнюю версию установщика со страницы MSYS2 или использовать эту ссылку для установки.

Следуйте инструкциям по установке на веб-сайте MSYS2, чтобы установить Mingw-w64. Не забудьте запустить каждое необходимое меню «Пуск» и команду pacman, особенно шаг 7, когда вы будете устанавливать актуальный набор инструментов Mingw-w64 ( pacman -S --needed base-devel mingw-w64-x86_64-toolchain ).

Добавьте компилятор MinGW в свой путь

Добавьте путь к папке bin Mingw-w64 в переменную среды Windows PATH, выполнив следующие действия:

  1. В строке поиска Windows введите «Настройки», чтобы открыть настройки Windows.
  2. Найдите Изменить переменные среды для своей учетной записи.
  3. Выберите переменную «Путь» в своих пользовательских переменных, а затем нажмите «Изменить».
  4. Выберите «Создать» и добавьте путь к папке назначения Mingw-w64 с добавлением \mingw64\bin к системному пути. Точный путь зависит от того, какую версию Mingw-w64 вы установили и где вы ее установили. Если вы использовали указанные выше настройки для установки Mingw-w64, добавьте это в путь: C:\msys64\mingw64\bin .
  5. Нажмите OK, чтобы сохранить обновленный путь. Вам нужно будет повторно открыть все окна консоли, чтобы новое местоположение PATH стало доступным.

Проверьте установку MinGW

Чтобы убедиться, что ваши инструменты Mingw-w64 правильно установлены и доступны, откройте новую командную строку и введите:

Если вы не видите ожидаемого вывода или g++ или gdb не является распознанной командой, убедитесь, что ваша запись PATH соответствует двоичному расположению Mingw-w64, где находятся инструменты компилятора.

Привет, мир

Чтобы убедиться, что компилятор установлен и настроен правильно, мы создадим простейшую программу Hello World C++.

Создайте папку с именем «HelloWorld» и откройте VS Code в этой папке ( code . открывает VS Code в текущей папке):

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

Теперь создайте новый файл с именем helloworld.cpp, нажав кнопку «Новый файл» в проводнике или команду «Файл» > «Новый файл».

Добавить исходный код Hello World

Теперь вставьте этот исходный код:

Теперь нажмите ⌘S (Windows, Linux Ctrl+S ), чтобы сохранить файл. Вы также можете включить автосохранение, чтобы автоматически сохранять изменения в файле, установив флажок Автосохранение в главном меню "Файл".

Создать Hello World

Теперь, когда у нас есть простая программа на C++, давайте ее создадим. Выберите команду «Терминал» > «Выполнить задачу сборки» ( ⇧⌘B (Windows, Linux Ctrl+Shift+B )) в главном меню.

Появится раскрывающийся список с различными вариантами задач компилятора. Если вы используете набор инструментов GCC, такой как MinGW, вы должны выбрать C/C++: g++.exe построить активный файл.

Это скомпилирует helloworld.cpp и создаст исполняемый файл с именем helloworld.exe , который появится в проводнике.

Запустить Hello World

Из командной строки или нового интегрированного терминала VS Code теперь вы можете запустить свою программу, введя ".\helloworld".

Если все настроено правильно, вы должны увидеть вывод "Hello World".

Это очень простой пример, который поможет вам начать разработку на C++ в VS Code. Следующим шагом является использование одного из перечисленных ниже руководств на вашей платформе (Windows, Linux или macOS) с предпочитаемым набором инструментов (GCC, Clang, Microsoft C++) и получение дополнительных сведений о языковых функциях расширения Microsoft C/C++, таких как IntelliSense. , навигация по коду, конфигурация сборки и отладка.

Учебники

Начните работу с C++ и VS Code с помощью руководств для вашей среды:

Документация

Дополнительную документацию по использованию расширения Microsoft C/C++ можно найти в разделе C++ на веб-сайте VS Code, где вы найдете темы по следующим темам:

Удаленная разработка

VS Code и расширение C++ поддерживают удаленную разработку, позволяя вам работать через SSH на удаленном компьютере или виртуальной машине, внутри контейнера Docker или в подсистеме Windows для Linux (WSL).

Чтобы установить поддержку удаленной разработки:

  1. Установите пакет расширения удаленной разработки VS Code.
  2. Если удаленные исходные файлы размещены в WSL, используйте расширение Remote-WSL.
  3. Если вы подключаетесь к удаленному компьютеру с помощью SSH, используйте расширение Remote — SSH.
  4. Если удаленные исходные файлы размещены в контейнере (например, Docker), используйте расширение Remote — Containers.

Отзыв

Если у вас возникнут какие-либо проблемы или у вас есть предложения по расширению Microsoft C/C++, сообщите о проблемах и предложениях на GitHub. Если вы еще не предоставили отзыв, пройдите небольшой опрос, чтобы настроить это расширение в соответствии с вашими потребностями.

Код Visual Studio в действии

Интеллектуальное завершение кода

Упрощенная отладка

Быстрое и мощное редактирование

Навигация по коду и рефакторинг

Контроль версий в продукте

Лучшие расширения

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

Первые шаги

Чтобы получить максимальную отдачу от Visual Studio Code, начните с изучения нескольких вводных тем:

Вступительные видеоролики. Начните знакомство с VS Code с помощью этих вводных видеороликов.

Настройка. Установите VS Code для своей платформы и настройте набор инструментов для своих нужд разработки.

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

Настройки – настройте VS Code так, как вам удобно.

Языки. Узнайте о поддержке VS Code ваших любимых языков программирования.

Node.js. Это руководство поможет вам быстро запустить и отладить веб-приложение Node.js.

Советы и рекомендации. Ознакомьтесь с советами и рекомендациями, чтобы стать опытным пользователем VS Code.

Azure — VS Code отлично подходит для развертывания веб-приложений в облаке.

Extension API: узнайте, как написать расширение VS Code.

Почему VS Code? - Узнайте о философии дизайна и архитектуре VS Code.

Сочетания клавиш

Повысьте производительность с помощью сочетаний клавиш VS Code.

Справочник по сочетаниям клавиш — изучите наиболее часто используемые сочетания клавиш.

Расширения раскладки клавиатуры. Измените сочетания клавиш VS Code, чтобы они соответствовали другому редактору.

Настройка сочетаний клавиш — измените сочетания клавиш по умолчанию.

Загрузки

Загрузить VS Code. Быстро найдите подходящую установку для вашей платформы (Windows, macOS и Linux)

Конфиденциальность

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

Инструменты

На протяжении десятилетий, приходя на работу по утрам, я запускал Microsoft Visual Studio (или один из ее предшественников, например Visual C++ или Visual InterDev), затем заваривал чай и, возможно, посещал утреннее совещание, пока оно шло. его трудоемкий запуск. Я бы держал IDE открытой весь день, пока выполнял циклы разработки/тестирования/отладки, чтобы избежать еще одной задержки запуска. Когда я работал над проектом C++ с примерно 2 миллионами строк кода, я также запускал каждый день работу, автоматически запуская пакетный сценарий, который выполнял проверку кода и полную перестройку продукта в предрассветные часы.

Сейчас я не чувствую необходимости открывать свои проекты с кодом каждое утро первым делом или держать их открытыми весь день. Visual Studio Code обычно запускается достаточно быстро, поэтому я могу приступить к работе уже через несколько минут даже для крупных проектов.Я сказал обычно, а не всегда: сам код Visual Studio нуждается в ежемесячном обновлении, а многие установленные мной расширения часто нуждаются в собственных обновлениях. Тем не менее даже обновление дюжины расширений в Visual Studio Code занимает гораздо меньше времени, чем Visual Studio тратит на перестроение таблиц символов большого проекта C++.

[ Также в InfoWorld: TypeScript и JavaScript: различия ]

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

Что такое код Visual Studio?

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

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