Начало работы с кодом VisualStudio

VisualStudioCode-один из самых популярных и мощных текстовых редакторов, используемых сегодня инженерами-программистами.

В этой статье мы рассмотрим шаги, необходимые для загрузки популярного текстового редактора под названием VisualStudioCode, также называемого “VSCode.” К концу статьи вы сможете создать папку в коде VisualStudio, содержащую HTML-документ, который можно открыть в веб-браузере.

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

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

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

Это не только познакомит вас с инструментами, которые обычно используются профессиональными разработчиками, но и означает, что вы выросли как разработчик и готовы начать работать самостоятельно—отличная работа!

Специфичные для написания кода текстовые редакторы предоставляют ряд преимуществ:

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

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

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

Есть несколько текстовых редакторов на выбор. Например, код VisualStudio является одним из самых популярных текстовых редакторов, используемых разработчиками. (Это код VisualStudio, а не VisualStudio, что немного отличается.Нам нужен первый, с «Кодом» в названии.) Другие популярные текстовые редакторы, о которых вы, возможно, слышали, — это Atom и SublimeText.

Любой из упомянутых текстовых редакторов отлично подходит для разработки, но чтобы упростить задачу, мы предлагаем вам начать с кода VisualStudio. Некоторые из преимуществ этого редактора заключаются в следующем:

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

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

Установка кода VisualStudio

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

Шаги по установке

• Процесс установки для компьютеров под управлением macOS, Windows и Linux (в частности, Ubuntu и Debian) будет очень похож, и использование кода VisualStudio во всех из них будет одинаковым.
• Посетите веб-сайт кода VisualStudio, чтобы загрузить последнюю версию кода Visual Studio: https://code.visualstudio.com/
• Вы должны увидеть отображаемую операционную систему вашего компьютера, но если это не так, нажмите на стрелку вниз и найдите опцию, соответствующую вашей операционной системе, в раскрывающемся меню и нажмите на значок со стрелкой вниз в разделе “Стабильная.”
• Пользователи Windows: При этом будет загружена последняя версия кода VisualStudio в виде exe-файла .
• Пользователи Mac: При этом будет загружена последняя версия кода VisualStudio для Mac в виде zip-файла .
• Пользователи Linux: .deb и .rpm-это разные типы файлов для хранения данных. Мы предлагаем вам загрузить файл .deb, чтобы автоматическое обновление работало в соответствии с документацией по коду VisualStudio.

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

• Пользователи Windows: Откройте файл .exe, нажав на него, и запустите установщик. Продолжайте нажимать ‘Далее’, а затем, наконец, «Готово».
• Пользователи Mac: Загруженный zip-файл должен находиться в папке » Загрузки’. Откройте файл. Если вы видите это сообщение, выберите “Открыть.”
• Пользователи Linux: Загруженный файл должен находиться в вашей папке » Загрузки’. Найдите его в своем файловом менеджере, дважды щелкните и выберите «Установить» в центре программного обеспечения GUI или выполните следующие команды, по одной за раз, в терминале:

sudodpkg -i downloaded_filename.deb
sudoapt-getinstall -f

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

• Пользователи Windows: Он будет автоматически помещен в меню «Пуск».
• Пользователи Mac: Щелкните и перетащите значок кода VisualStudio из папки «Загрузки» в папку «Приложения».
• Пользователи Linux: Он должен появиться в панели задач программ.

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

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

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

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

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

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

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

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

Давайте сделаем проект

Ниже приведены шаги, которые необходимо выполнить, чтобы создать новую папку для всех ваших программных проектов. Вы также узнаете, как загрузить новую папку проекта в код VisualStudio и создать свой самый первый HTML-проект “helloworld”.

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

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

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

• Пользователи Mac: Это может быть ваша учетная запись пользователя или папка “Home”.
• Пользователи Windows: Возможно, вы захотите сохранить это на диске C.
• Пользователи Linux: Вы можете сохранить это в папке пользователя внутри папки “Home”.

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

Откройте код VisualStudio

Откройте папку разработки

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

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

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

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

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

Начните кодирование!

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

<html>
<head>
<title>Привет, мир</title>
</head>

<body>
<h1>Привет, мир</h1>
</body>
</html>

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

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

Синтаксис — это набор правил, которые говорят нам, как создавать правильно написанный код. Код VisualStudio и другие текстовые редакторы могут интерпретировать расширения файлов и выделять синтаксис, зависящий от языка. Подсветка синтаксиса — это инструмент для облегчения чтения кода. Взгляните на свой index.html файл. Текст и теги имеют разные цвета.

Вот как код VisualStudio выделяет синтаксис .html. С каждым новым языком, который вы изучаете, код VisualStudio будет выделять текст таким образом, чтобы ваш код было легко читать. Это может отличаться от других текстовых редакторов, а также от того, как ваш код выделяется в Codecademy.

Хотя код VisualStudio поставляется с подсветкой синтаксиса по умолчанию, вы можете изменить используемые цвета. Хорошие цветовые темы облегчат чтение всех этих строк кода на ваших глазах. (Попробуйте низкоконтрастные, темные темы, такие как “SolarizedDark” или «DraculaDark».”)

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

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

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

1. Перейдите к index.html файл в папке HelloWorld через файловый менеджер или терминал.
2. Дважды щелкните или откройте index.html. Страница должна открыться в вашем веб-браузере по умолчанию. Потратьте секунду, чтобы полюбоваться своей работой—вы сделали свой первый проект с помощью кода VisualStudio.
3. Идите дальше с функциями кода VisualStudio

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

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

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

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

Завершение работы

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