Как сделать терминал в visual studio

Обновлено: 05.07.2024

В 2016-м году компания Microsoft представила миру свой новый редактор программного кода. В отличие от старшей сестры — полноценной IDE Visual Studio — VS Code получился куда более компактным и легковесным решением. Он разработан как кроссплатформенное ПО и может быть успешно установлен в системах Windows, Linux и macOS.

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

И хоть, за годы своего существования, VSCode зарекомендовал себя, в основном, как продукт для веб-разработки, в 2018 году появилось расширение " Python ", которое дало программистам многочисленные возможности для редактирования, отладки и тестирования кода на нашем любимом языке.

Установка VSCode

Поистине смешные системные требования Visual Studio Code обязательно порадуют владельцев старых машин.

Для полноценной работы редактору требуется всего лишь 1 ГБ оперативной памяти и процессор с частотой от 1.6 ГГц.

Такое сочетание лёгкости и функциональности действительно подкупает, а отсутствие в VS Code каких-либо "лагов" и "фризов" делают разработку ещё более приятным и увлекательным занятием.

Установка редактора никуда не отходит от данной парадигмы и тоже является весьма простым и понятным процессом.

Windows

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

Linux

На сайте программы можно изучить способы инсталляции редактора на разные Linux-дистрибутивы, но здесь рассмотрим процесс установки для самого популярного из них — Ubuntu.

Установить VSCode можно несколькими способами:

Способ №1 : Самый простой способ — воспользоваться менеджером установки "Ubuntu Software".

sudo apt install ./ .deb

macOS

Алгоритм установки редактора внутри яблочной операционной системы также не представляет собой ничего сложного:

Сначала нужно скачать Visual Studio Code с официального сайта.
Затем открыть список загрузок браузера и найти там VSCode-Darwin-Stable.zip .
Нажмите на иконку увеличительного стекла, чтобы открыть архив.
Перетащите Visual Studio Code.app в папку приложений, сделав ее доступной на панели запуска.
Щёлкните правой кнопкой мыши по значку и выберете команду " Оставить в Dock ".

Настройка под Python

Установка расширения "Python"

Для начала работы с Python, нужно перейти на вкладку Extensions , что находится на панели слева, либо нажать Ctrl + Shift + X . Сделав это, набираем в строке поиска " Python ".

VS Code поддерживает, как вторую, так и третью версию языка, однако python интерпретатор на свою машину вам придётся поставить самостоятельно.

Если вы новичок и только начинаете работу с Python или же не имеете каких-то особых указаний на этот счёт, то лучшим выбором станет именно актуальная третья версия.

Вот краткий список основных возможностей расширения "Python":

Автодополнение кода.
Отладка.
Поддержка сниппетов.
Написание и проведение тестов.
Использование менеджера пакетов Conda.
Возможность создания виртуальных сред.
Поддержка интерактивных вычисления на Jupyter Notebooks.

Выбор версии интерпретатора Python

После от вас потребуется совершить выбор версии интерпретатора внутри самого редактора (обычно VS code знает, где он расположен). Для этого:

Откройте командную строку VSCode (Command Palette) комбинацией Ctrl + Shift + P .
Начинайте печатать " Python: Select Interpreter ";
После, выберите нужную версию интерпретатора.

Также выбрать версию можно в панели активности в левом нижнем углу:

Если вы хотите использовать pipenv в своем проекте:

Установите pipenv командой pip install pipenv (или pip3 install pipenv );
Выполните команду pipenv install ;
Откройте " Command Palette ", напечатайте " Python: Select Interpreter " и из списка выберите нужную версию интерпретатор.

Работа в VS Code

Запуск редактора

Как и другие современные редакторы и среды разработки, VS Code фиксирует состояние на момент закрытия программы. При следующем запуске, он открывается в том же самом виде, в котором существовал до завершения работы.

Так как VSCode, в первую очередь — редактор, а не полновесная среда разработки, здесь нет особой привязки к проекту. Вы можете сходу создавать, открывать и редактировать нужные вам файлы. Достаточно, после запуска, нажать Open File или New File и можно начинать работу.

Интерфейс

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

Весь UI VSCode разделился, таким образом, на шесть областей:

Область редактора — основная область для написания и редактирования вашего кода.
Боковая панель — здесь содержатся различные представления (например проводник).
Строка состояния — визуализирует рабочую информацию об открытом в данный момент файле.
Командная панель — классическая главная панель с вкладками file, edit, go, run и так далее.
Панель активности — область в крайнем левом углу, где находятся важные вспомогательные вкладки, вроде контроля версий, дебаггера и магазина расширений.
Мультипанель — панель на которой располагается вывод отладку, информация об ошибках и предупреждениях, а также встроенный в VS Code терминал.

Запуск Python-кода (run)

Выполнить код можно несколькими способами. Самый простой — комбинацией Ctrl + Alt + N .

Также можно вызвать скрипт контекстным меню, выбрав строку " Run Python File in Terminal ".

Или нажав иконку " Run " в правом верхнем углу.

Отладка (debugger)

Возможность полноценной отладки — сильная сторона редактора. Чтобы перейти в режим отладки, нужно установить точку останова и нажать F5 .

Вся информация о текущем состоянии будет выводиться на панель дебаггера.

Слева откроется панель дебаггера с информацией о состоянии переменных (Variables), отслеживаемых переменных (Watch) и стеке вызова (Call stack).

Сверху расположена панель инструментов дебаггера.

Рассмотрим команды (слева направо):

continue ( F5) — перемещает между breakpoint-ами;
step over ( F10) — построчное (пошаговое) перемещение;
step into ( F11) — построчное (пошаговое) перемещение c заходом в каждую вызываемую функцию;
step out ( Shift + F11) — работает противоположно step into — выходит из вызванной функции, если в данный момент вы находитесь внутри неё. Далее работает как continue .
restart ( Ctrl + Shift + F5) — начинаем отладку с начала.
stop ( Shift + F5) — остановка и выход из режима отладки.

С отладкой разобрались 👌.

Тестирование (testing)

С поддержкой тестов у VS Code тоже всё в порядке, однако, по умолчанию тестирование отключено. Для его активации нужна небольшая настройка.

Сначала следует нажать комбинацию клавиш Ctrl + Shift + P и в так называемой палитре команд выбрать Python: Configure Tests .

Для выбора фреймворка для тестов, выполните комбинацию "Ctrl + Shift + P" и наберите "Python: Configure Tests"

Редактор предложит вам определить фреймворк (мы выбрали "pytest") и папку, содержащую тесты (мы выбрали ". Root directory").

Создадим новый файл с тестами ( test_app.py ) и запустим его, кликнув правой кнопкой мыши на этом файле и выбрав пункт " Run Current Test File ".

Чтобы увидеть результаты, необходимо открыть вкладку Output на панели, и в выпадающем меню выбрать пункт PythonTestLog .

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

Для удобства работы с тестами, установим расширение " Python Test Explorer for Visual Studio Code ".

Теперь информацию по тестам можно посмотрев, кликнув на левой панели " иконку с колбой ", предварительно запустив тесты.

Вкладка "test" (иконка с колбой в панели слева) откроет удобный проводник для запуска тестов и просмотра их состояния.

Для начала работы с системами контроля версий обратимся к вкладке Source Control , что находится на панели активности слева (или Ctrl + Shift + G ).

По умолчанию VS Code дружит с Git и GitHub

Поддержку других систем возможно настроить самостоятельно, установив соответствующие расширения.

Чтобы связать проект с github (или gitlab), сперва необходимо скачать на ваш ПК git (если ещё не скачан). VSCode автоматически определит его местоположение, и затем у вас появится возможность синхронизации.

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

А для удобного просмотра изменений в git, советую установить расширение " Git Graph ". После его установки, на панели " Source Control " появится новая кнопка, которая отобразит граф состояния (git log).

Я использую код Visual Studio на своем ПК с Windows 10. Я хочу изменить свой терминал по умолчанию из Windows PowerShell на Bash на Ubuntu (в Windows).

Как я могу это сделать?

Вы также можете выбрать свой терминал по умолчанию, нажав F1 в коде VS и набрав/выбрав терминал: выберите "Стандартная оболочка".

Я просто набираю следующие ключевые слова в открытом терминале;

PowerShell
удар
CMD
узел
python (или python3)

Подробнее см. Ниже. (Версия VSCode 1.19.1 - ОС Windows 10)

Он также работает на VS Code Mac. Я попробовал это с VSCode (версия 1.20.1)

Перейдите к File > Preferences > Settings (или нажмите Ctrl + , ), затем щелкните крайний левый значок в верхнем правом углу, "Открыть настройки (JSON)"

Добавьте это в окне настроек JSON (в фигурных скобках <> ):

(Здесь вы можете также установить любые другие пользовательские настройки)

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

Теперь, если вы откроете новое окно терминала в VS Code, оно должно открываться с помощью bash вместо PowerShell.

Мы обратили внимание, что проблема связи с компьютером через последовательный порт (COM-порт) часто обсуждается на различных форумах.

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

Основной темой будет создание приложения для ПК, которое может взаимодействовать с микроконтроллером через последовательный порт. Приложение предназначено для систем, использующих USART. Такое решение позволяет передавать данные не только через RS232, но также через USB и конвертер FT232, bluetooth, IrDA и другие интерфейсы с использованием виртуального COM-порта.

Интерфейс USART

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

Для работы мы будем использовать ATmega16, но программы должны быть легко перенесены на другие связанные процессоры. Сигналы TxD (передача данных) и RxD (прием данных) используются для передачи данных через USART.

Скорость передачи данных определена для соединения заранее. Это делается путем ввода соответствующего значения в UBRR (регистр скорости передачи USART), рассчитанного на основе тактовой частоты микроконтроллера.

Кстати, существуют стандартные скорости передачи: 2400, 4800, 9600 и т.д. Для обеспечения передачи с ошибкой 0,00%, тактовая частота микроконтроллера должна быть заранее известна и стабильна, но также должна быть кратна 1,8432 МГц. Выбор другой частоты снизит точность.

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

Фрейм данных в передаче UART выглядит следующим образом:

Он включает в себя стартовый бит для оповещения о начале следующего кадра (от 5 до 9 битов данных) и бит четности для проверки ошибок при приеме. Он может работать в трех режимах — без управления (no), сумма всегда четная (even), сумма всегда нечетная (odd).

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

Ниже представлена схема подключения UC к RS:

Другие, частые конфигурации — это USART, работающий с FT232RL и подключенный к USB-порту, модуль Bluetooth, например, BTM-222 (помните о напряжении питания 3,3 В), или соединение двух микроконтроллеров друг с другом. Но мы не будем о них писать. Схемы подключения без проблем можно найти в Интернете. Перейдем к программе со стороны ПК.

Среда разработки

Главный критерий выбора среды разработки — наличие выделенных библиотек для поддержки последовательных портов.

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

Появится следующее окно (в полной версии Visual Studio 2010 есть выбор из большего количества типов проектов).

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

Отдельные компоненты классов могут иметь частные атрибуты (доступные только для методов данного класса) или общедоступные (также доступные для других классов). Эти атрибуты используются для повышения безопасности кода. Обычно переменные класса делаются закрытыми, а методы — общедоступными.

Специальные методы — это конструктор (функция с тем же именем, что и класс, классы могут иметь более одного конструктора, каждый имеет то же имя, но разные аргументы) и деструктор. Они отвечают за инициализацию и завершение работы объекта, принадлежащего данному классу.

Создание приложения

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

Название и текст второй таблицы мы пока не меняли. Сначала мы сделаем терминал, а вкладку зарезервируем для более изощренного способа связи. Вы же можете использовать только вкладки с параметрами и терминалом, т.к. управлять вкладками очень просто и требует только использования кнопок Add и Remove. Теперь переходим на вкладку параметров и добавляем такие элементы, как label, combobox и button.

Предпосылки

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

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

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

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

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

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

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

Разработчики Mac имели доступ к TextMate, который был выпущен в октябре 2004 года. Система фрагментов кода, используемая всеми вышеперечисленными редакторами, была основана на TextMate. Воспользовавшись всеми из них, я почувствовал, что появившийся после этого редактор значительно улучшил текущий. Согласно опросу разработчиков, проведенному Stack OverFlow в 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 разделен на пять основных областей, которые вы можете легко настроить.

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

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

Command Prompt
PowerShell
PowerShell Core
Git Bash
WSL Bash

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

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

Если вы хотите создать новый проект и открыть его в VS Code, вы можете использовать следующие шаги. Откройте терминал и выполните следующие команды:

Вы также можете сделать это в проводнике. При доступе к контекстному меню мыши вы сможете открыть любую папку в VS Code.

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

Обратите внимание на все поля, которые были заполнены и выбраны. Далее перейдите в терминал и выполните следующее:

Как только редактор будет запущен, вы можете запустить встроенный терминал с помощью сочетания клавиш Ctrl+~ (тильда). Используйте следующие команды для генерации package.json и установки пакетов:

Затем откройте package.json и замените раздел scripts следующим:

Окно кода Visual Studio должно выглядеть следующим образом:

Прежде чем мы рассмотрим следующий раздел, я хотел бы упомянуть, что VS Code также поддерживает концепцию многокорневых рабочих пространств. Если вы работаете со связанными проектами - front-end, back-end, docs и т.д. - вы можете управлять ими в одном рабочем пространстве в одном редакторе. Это облегчит синхронизацию вашего исходного кода и документации.

Контроль версий с помощью Git

Чтобы создать новую ветку или переключиться на существующую ветку, просто нажмите на название ветки master в строке состояния в левом нижнем углу. Это выведет филиальную панель для вас, чтобы принять меры.

Проверьте следующие расширения для еще лучшего опыта работы с Git:

Поддержка другого типа SCM, такого как SVN, может быть добавлена путем установки соответствующего расширения SCM с рынка.

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

Настройки пользователя и рабочей области

Чтобы получить доступ к настройкам параметров VS Code, используйте сочетание клавиш Ctrl+, . Вы также можете получить к нему доступ через команду меню следующим образом:

В Windows / Linux - File > Preferences > Settings
В macOS - Code > Preferences > Settings

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

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

Параметры кода Visual Studio подразделяются на две разные области:

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

В зависимости от вашей платформы вы можете найти пользовательские настройки VS Code в следующих местах:

Windows: %APPDATA%\Code\User\settings.json
macOS: $HOME/Library/Application Support/Code/User/settings.json
Linux: $HOME/.config/Code/User/settings.json

Для Workspace просто создайте папку .vscode в корне вашего проекта. Затем создайте файл settings.json внутри этой папки. Если вы работаете с панелью редактора настроек, она сделает это автоматически, когда вы измените настройки в области рабочего пространства. Вот подмножество глобальных настроек, с которыми я предпочитаю работать:

Я склонен работать с несколькими проектами одновременно, поэтому настройка window.openFoldersInNewWindow позволяет открывать новые папки проектов, не закрывая (не заменяя) активную. Для editor.defaultFormatter , я поставил Prettier, который является расширением. Далее давайте посмотрим на языковые ассоциации.

Ассоциация языков

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

Горячие клавиши

До сих пор мы рассмотрели два сочетания клавиш:

Ctrl + , : Открыть настройки
Ctrl + Shift + P : Открыть командную строку

Command Palette обеспечивает доступ ко всем функциям Visual Studio Code, включая сочетание клавиш для общих операций. Если вы устанавливаете расширение, любые действия, инициируемые вручную, будут перечислены здесь. Однако для таких расширений, как Prettier и Beautify, они будут использовать одну и ту же команду Format. Visual Studio Code также имеет свой собственный встроенный модуль форматирования. Чтобы указать, какой плагин должен выполнять действие, вам нужно перейти в редактор настроек и изменить конфигурацию стандартного форматера. Вот пример того, как я установил это в моем случае:

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

Ctrl + P позволит вам перейти к любому файлу или символу, набрав его имя
Ctrl + Tab проведет вас по последнему набору открытых файлов
Ctrl + Shift + O позволит вам перейти к определенному символу в файле
Ctrl + G позволит вам перейти к определенной строке в файле

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

Ctrl + D : нажмите несколько раз, чтобы выбрать одинаковые ключевые слова. Когда вы начинаете печатать, он переименовывает все выбранные ключевые слова
Ctrl + Shift + Up/Down : Добавить курсор выше или ниже, чтобы редактировать несколько строк одновременно
Alt + Shift + Click : Добавить курсор в нескольких местах для одновременного редактирования в разных разделах кода
Ctrl + J : Добавить 2 или более строк в одну.
Ctrl + F : Поиск ключевого слова в текущем файле
Ctrl + H : Поиск и замена в текущем файле
Ctrl + Shift + F : Поиск по всем файлам

Если вы зайдете в меню параметров, вы найдете горячие клавиши для большинства команд. Лично я никогда не привык к некоторым сочетаниям клавиш по умолчанию, которые поставляются с Visual Studio Code из-за использования таких редакторов, как Atom, в течение длительного времени. Решением, которое я нашел, было просто установить Atom Keymap. Это позволяет мне использовать сочетание клавиш Ctrl + \ для переключения боковой панели. Если вы хотите отредактировать привязки клавиатуры самостоятельно, просто перейдите в меню File > Preferences > Keyboard Shortcuts. (Code > Preferences > Keyboard Shortcuts в macOS).

Возможности редактора кода

В этом разделе мы быстро рассмотрим различные удобные для разработчика функции, которые предоставляет Visual Studio Code, чтобы помочь вам писать более быстрый и более понятный код.

Intellisense

JavaScript, TypeScript
HTML
CSS, SCSS и Less

При вводе кода появится всплывающее окно со списком возможных вариантов. Чем больше вы печатаете, тем короче список. Вы можете нажать Enter или, Tab когда нужное ключевое слово будет выделено, для автозаполнения кода. Нажатие Esc удалит всплывающее окно. Вставка . в конце ключевого слова или нажатие Ctrl + Space приведет к появлению всплывающего окна IntelliSense.

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

Снипеты

Ввод повторяющегося кода, такого как операторы if , циклы for и объявление компонентов, может быть немного утомительным. Вы можете копировать и вставлять код, чтобы работать быстрее. К счастью, Visual Studio Code предлагает функцию Snippets , которая называется просто шаблонами кода. Например, вместо ввода console.log просто введите log , и IntelliSense предложит вам вставить фрагмент.

Есть много фрагментов, к которым вы можете получить доступ, если вы запомнили сокращение или ключевое слово, которое вызывает вставку фрагмента. Поскольку вы новичок в этом, вы можете получить доступ к списку всех фрагментов, доступных через Command Palette > Insert Snippets:

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

Форматирование

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

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

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

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

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

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

Flow · JSX · JSON
CSS · SCSS · Less
Vue · Angular
GraphQL · Markdown · YAML

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

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

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

Linting

Lint или ЛИНТЕР является инструментом, который анализирует код и проверяет на наличие синтаксических ошибок, проблем стилизации, вызовы на необъявленных переменных, использование устаревших функций, неправильного охвата и многие другие вопросы. Visual Studio Code не поставляется вместе с Linter. Тем не менее, это облегчает настройку для используемого вами языка программирования. Например, если вы работаете над новым проектом Python, вы получите приглашение установить его для вас. Вы также можете открыть панель команд ( Ctrl+ Shift+ P ) и выбрать команду Python: Select Linter.

Для JavaScript вам нужно установить расширение, такое как ESLint, которое является самым популярным. Это расширение требует, чтобы вы установили ESLint как dev-зависимость. Вам также может понадобиться один или несколько плагинов ESLint, которые помогут вам подобрать стиль и структуру кодирования, которые вы используете.

После того, как вы настроите инструмент linting, VS Code будет автоматически проверять ваш код каждый раз, когда вы сохраняете файл. Вам также следует обновить ваши сценарии package.json , чтобы включить команду для запуска инструмента lint.

Отладка

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

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