Гайд Visual Studio Code: мощное руководство для чайников

[wlux.net]

Эта статья написана для начинающих пользователей, которые могут впервые использовать Visual Studio Code. VS Code, как известно, считается «легковесным» редактором кода. По сравнению с редакторами с полной интегрированной средой разработки (IDE), которые занимают гигабайты дискового пространства, VS Code использует менее 200 МБ при установке.
Несмотря на термин «легкий», Visual Studio Code предлагает огромное количество функций, которые продолжают расти и улучшаться с каждым новым обновлением. В этом руководстве мы рассмотрим наиболее популярные функции. У каждого программиста есть свой собственный набор инструментов, который они обновляют всякий раз, когда обнаруживаются новые рабочие процессы. Если вы хотите изучить каждый инструмент и функцию VS Code, ознакомьтесь с их

Пожалуйста, войдите или зерегистрируйтесь, чтобы увидеть скрытый текст.

. Кроме того, вы можете отслеживать

Пожалуйста, войдите или зерегистрируйтесь, чтобы увидеть скрытый текст.

для новых и улучшенных функций.



Предпосылки

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

Пожалуйста, войдите или зерегистрируйтесь, чтобы увидеть скрытый текст.

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

Пожалуйста, войдите или зерегистрируйтесь, чтобы увидеть скрытый текст.

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

Немного истории


Если вы новичок в программировании, я рекомендую вам начать с простого текстового редактора, такого как Windows NotePad. Это самый простой текстовый редактор, который не предлагает никакой помощи. Основным преимуществом его использования является то, что он заставляет вас запоминать синтаксис языка и делать свои собственные отступы. Как только вы освоитесь с написанием кода, следующим логическим шагом будет обновление до более качественного текстового редактора, такого как

Пожалуйста, войдите или зерегистрируйтесь, чтобы увидеть скрытый текст.

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

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

1. 
   

   Пожалуйста, войдите или зерегистрируйтесь, чтобы увидеть скрытый текст.

   
   
2. 
   

   Пожалуйста, войдите или зерегистрируйтесь, чтобы увидеть скрытый текст.

   
   
3. 
   

   Пожалуйста, войдите или зерегистрируйтесь, чтобы увидеть скрытый текст.

   
   
4. 
   

   Пожалуйста, войдите или зерегистрируйтесь, чтобы увидеть скрытый текст.

   
   

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

Пожалуйста, войдите или зерегистрируйтесь, чтобы увидеть скрытый текст.

и

Пожалуйста, войдите или зерегистрируйтесь, чтобы увидеть скрытый текст.

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

1. 
   

   Пожалуйста, войдите или зерегистрируйтесь, чтобы увидеть скрытый текст.

   
   
   : июль 2013
2. 
   

   Пожалуйста, войдите или зерегистрируйтесь, чтобы увидеть скрытый текст.

   
   
   : июнь 2015
3. 
   

   Пожалуйста, войдите или зерегистрируйтесь, чтобы увидеть скрытый текст.

   
   
   : апрель 2016

Разработчики Mac имели доступ к

Пожалуйста, войдите или зерегистрируйтесь, чтобы увидеть скрытый текст.

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

Пожалуйста, войдите или зерегистрируйтесь, чтобы увидеть скрытый текст.

в 2019 году, Visual Studio Code является самой популярной средой разработки кода с 50,7% использования. Visual Studio IDE занимает второе место, а NotePad++ - третье.
Достаточно истории и статистики на данный момент. Давайте углубимся в то, как использовать функции кода Visual Studio.

Настройка и обновления

Установщик пакета кода Visual Studio занимает менее 100 МБ и потребляет менее 200 МБ при полной установке. Когда вы посещаете страницу

Пожалуйста, войдите или зерегистрируйтесь, чтобы увидеть скрытый текст.

, ваша ОС будет автоматически обнаружена, и будет выделена правильная ссылка для загрузки.
Обновление VS Code очень просто. Он отображает уведомление при каждом выпуске обновления. Пользователям Windows необходимо щелкнуть уведомление, чтобы загрузить и установить последнюю версию. Процесс загрузки происходит в фоновом режиме, пока вы работаете. Когда он будет готов к установке, появится запрос на перезагрузку. Нажав на это, вы установите обновление и перезапустите VS Code.
Для дистрибутивов на основе Ubuntu, нажав на уведомление об обновлении, вы просто откроете веб-сайт, на котором вы сможете загрузить последнюю версию установщика. Гораздо проще - просто выполните sudo apt update && sudo apt upgrade -y. Это обновит все установленные пакеты Linux, включая Visual Studio Code. Причина этого заключается в том, что VS Code добавил репо в реестр репозитория при первоначальной установке. Вы можете найти информацию о репо по этому пути: /etc/apt/sources.list.d/vscode.list.

Пользовательский интерфейс



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

1. Activity Bar: позволяет переключаться между представлениями: проводник, поиск, контроль версий, отладка и расширения.
2. Side Bar: содержит активный вид.
3. Editor: здесь вы можете редактировать файлы и просматривать файлы уценки. Вы можете расположить несколько открытых файлов рядом.
4. Panel: отображает различные панели: встроенный терминал, панели вывода для отладочной информации, ошибок и предупреждений.
5. Status: отображает информацию о текущем открытом проекте и файле. Также содержит кнопки для выполнения действий по управлению версиями, а также для включения / отключения функций расширения.

Также есть верхняя строка меню, где вы можете получить доступ к системе меню редактора. Для пользователей Linux встроенным терминалом по умолчанию, вероятно, будет оболочка Bash. Для пользователей Windows это PowerShell. К счастью, внутри выпадающего списка терминала находится селектор оболочки, который позволит вам выбрать другую оболочку. Если установлено, вы можете выбрать любой из следующих:

1. Command Prompt
2. PowerShell
3. PowerShell Core
4. Git Bash
5. WSL Bash

Работа с проектами


Папка Projects, что я имею в виду, как в рабочей области. Как внештатный автор и разработчик, я разделяю проекты на основе того, в какой компании я работаю, и какой репо я использую. Для личных проектов я храню их под своим вымышленным «названием компании». Для проектов, с которыми я экспериментирую в учебных целях и которые я не собираюсь долго хранить, я просто буду использовать имя, например play или tuts в качестве замены {repo-provider}.
Если вы хотите создать новый проект и открыть его в VS Code, вы можете использовать следующие шаги. Откройте терминал и выполните следующие команды:



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

Пожалуйста, войдите или зерегистрируйтесь, чтобы увидеть скрытый текст.

или

Пожалуйста, войдите или зерегистрируйтесь, чтобы увидеть скрытый текст.

.

Создание и запуск кода

На панели действий вернитесь к панели обозревателя и с помощью кнопки «New Folder» создайте папку pages в корне проекта. Выберите эту папку и используйте кнопку New File, чтобы создать файл pages/index.js. Скопируйте следующий код:



На панели Explorer вы должны увидеть раздел «NPM Scripts» . Разверните это и наведите курсор мыши dev. Кнопку run (значок воспроизведение) появится рядом с ним. Нажмите на него, и он запустит сервер Dev.js внутри встроенного терминала.



Это должно занять несколько секунд. Используйте Ctrl + Click на URL

Пожалуйста, войдите или зерегистрируйтесь, чтобы увидеть скрытый текст.

, чтобы открыть его в браузере. Страница должна успешно открыться с сообщением «Welcome to Next.js!». В следующем разделе мы рассмотрим, как мы можем изменить настройки Visual Studio Code.
Форматирование

Часто при наборе или вставке кода из разных источников мы склонны смешивать стили кодирования. Например:

1. отступ с пробелом против табов
2. точка с запятой
3. двойные кавычки или одинарные кавычки

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

1. JavaScript
2. TypeScript
3. JSON
4. HTML

Вы можете настроить форматирование кода Visual Studio, изменив следующие параметры на true или false:

1. editor.formatOnType: отформатировать строку после ввода
2. editor.formatOnSave: отформатировать файл при сохранении
3. editor.formatOnPaste: форматировать вставленный контент

Однако встроенные средства форматирования могут не соответствовать вашему стилю кодирования. Если вы работаете с такими фреймворками, как React, Vue или Angular, вы обнаружите, что встроенные средства форматирования имеют тенденцию портить ваш код. Вы можете исправить это, отключив форматирование для определенного языка:



Тем не менее, лучшее решение - установить расширение для форматирования. Мой любимый -

Пожалуйста, войдите или зерегистрируйтесь, чтобы увидеть скрытый текст.

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

1. Flow · JSX · JSON
2. CSS · SCSS · Less
3. Vue · Angular
4. GraphQL · Markdown · YAML

После установки вам нужно установить его как форматировщик по умолчанию:



Также рекомендуется установить пакет prettier локально как зависимость dev:



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



Отладка


Если вы используете операторы print для отладки, вы должны прекратить это делать, поскольку есть лучший способ отладки вашего кода. С VS Code вы можете устанавливать точки останова и проверять переменные во время работы вашего кода

 

[Glich]

отличная статья для чайников

 

[Vas]

У VS Code есть версия без телеметрии от Microsoft, называется

Пожалуйста, войдите или зерегистрируйтесь, чтобы увидеть скрытый текст.

 

[slowtema]

А где продолжение? К такому вступлению, должно быть ещё 20 глав. По сути ничего не нет, даже как горячие клавиши настраивать не сказали.

 

[gardendude]

Да, поддерживаю...продолжение планируется? Бо по VSC очень мало инфы на русском.

 

[samson2014]

Для начинающих отличная статья, лучше чем самому шишки на обум набивать.

 

[muntle]

про точки останова не знал, очень полезно, спасибо

 

[alexbarank]

классная статья, очень помогло

 

[dftpp]

Чел, от души! Сильно помог.

 

[segey]

Ну для ознакомления поверхностно это очень хорошая статья, а дальше?