Visual studio code разделение экрана

Обновлено: 07.07.2024

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

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

Компоновка окна редактора кода

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

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

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

Регионы кода

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

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

Сворачивание кода

Кроме регионов, которые необходимо определять вручную, в системе Visual Studio 2013 есть структуры кода (outlines), позволяющие автоматически сворачивать методы, комментарии и определения классов. Режим автоматического сворачивания включен по умолчанию. Если он был отключен, то его можно снова включить с помощью команды Edit --> Outlining --> Start Automatic Outlining.

На рисунке ниже показаны четыре сворачиваемых региона. Один из них называется Constructor, а остальные три автоматические структуры кода позволяют свернуть класс, XML-комментарии и метод конструктора (который был сжат). Автоматические структуры можно сворачивать и разворачивать так же, как и регионы, которые определяются вручную.

Меню Edit --> Outlining содержит большое количество команд, помогающих переключать режимы сворачивания, то сжимая весь файл до определений методов и свойств (Edit --> Outlining --> Collapse to Definitions), то разворачивая все свернутые фрагменты кода вновь (Edit --> Outlining --> Stop Outlining). Другой способ разворачивать и сворачивать регионы основан на использовании комбинации клавиш <Ctrl+M>, <Ctrl+M> . Эта комбинация позволяет переключаться между двумя режимами.

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

Режим Smart Indenting в системе Visual Studio практически всегда прекрасно справляется с автоматическим выравниваем кода по мере его ввода или вставки в окно редактора кода, но иногда встречаются плохо отформатированные фрагменты кода, которые трудно читать. Для того чтобы система Visual Studio переформатировала весь документ и установила позиции фигурных скобок и отступов строк, выберите команду Edit --> Advanced --> Format Document или нажмите комбинацию клавиш <Ctrl+K>, <Ctrl+D> . Для того чтобы переформатировать только что выделенный блок кода, выберите команду Edit --> Advanced --> Format Selection или нажмите комбинацию клавиш <Ctrl+K>, <Ctrl+F> .

Вы могли заметить, что команды Tabify/Untabify Selected Lines в меню Edit --> Advanced сильно отличаются от команды Format Selection. Эти команды превращают ведущие пробелы в символы табуляции, и наоборот, а не вычисляют заново отступы, как это делает команда Format Selection.

Перемещение вперед и назад по коду

Когда вы перемещаетесь по элементам интерфейса и между ними, система Visual Studio 2013 отслеживает вашу позицию почти так же, как веб-браузер отслеживает сайты, которые вы посетили. Используя команды Navigate Forward и Navigate Backward из меню View, вы сможете легко перемещаться вперед и назад между разными элементами проекта, в которые внесли изменения. Для перемещения назад используется комбинация клавиш <Ctrl+-> , а для перемещения вперед - <Ctrl+Shift+-> .

Дополнительные свойства редактора кода

Редактор кода в системе Visual Studio имеет очень много возможностей, которые трудно исчерпывающим образом описать в этой статье. Однако наиболее полезные из них мы приводим ниже.

Подсветка ссылок

Подсветка ссылок - интересное свойство системы Visual Studio, которое появилось в версии 2010. Система выделяет все вхождения имени элемента кода в области видимости (например, имени метода или свойства), на которое указывает курсор. Благодаря этому легче будет найти места, где это имя еще используется в коде. Вы сможете легко перемещаться между этими местами с помощью комбинации клавиш <Ctrl+Shift+Up/Down> .

Укрупнение кода

С помощью комбинации <Ctrl+Mouse Wheel> можно увеличивать и уменьшать масштаб кода (по существу, увеличивая и уменьшая текст). Это свойство может оказаться особенно полезным, когда необходимо продемонстрировать код группе людей. В левом нижнем углу окна редактора кода есть раскрывающийся список, позволяющий выбрать заранее заданные уровни увеличения текста.

Сворачивание текста

Чтобы включить опцию сворачивания текста в окне редактора кода, выберите команду Tools --> Options, откройте узел Text Editor, выберите подузел All Languages и установите флажок Word Wrap. Можете также отобразить глиф стрелки возврата (return arrow) в том месте, где текст должен быть свернут, установив флажок Show Visual Glyphs for Word Wrap, расположенный ниже флажка Word Wrap.

Чтобы применить эти установки к текущему проекту, выберите команду Edit --> Advanced --> Word Wrap.

Номера строк

Для того чтобы отслеживать положение курсора в файле, полезно пронумеровать строки в окне редактора кода. Для того чтобы включить режим нумерации строк, выберите команду меню Tools --> Options, откройте узел Text Editor, выберите узел All Languages и установите флажок Numbers:

Разделение окна

Иногда нужно разделить один и тот же файл кода на две части и просматривать одновременно в разных окнах. Можете разделить активное окно редактора на верхнюю и нижнюю части с помощью линии разбивки (splitter bar). Эти окна можно прокручивать независимо друг от друга и отображать в них содержимое одного и того же файла в одно и то же время.

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

Чтобы настроить размеры каждого окна, достаточно передвинуть линию разбивки вверх или вниз. Удалить линию разбивки просто: дважды щелкните на ней или выберите команду Remove Split из меню Window.

Свободное перемещение окон редактора кода

В версии Visual Studio 2010 появилось новшество, которого долго ожидали программисты, работающие с несколькими дисплеями, - возможность "освобождать" окна редактора кода (и инструментальные окна) и перемещать их за пределы главного окна системы Visual Studio (как показано на рисунке ниже) и даже на другой дисплей. Это позволяет одновременно работать с несколькими окнами редактора кода, расположенными на разных дисплеях. Для того чтобы освободить окно, сначала убедитесь, что оно находится в фокусе, а затем выберите команду Float из окна Window. В качестве альтернативы можно щелкнуть правой кнопкой мыши на заголовке окна и выбрать команду Float из контекстного меню или щелкнуть и перетащить закладку для этого окна (при этом окно освобождается) и перетащить его в то место, где вы хотите его расположить.

Когда разделение окна редактора кода на две части для одновременного просмотра разных фрагментов одного и того же файла (см. предыдущий раздел) оказывается неудобным, можно вместо этого использовать плавающее окно, разместив его, например, на другом дисплее (если вы работаете с несколькими дисплеями). Для этого можно воспользоваться специальным трюком (поскольку двойной щелчок мышью на файле в окне Solution Explorer просто активизирует существующее окно редактора кода для данного файла) - выбрать команду New Window в меню Window. Эта команда откроет просматриваемый в данный момент файл в новом окне, которое можно сделать свободным и разместить в любом месте.

Создание групп закладок

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

Для того чтобы начать этот процесс, откройте в окне редактора кода несколько закладок. Убедитесь, что закладка окна редактирования кода находится в фокусе, а затем выберите команду Window --> New Horizontal Tab Group или Window --> New Vertical Tab Group из открывшегося меню. В результате будет создана новая группа закладок и мозаика для них:

В качестве альтернативы можно просто перетащить закладку вниз или за существующую и прикрепить ее в этой позиции, получив тот же самый результат. Можно также перетаскивать закладки из одной группы закладок в другую, используя команды Window --> Move to Next Tab Group и Window --> Move to Previous Tab Group. Эти команды доступны также в меню, которое открывается после щелчка правой кнопкой мыши на закладке. Для того чтобы восстановить пользовательский интерфейс, имеющий только одну группу закладок, переместите закладки из новой группы (или групп) закладок назад в исходное место, и мозаика исчезнет.

Несколько панелей Solution Explorer

Если вы работаете на нескольких мониторах, то в версиях Visual Studio 2008 и ниже вы могли заметить, что нельзя открыть несколько панелей Solution Explorer. В Visual Studio 2013 этого ограничения не существует. Щелкните на одном из элементов в окне Solution Explorer правой кнопкой мыши и выберите в контекстном меню команду New Solution Explorer view. При выборе этой команды откроется новое окно Solution Explorer, которое будет содержать выбранный элемент. Это очень удобно при работе на нескольких мониторах.

Дополнительные возможности

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

"Закомментирование" и "раскомментирование" блока кода

В системе Visual Studio есть простое средство для "закомментирования" и "раскомментирования" блоков. Для этого следует выделить блок, затем выбрать команду Edft --> Advanced --> Comment Selection, чтобы "закомментировать" его, или Edit --> Advanced --> Uncomment Selection, чтобы "раскомментировать" его. Проще всего выбрать эти команды (скорее всего, именно их вы будете чаще всего использовать) с помощью комбинаций клавиш. Нажмите комбинации клавиш <Ctrl+K>, <Ctrl+C> , чтобы "закомментировать" блок кода, и <Ctrl+K>, <Ctrl+U> - чтобы "раскомментировать" его. Еще одним простым средством для доступа к этим командам является инструментальная панель Text Editor.

Выделение блока

Выделение блока, которое называют также выделением окна (box selection), столбца (column selection), прямоугольника (rectangle) или вертикального текста (vertical text selection), как показано на рисунке ниже, подразумевает выделение текстового блока, а не строк (процедура, которая называется выделением потока (stream selection)). Для того чтобы отметить текстовый блок, нажмите клавишу <Alt> и не отпускайте ее, пока выделяете текст мышью, или используйте комбинацию клавиш <Shift+Alt+Arrow> . Это свойство может оказаться полезным, когда необходимо удалить часть вертикально выровненного кода (например, префикс в объявлениях переменных):

Многострочное редактирование

Многострочное редактирование - это новое свойство, появившееся в системе Visual Studio 2010 и расширяющее возможность выделения блоков. В предыдущих версиях системы после выделения вертикального текстового блока вы могли только удалять, вырезать или копировать блок. Теперь в системе Visual Studio после выделения вертикального текстового блока можно в каждой строке набрать текст, который заменит выделенный фрагмент. Это удобно, например, когда требуется заменить уровень доступа к группе переменных с private на protected.

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

Кольцевой буфер обмена

Система Visual Studio отслеживает последние двадцать фрагментов текста, которые были скопированы или вырезаны в буфер обмена. Для того чтобы вставить текст, который был ранее скопирован в буфер обмена, но был перезаписан, вместо обычной комбинации <Ctrl+V> , предназначенной для вставки, можно использовать комбинацию <Ctrl+Shift+V> . Нажав клавишу <V> и удерживая клавиши <Ctrl+Shift> , можно выполнять циклы просмотра элементов буфера обмена.

Полноэкранный режим

Можете максимизировать представление кода, подлежащего редактированию, выбрав команду View --> Full Screen или нажав комбинацию клавиш <Shift+Alt+Enter> , чтобы увеличить до максимума окно редактора кода, скрыв другие инструментальные окна и панели. Для того чтобы вернуться в обычный режим, снова нажмите комбинацию клавиш <Shift+Alt+Enter> или щелкните на кнопке переключения Full Screen, добавленной в конце панели меню.

Переход к определению

Для того чтобы быстро перейти к определению класса, метода или члена, расположенного ниже курсора, щелкните правой кнопкой мыши и выберите команду Go То Definition или нажмите клавишу <F12> .

Поиск всех ссылок

В системе Visual Studio 2013 есть возможность найти точку вызова метода или ссылки на свойство, щелкнув правой кнопкой мыши на его определении и выбрав команду Find All References в контекстном меню или поместив курсор на определение метода и нажав комбинацию клавиш <Shift+F12> . Эти команды открывают инструментальное окно Find Symbol Results, содержащее позиции, в которых существуют ссылки на указанный метод или свойство. Теперь можно дважды щелкнуть на ссылке в окне результатов, чтобы переместиться на искомую позицию в окне редактирования кода.

Это свойство несколько устарело после появления нового окна Call Hierarchy, которое будет рассмотрено позже. Однако оно по-прежнему позволяет быстро находить используемый метод без перемещения по окну Call Hierarchy.

Если вы ищете способ изменить это через графический интерфейс пользователя, по крайней мере, в текущей версии 1.10.1, если вы наведете над группой OPEN EDITORS на панели EXPLORER появится кнопка, которая переключает группу редакторов расположение между горизонтальным и вертикальным.

Нажмите CMD + SHIFT + P (MAC) и найдите Toggle Editor Group

Чтобы разделить по вертикали:

⌘ + \ Mac

Чтобы разделить ортогонально (т.е. в этом случае горизонтально):

⌘ + k + ⌘ + \ Mac

В версии 1.23.1 это Ctrl+Shift+P и Split Editor Это разделит экраны по вертикали, и вы можете перемещаться по ним, используя Ctrl+K+LeftArrow

Чтобы изменить редактор в режиме "Пейзаж" и "Вертикальный", выполните следующие действия.

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

Теперь, когда у вас открыто оба окна, вы должны использовать комбинацию клавиш для ПК (Alt + Shift + 1) для (операционных систем Windows и Linux) или для MAC (Cmd + Option + 1), как прокомментировал здесь v-andrew.

Привязки клавиш были изменены с версии 1.20:

SHIFT + ALT + 0 для Linux.

Предположительно, то же самое работает для Windows и CMD + OPT + 0 для Mac.

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

Обновление: вы также можете перетащить файл из Проводника, чтобы разделить Редактор таким же образом, как указано выше.

Просто в windows

ctrl + @(кнопка 2 в верхнем горизонтальном ряду цифр на клавиатуре)

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

Для поддержки гибких макетов вы можете создавать пустые группы редакторов. По умолчанию закрытие последнего редактора группы редакторов также закроет саму группу, но вы можете изменить это поведение с помощью нового параметра workbench.editor.closeEmptyGroups: false:

В новом View > Editor Layout menu: есть предопределенный набор макетов View > Editor Layout menu:

Редакторы, которые открываются сбоку (например, при нажатии действия редактора "Разделить панель инструментов редактора"), по умолчанию открываются в правой части активного редактора. Если вы предпочитаете открывать редакторы ниже активного, настройте новый параметр workbench.editor.openSideBySideDirection: down.

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

Если вы хотите изменить сочетания клавиш по умолчанию, см. Раздел "Привязки клавиш".

У меня есть файл, xyz.cpp. Я хочу открыть два экземпляра этого файла в Visual Studio (кстати, я использую Visual Studio 2005). Зачем мне это делать? Я хочу сравнить два раздела одного и того же файла рядом. Я знаю обходные пути, такие как:

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

Я могу разбить окно на две части. Проблема с разделением, что я могу разделить только по горизонтали. Результатом горизонтального разделения является то, что правая половина моего экрана является пустым пространством.

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

ОТВЕТЫ

Ответ 1

Вот как это сделать.

Выберите вкладку, которую вы хотите две копии
Выберите меню Окно → Новое окно из меню.
Щелкните правой кнопкой мыши новую вкладку и выберите New Vertical Tab Group

Если "Новое окно" не указано в меню "Окно", обратите внимание, что команда существует, даже в Visual Studio 2017. Добавьте ее в меню "Окно" с помощью меню "Инструменты" → "Настройка" → "Команды". В этот момент решите, куда поместить команду "Новое окно" и выберите "Добавить команду".

ОБНОВЛЕНО "30 июля 2018 года"

В Visual Studio Code версии 1.25.1 и новее

Способ 1

Вы можете просто щелкнуть левой кнопкой мыши по файлу на боковой панели (проводнике) и нажать Ctrl + Enter .

Способ 2

Просто щелкните правой кнопкой мыши свой файл на боковой панели кода Visual Studio (проводник) и выберите первый вариант, открытый сбоку.

Ответ 2

Для выражений Visual Basic, HTML, JScript и RDL опция Window > New Window упомянутая в ответе PaulB, отключена. Однако в реестре можно изменить параметр, чтобы включить пункт меню.

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

Включение нового окна в реестре Windows. [ 1 ] [ 2 ]

Перейти к следующему разделу реестра. Этот пример для Basic (Visual Basic), но ключ также для HTML, JScript и RDL Expression.

64-разрядная ОС: HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Microsoft\VisualStudio\10.0\Languages\Language Services\Basic
32-разрядная ОС: HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\VisualStudio\10.0\Languages\Language Services\Basic

Найдите значение Single Code Window Only и выполните одно из следующих действий:

Установите 0
Переименовать значение
Удалить значение (будьте осторожны !)

Это активирует пункт меню "Новое окно", но он все еще может не отображаться в меню.

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

Чтобы увидеть пункт меню "Новое окно", мне пришлось добавить его обратно в меню:

Инструменты> Настроить. > Команды> Добавить команду.
Выберите "Строка меню", выберите меню "Окно" в выпадающем меню
Добавить команду. > Окно> Новое окно> ОК

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

Ответ 3

Откройте файл (если вы используете несколько групп вкладок, убедитесь, что ваш файл выбран).

Окно меню → Разделить (поочередно, этот маленький кусочек чуть выше вертикальной полосы прокрутки редактора - возьмите его и перетащите вниз)

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

Как только вы закончите, возьмите разделитель и перетащите его полностью (или меню Окно → Удалить разделение).

Ответ 4

Вы можете использовать опцию Windows → Новое окно, чтобы дублировать текущее окно. Смотрите больше на: Почему мне нравится Visual Studio 2010? Открепить Windows

Ответ 5

Ответ Люка не сработал для меня. Команда "Новое окно" уже была указана в настройке параметров, но не отображалась в контекстном меню вкладок.js, несмотря на удаление параметра реестра.

Поэтому я использовал:

Прокрутите вниз, чтобы выбрать Window.NewWindow

И я нажал и назначил сочетания клавиш, Ctrl + Shift + W .

Это сработало для меня.

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

Ответ 6

Зайдите в меню → Windows → Новое окно:

Ответ 7

Меню "Окно", "Новая горизонтальная/вертикальная вкладка", я думаю.

Ответ 8

При работе с Visual Studio 2013 и VB.NET я обнаружил, что вы можете довольно легко настроить меню и добавить команду "Новое окно" - нет необходимости возиться с реестром!

Только Бог знает, почему Microsoft решила не включать команду для некоторых языков.

Ответ 9

Для более новых версий (таких как Visual Studio 2017)

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

Ответ 10

Для типов файлов, где один и тот же файл не может быть открыт в вертикальной группе вкладок (например, файлы .vb), вы можете

Откройте 2 разных экземпляра Visual Studio
Открыть один и тот же файл в каждом экземпляре
Измените размеры окон IDE и поместите их рядом друг с другом, чтобы достичь своего макета.

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

Ответ 11

У меня нет копии Visual Studio 2005, но этот процесс работает в Visual Studio 2008:

Откройте xyz.cpp вместе с другим файлом.
Щелкните правой кнопкой мыши заголовок вкладки и выберите новую вертикальную группу вкладок.
Щелкните левой кнопкой мыши по этому другому файлу в первой группе вкладок.
Снова откройте xyz.cpp через обозреватель решений.

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

Ответ 12

Открыв свой файл, перейдите в окно команд (меню "Вид" → "Другие окна" → "Окно команд" или просто Ctrl + Alt + A )

работал для меня (Visual Studio 2017).

Или используя меню:

Окно меню → Новое окно

Окно меню → Новая вертикальная группа нажатий

Ответ 13

Я придумал хак, который может дать результат, намеченный в первоначальном ответе.

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

Если вы сравните, у вас появится новое окно под названием diff, показывающее содержимое вашего файла.

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

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

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 больше не будет для вас проблемой, а активные проекты ждет успех. Удачи!

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