Visual studio code как открыть меню
Visual Studio Code is a lightweight code editor from Microsoft. It comes with built-in support for JavaScript, TypeScript and Node.js and is available for Windows, MacOS and Linux. Additional functionality can be added to Visual Studio Code by using Extensions. In the following you’ll learn how to setup VS Code and we’ll explore the basic functionality of the code editor.
If your platform is MacOS, the installation is very easy. Download the Visual Studio Code archive, double click to unpack the archive and drag the file Visual Studio Code.app to the Applications folder.
If you’re on Windows, you need to download and run the installer (VSCodeSetup-stable.exe). Having completed the installation successfully you can find Visual Studio Code in C:\Program Files (x86)\Microsoft VS Code .
It’s also possible to use Visual Studio Code from the command line by using the command code. To be able to use that command the following steps needs to be performed first. Open Visual Studio Code and access the Command Palette (⇧⌘P) and start typing shell command and select option Shell Command: Install ‘code’ command in PATH.
After that you’re able to start a new terminal window, change into your project directory and use code . to open the current directory in Visual Studio Code.
The user interface of Visual Studio Code is split up into different areas:
- The most important part of the application is the Code Editor area on the right side. Here you can open and edit your code files. It’s possible to open up to three files side-by-side.
- Left of the Code Editor you can find the Side Bar area which can contain different views, e.g. the Explorer view like you can see in the screenshot. The Explorer gives you access to the project structure and you can select and open file for editing. You can toggle the visibility by using keys ⌘B.
- On the very left side you can find the View Bar. By using the View Bar you can switch the view which is displayed in the Side Bar. The following views are available by default: Explorer, Search, Git, Debug, Extensions.
- Underneath the Code Editor you can find the Panels area. Here you can choose from four different panel views: Problems, Output, Debug Console and Terminal.
- The blue Status Bar at the bottom of the application windows gives you access to information about the opened project and the open files.
Visual Studio Code offers a Zen Mode which let’s you focus on the code. In this mode all other user interface elements are hidden and only the editor area is visible. To switch to Zen Mode use the key shortcut ⌘K Z. To leave the Zen Mode you need to hit ESC two times.
The Code Editor is a powerful tool. You can open up to three files side by side as you can see in the following:
There are different ways of opening up a file side by side:
- Hold the Cmd key and click on a file in the Explorer view in the Side Bar
- Choose the content menu entry Open to the Side for a file in the Explorer view
- Click the Split Editor button in the upper right of the editor
- Drag and drop a file to the side to open another editor
- Hit Cmd+Enter in the Quick Open file selector
The code editor has a feature which is called IntelliSense. IntelliSense features could be described as code completion, content assist and code hinting. By default IntelliSense features are available for the following languages: JavaScript, TypeScript, JSON, HTML, CSS, Less and Sass.
If IntelliSense is available, suggestions will pop up as you type. If you continue typing, the list of suggestions is filtered to include only members containing your typed characters. You can press Tab or Enter to accept and insert the current suggestion.
You can also activate IntelliSense explicitly by using keycode ⌃Space.
To quickly open files type ⌘P. The following input dialog appears:
As you can see you can start typing immediately and you’ll get back a result list with matching file names.
By clicking on symbol
in the View Bar you can open the Search View in the Side Bar which looks like the following:
This view can be used to search across files of the current project. You can also open the view by using keys Ctrl+Shift+F. In the open search view you can start typing and the matching results will be shown after pressing enter:
All functions of Visual Studio Code can be accessed via keyboard only. To do so, just make use of the command palette (Ctrl+Shift+P):
You can start typing in the input field of the Command Palette and you’ll receive a list of matching commands instantly.
Configuration of Visual Studio Code can be done in two different scopes:
- User These settings apply globally to any instance of VS Code you open
- Workspace These settings are stored inside your workspace in a .vscode folder and only apply when the workspace is opened. Settings defined on this scope override the user scope.
You can use the Command Palette to open user or workspace settings. Just type in Preferences: Open User Settings or Preferences: Open Workspace Settings and hit enter. The following view opens:
On the left side you can see all default settings of Visual Studio Code. You can copy and paste the default settings to the right side to override a settings with a new value:
Changes to settings are activated automatically after the settings.json file on the right side is saved.
Visual Studio Code contains an integrated terminal, so that you can execute terminal commands from within the application. The terminal is available in the Panels area. You can create multiple terminal instances, as you can see in the following:
Extensions are an easy way to extend the out-of-the-box functionality of Visual Studio Code. You can browse and install VS Code extensions from the Extensions view in the Side Bar. To open that view just click on the Extension Icon in the Activity Bar on the left. The following view will open:
In the extensions view you can search for extensions. The list of results is presented in the Side Bar area. You can select an extension from the list and the extensions’s details page is presented on the right side:
I disabled the menu bar in preferences and it disappeared as expected. Now there's no way to get to the preferences menu again. How do I get it back?
15 Answers 15
For Windows users:
For newer versions see the following steps or if Alt does not work use Crtl + Shift + P for command pallete, type 'menu' and select View: Toggle Menu Bar
Alternativily open settings Ctrl+, , search for and change Window: Menu Bar Visibility to either classic or visible .
For macOS users:
If you are in Full-Screen mode you can either move the cursor to the top of the screen to see the menu, or you can exit Full-Screen using Ctrl+Cmd+F , or ⌃⌘F in alien's script.
In Visual Studio Code 1.41 (2019-12), at least on Linux (Debian), it is in menu View, but in submenu Appearance (3rd item), under a different name, Show Menu Bar (4th item).
@PeterMortensen It is the same under 1.41.1 Windows as well. I attempted to edit the answer with the most current solution but it was arbitrarily rejected.
@JiechaoWang there is no really an option for that on mac. If you are in Full-Screen nome you can either move the cursor to the top of the screen to see the menu, or you can exit Full-Screen using ctrl+cmd+F (or ⌃⌘F in alien speak). Let me know if it helped?
Another way to restore the menu bar is to trigger the View: Toggle Menu Bar command in the command palette ( F1 ).
Didn't hit F11, alt was involved. Was more than just full screen; normal layout completely erased, code window shrunk into center. But F11 reverted.
It's also possible that you have accidentally put the IDE into Full Screen Mode . On occasion, you may be inadertently pressing F11 to set FullScreen mode to On.
If this is the case, the Accepted Answer above will not work. Instead, you must disable Full Screen mode (View > Appearance > Full Screen).
Please see the attached screenshot.
To restore menu bar visibility so that you don't press key Alt to make the menu bar visible and the menu bar remains visible all the time, see the setting below.
You inadvertently changed the value from "default" to "toggle", so restore the setting to "default" as shown below.
From Version: 1.56.2 on in OSX you need to update in settings.json file
You have two options.
Option 1
Make the menu bar temporarily visible.
- press Alt key and you will be able to see the menu bar
Option 2
Make the menu bar permanently visible.
- Press F1
- Type user settings
- Press Enter
- Click on the (top right corner of the window) to open settings.json file see the screenshot
- Then in the settings.json file, change the value to the default "window.menuBarVisibility": "default"you can see a sample here (or remove this line from JSON file. If you remove any value from the settings.json file then it will use the default settings for those entries. So if you want to make everything to default settings then remove all entries in the settings.json file).
Pressing the Alt key in Windows no longer displays the menu bar. Use Ctrl+Shift+p typing Menu and selecting View: Menu Bar Toggle instead
In version 1.36.1 I tried to follow the steps mentioned in the previous answers and noticed that the Toggle Menu Bar has moved to a different location and has been renamed to Show Menu Bar. Follow these steps:
- Press Alt to make menu visible
- Click on the View menu, navigate to the Appearance option and choose Show Menu Bar
Press Ctrl + Shift + P to open the Command Palette.
After that, you write menu
Option is enabled
An "enter image description here" link to an answer is not recommended as it constitutes poor formatting.
The last part, starting with "After that" could be clearer (seems somewhat incomprehensible). Can you fix it (by editing your answer)?
Press Ctrl + Shift + P to open the Command Palette, then write command : Toggle Menu Bar
Updated Application Menu Settings
The window.menuBarVisibility setting for the application menu visibility has been updated to better reflect the options. Two primary changes have been made.
First, the default option for the setting has been renamed to classic .
Second, the Show Menu Bar entry in the the application menu bar now toggles between the classic and compact options. To hide it completely, you can update the setting, or use the context menu of the Activity Bar when in compact mode.
По сути, Visual Studio Code является редактором кода. Как и многие другие редакторы кода, VS Code использует общий пользовательский интерфейс и макет проводника слева, показывая все файлы и папки, к которым у вас есть доступ, и редактор справа, показывающий содержимое файлов, которые вы открыли.
VS Code основан на файлах и папках - вы можете сразу начать работу, открыв файл или папку в VS Code.
VS Code поставляется с простой и интуитивно понятной компоновкой, которая максимизирует пространство, предоставляемое редактору, оставляя достаточно места для просмотра и доступа к полному контексту вашей папки или проекта. Пользовательский интерфейс разделен на пять областей:
- Редактор - основная область для редактирования ваших файлов. Вы можете открыть до трех редакторов рядом друг с другом.
- Side Bar - Содержит различные виды, такие как проводник, чтобы помочь вам при работе над вашим проектом.
- Строка состояния - информация об открытом проекте и файлах, которые вы редактируете.
- Панель активности - Расположенная на крайнем левом углу, это позволяет переключаться между представлениями и дает дополнительные индикаторы контекста, такие как количество исходящих изменений при включении Git.
- Панели - Вы можете отображать различные панели под областью редактора для вывода или отладки информации, ошибок и предупреждений или встроенного терминала.
Каждый раз, когда вы запускаете VS Code, он открывается в том же состоянии, в котором он находился, когда вы последний раз закрыли его. Папка, макет и открытые файлы сохраняются.
Открытые файлы в каждом редакторе отображаются с вкладками заголовков (вкладки) в верхней части области редактора. Чтобы узнать больше о заголовках с вкладками, см. Раздел Вкладки ниже.
Совет: Вы можете переместить боковую панель в правую сторону (В ид > Переместить боковую панель справа ) или переключить ее видимость ( Ctrl + B ).
У вас может быть до трех рабочих областей, открытых бок о бок. Если у вас уже открыта одна рабочая область, существует несколько способов открытия другой области в стороне от существующей:
Каждый раз, когда вы открываете другой файл, активная область отображает содержимое этого файла. Поэтому, если у вас есть два области рядом друг с другом, и вы хотите открыть файл foo.cs в редакторе справа, убедитесь, что область активна (щелкнув внутри нее) перед открытием файла 'foo.cs'.
Когда у вас открыто несколько областей, вы можете быстро переключаться между ними, удерживая клавишу Ctrl (Mac: Cmd ) и нажав 1 , 2 или 3 .
Совет: Вы можете изменить размеры областей и переупорядочить их. Перетащите область заголовка редактора, чтобы изменить размер области.
Мини-карта (общий вид) дает вам краткий обзор исходного кода, который очень полезен для быстрой навигации и понимания кода. Мини-карта файла показана в правой части редактора. Вы можете щелкнуть или задрапировать заштрихованную область, чтобы быстро перейти к различным разделам вашего файла.
Если вы хотите отключить мини-карту, вы можете установить "editor.minimap.enabled": false в настройках пользователя или рабочей области.
На изображении выше также показаны направляющие отступа (вертикальные линии), которые помогут вам быстро увидеть соответствующие уровни отступа. Если вы хотите отключить направляющие отступа, вы можете установить "editor.renderIndentGuides": false в настройках вашего пользователя или рабочей области.
Проводник используется для просмотра, открытия и управления всеми файлами и папками в вашем проекте.
После открытия папки в VS Code содержимое папки отображается в Проводнике. Вы можете сделать много вещей отсюда:
- Создавайте, удаляйте и переименовывайте файлы и папки.
- Перемещайте файлы и папки с помощью перетаскивания.
- Используйте контекстное меню, чтобы изучить все параметры.
Совет: Вы можете перетаскивать файлы в проводник из внешнего VS Code, чтобы скопировать их.
VS Code очень хорошо работает с другими инструментами, которые вы можете использовать, особенно с инструментами командной строки. Если вы хотите запустить средство командной строки в контексте папки, которую вы сейчас открыли в VS Code, щелкните правой кнопкой мыши папку и выберите Открыть в командной строке (или Открыть в терминале на Mac или Linux»).
Вы также можете перейти к местоположению файла или папки в основном проводнике, щелкнув правой кнопкой мыши на файле или папке и выбрав Показать в проводнике (или Показать в Finder на Mac или Открыть содержащую папку в Linux).
Совет: Нажмите Ctrl + P ( Quick Open ), чтобы быстро найти и открыть файл по его названию.
По умолчанию VS Code исключает некоторые папки из проводника (например .git ). Используйте параметр files.exclude , чтобы настроить правила для скрытия файлов и папок из проводника.
Совет: Это действительно полезно, чтобы скрыть файлы производных ресурсов, такие как \ *.Meta в Unity или \ *. Js в проекте TypeScript. Для Unity, чтобы исключить файлы \ *. Cs.meta , шаблон для выбора будет: "** / *. Cs.meta": true . Для TypeScript вы можете исключить сгенерированный JavaScript для файлов TypeScript с помощью: "** / *. Js": .
В верхней части Проводника находится раздел с надписью Открытые редакторы . Это список активных файлов или предварительный просмотр. Это файлы, которые вы ранее открывали в VS Code, над которым вы работаете. Например, файл будет указан в разделе ОТКРЫТЫЕ РЕДАКТОРЫ , если вы:
- Внесли изменения в файл.
- Дважды щелкнули заголовок файла.
- Дважды щелкните файл в проводнике.
- Открыли файл, который не является частью текущей папки.
Просто нажмите элемент в разделе ОТКРЫТЫЕ РЕДАКТОРЫ , и он станет активным в VS Code.
Как только вы закончите свою задачу, вы можете удалить файлы отдельно из раздела ОТКРЫТЫЕ РЕДАКТОРЫ , или вы можете удалить все файлы с помощью Вид: Закрыть все редакторы или Вид: закрыть всех редакторов в действиях группы .
Проводник файлов - это только один из видов, доступных в VS Code. Есть также:
- Поиск - Обеспечивает глобальный поиск и замену в открытой папке.
- Source Control - VS Code включает в себя управление версиями Git по умолчанию.
- Отладка - просмотр отладки VS Code отображает переменные, стеки вызовов и точки останова.
- Расширения - Устанавливайте и управляйте своими расширениями в VS Code.
VS Code одинаково доступен с клавиатуры. Наиболее важная комбинация клавиш - Ctrl + Shift + P , которая вызывает командную палитру. Отсюда вы получаете доступ ко всем функциям VS Code, включая сочетания клавиш для наиболее часто используемых операций.
Палитра команд обеспечивает доступ ко многим командам. Вы можете выполнять команды редактора, открывать файлы, искать символы и просматривать быстрый контур файла, используя одно и то же интерактивное окно. Вот несколько советов:
- Ctrl + P позволит вам перейти к любому файлу или символу, набрав его имя
- Ctrl + Shift + Tab проведет вас через последний набор открываемых файлов
- Ctrl + Shift + P приведет вас непосредственно к командам редактора
- Ctrl + Shift + O позволит вам перейти к определенному символу в файле
- Ctrl + G позволит вам перейти к определенной строке в файле
Введите ? в поле ввода, чтобы получить список доступных команд, которые вы можете выполнить здесь:
VS Code дает вам много возможностей для настройки редактора. В меню Вид вы можете скрыть или переключить различные части пользовательского интерфейса, такие как боковая панель , строка состояния и панель активности .
Вы можете скрыть панель меню в Windows и Linux с помощью команды Вид > Переключить панель меню Вы все равно можете получить доступ к строке меню, нажав клавишу Alt (настройка window.menuBarVisibility )
Большинство конфигураций редактора хранятся в настройках, которые могут быть изменены напрямую. Вы можете устанавливать параметры по всему миру с помощью пользовательских настроек или для каждого проекта / папки через настройки рабочей области. Значения настроек хранятся в файле settings.json .
- Выберите Файл > Настройки > Настройки (или нажмите Ctrl + Shift + P , введите user и нажмите Enter ), чтобы отредактировать файл user settings.json .
- Чтобы изменить параметры рабочей области, выберите Файл > Установки > Настройки и выберите вкладку НАСТРОЙКИ WORKSPACE (или нажмите Ctrl + Shift + P , введите worksp и нажмите Enter ), чтобы отредактировать файл настроек рабочего пространства.
Примечание: для пользователей Mac: меню Настройки находится в разделе Код , не файл . Например, Код> Настройки> Настройки .
Вы увидите настройки по умолчанию VS Code в левом окне и ваши редактируемые настройки settings.json справа. Вы можете легко фильтровать настройки в настройках по умолчанию, используя окно поиска вверху. Скопируйте настройку на редактируемый settings.json справа, щелкнув значок редактирования слева от настройки. Настройки с фиксированными заданными значениями позволяют вам выбрать значение как часть своего меню значков редактирования.
После редактирования ваших настроек введите Ctrl + S , чтобы сохранить изменения. Изменения вступят в силу немедленно.
Примечание: Параметры рабочей области переопределяют пользовательские настройки и полезны для совместного использования конкретных параметров проекта в команде.
Дзэн режим позволяет вам сфокусироваться на вашем коде, скрывая все пользовательские интерфейсы, кроме редактора (без панели действий, строки состояния, боковой панели) и перехода в полноэкранный режим. Дзэн режим можно переключать с помощью меню Вид , Палитра команд или сочетанием клавиш Ctrl + K Z . Двойное нажатие Esc выходит из дзэн режима. Переход в полноэкранный режим можно отключить с помощью zenMode.fullScreen . Дзэн режим можно дополнительно настроить следующими настройками: zenMode.hideStatusBar , zenMode.hideTabs , zenMode.fullScreen и zenMode.restore .
Visual Studio Code показывает открытые позиции с вкладками (заголовками с вкладками) в области заголовка над редактором.
Когда вы открываете файл, для этого файла добавляется новая вкладка.
Вкладки позволяют быстро перемещаться между элементами, и вы можете перетаскивать вкладки, чтобы переупорядочить их.
Когда у вас есть больше открытых элементов, чем может поместиться в области заголовка, вы можете использовать команду Показать открытые редакторы (доступную через кнопку еще . ), чтобы отобразить раскрывающееся меню с вкладками.
Если вы не хотите использовать вкладки, вы можете отключить эту функцию, установив для параметра workbench.editor.showTabs значение false:
См. Раздел ниже, чтобы оптимизировать VS Code при работе без вкладок.
По умолчанию новые вкладки добавляются справа от существующих вкладок, но вы можете контролировать, где вы хотите, чтобы новые вкладки отображались с настройкой workbench.editor.openPosition .
Например, вам можете показать открытие новых элементов с вкладками слева:
Когда вы щелкаете или выбираете файл в Проводнике, он отображается в режиме предварительного просмотра и повторно использует существующую вкладку. Это полезно, если вы быстро просматриваете файлы и не хотите, чтобы каждый просматриваемый файл имел свою собственную вкладку. Когда вы начнете редактировать файл или дважды щелкните его, чтобы открыть файл из проводника, для этого файла будет выделена новая вкладка.
Режим предварительного просмотра обозначается курсивом в заголовке вкладки:
Если вы предпочитаете не использовать режим предварительного просмотра и всегда создавать новую вкладку, вы можете управлять поведением с помощью этих настроек:
- Workbench.editor.enablePreview для глобального включения или отключения редакторов предварительного просмотра
- Workbench.editor.enablePreviewFromQuickOpen для включения или отключения редакторов предварительного просмотра при открытии из Quick Open
Когда вы разделяете редактор (используя команды Разделить редактор или Открыть в новой области ), создается новая область редактора, которая может содержать группу элементов. VS Code позволяет использовать до трех областей, которые обозначены как LEFT , CENTER и RIGHT .
Вы можете увидеть их в разделе ОТКРЫТЫЕ РЕДАКТОРЫ в верхней части окна проводника:
Вы можете перетаскивать области, перемещать отдельные вкладки между группами и быстро закрывать целые группы ( Закрыть все ).
Примечание: VS Code использует области независимо от того, включены ли вкладки. Без вкладок области представляют собой стек ваших открытых элементов с самым последним выбранным элементом, видимым в области редактора.
По умолчанию области размещаются в трех вертикальных столбцах. Если вы предпочитаете, вы можете изменить макет на три горизонтальные строки с областями, обозначенными как TOP , CENTER и BOTTOM .
Вы можете переключать компоновку группы редакторов между вертикальной и горизонтальной плоскостями:
- Вид > Переключить структуру группы редакторов .
- Вид: Переключить структуру группы редакторов / Компановку в палитре команд ( Ctrl + Shift + P )
- Кнопка переключения на панели инструментов Открыть редакторы
- Сочетание клавиш: Shift + Alt + 1
Вот несколько удобных сочетаний клавиш, чтобы быстро перемещаться между редакторами и областями.
Если вы хотите изменить стандартные сочетания клавиш, см. Раздел Сочетания клавиш.
- Ctrl + PageDown перейдите в правый редактор.
- Ctrl + PageUp перейдите в левый редактор.
- Ctrl + Tab откройте следующий редактор в списке групп редактора MRU.
- Ctrl + Shift + Tab открыть предыдущий редактор в списке групп редактора MRU.
- Ctrl + 1 перейдите в самую левую редакционную группу.
- Ctrl + 2 перейдите в группу центра редактирования.
- Ctrl + 3 перейдите в правую редакционную группу.
- Ctrl + K Ctrl + Left перейти к предыдущей группе редакторов.
- Ctrl + K Ctrl + Right переход к следующей группе редакторов.
- Ctrl + F4 закрыть активный редактор.
- Ctrl + K W закрыть все редакторы в группе редакторов.
- Ctrl + K Ctrl + W закрыть все редакторы.
Если вы предпочитаете не использовать вкладки (заголовки с вкладками), вы можете полностью отключить вкладки (заголовки с вкладками), установив для параметра workbench.editor.showTabs значение false.
Без вкладок раздел ОТКРЫТЫХ РЕДАКТОР File Explorer - это быстрый способ навигации по файлам. В режиме предварительного просмотра файлы не добавляются в список ОТКРЫТОГО РЕДАКТОРА или группу редакторов при открытии одного щелчка. Вы можете отключить эту функцию с помощью параметров workbench.editor.enablePreview и workbench.editor.enablePreviewFromQuickOpen .
Вы можете изменить привязки клавиш для Ctrl + Tab , чтобы показать список всех открытых редакторов из истории, не зависящих от активной группы редакторов.
Отредактируйте свои сочетания клавиш и добавьте следующее:
Если вам понравилось поведение VS Code, закрывающего целую группу при закрытии одного редактора, вы можете настроить следующее в своих горячих клавишах.
В VS Code есть некоторые опции для контроля того, как окна (экземпляры) должны быть открыты или восстановлены между сеансами.
Настройки window.openFoldersInNewWindow и window.openFilesInNewWindow предоставляются для настройки открытия новых окон или повторного использования последнего активного окна для файлов или папок, а возможные значения - default , on и off .
Если настроено на default , мы сделаем все возможное, чтобы повторно использовать окно или нет на основе контекста, из которого был сделан открытый запрос. Измените это, чтобы включить или выключить, чтобы всегда работало одинаково. Например, если вы считаете, что выбор файла или папки из меню Файл всегда должен открываться в новом окне, установите его в положение on .
Примечание: Могут быть случаи, когда этот параметр игнорируется (например, при использовании опции командной строки -new-window или -reuse-window ).
Параметр window.restoreWindows сообщает VS Code, как восстановить открытые окна предыдущего сеанса. По умолчанию VS Code снова откроет последнее открытое окно, в котором вы работали (настройка: one ). Измените этот параметр на none , чтобы никогда не открывать окна и никогда не начинать с пустого экземпляра VS Code. Измените на all чтобы восстановить все окна, над которыми вы работали во время предыдущего сеанса или на folders , только для восстановления окон, в которых были открыты папки.
Теперь, когда вы знаете общую схему VS Code, начните настраивать редактор так, как вам нравится работать, глядя на следующие темы:
-
- укажите тему и / или значка файла в соответствии с вашими предпочтениями.
В: Как изменить цвет направляющих отступа?
О: Цвета направляющих отступа настраиваются, как и большинство элементов интерфейса VS Code. Чтобы настроить цвет направляющих отступа для активной цветной темы, используйте параметр workbench.colorCustomizations и измените значение editorIndentGuide.background .
Например, чтобы сделать направляющие отступа яркими, добавьте следующие настройки в ваш settings.json :
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 больше не будет для вас проблемой, а активные проекты ждет успех. Удачи!
Сочетания клавиш позволяют получать доступ к различным командам и окнам Visual Studio. В этом разделе перечислены сочетания клавиш по умолчанию для команд в профиле обычных параметров, который мог быть выбран при установке Visual Studio. Независимо от выбранного профиля сочетание клавиш для той или иной команды можно определить, открыв диалоговое окно Параметры, развернув узел Среда и выбрав элемент Клавиатура. Кроме того, сочетания клавиш можно настраивать, назначая командам другие сочетания клавиш.
Список распространенных сочетаний клавиш и другие сведения о средствах повышения производительности см. в следующих статьях:
Памятка по быстрым клавишам для печати
Популярные сочетания клавиш в Visual Studio
Все сочетания клавиш в этом разделе применяются глобально, если не указано иное. Глобальный контекст означает, что сочетание применяется в любом окне инструментов в Visual Studio.
Сочетание клавиш для той или иной команды можно определить, открыв диалоговое окно Параметры, развернув узел Среда и выбрав элемент Клавиатура.
Сборка: популярные сочетания клавиш
Отладка: популярные сочетания клавиш
Команды | Сочетания клавиш [специальные контексты] | Идентификатор команды |
---|---|---|
Прерывание на функции | CTRL+B | Debug.BreakatFunction |
Приостановить все | CTRL+ALT+BREAK | Debug.BreakAll |
Удаление всех точек останова | CTRL+SHIFT+F9 | Debug.DeleteAllBreakpoints |
Исключения | CTRL+ALT+E | Debug.Exceptions |
Быстрая проверка | CTRL+ALT+Q |
Редактирование: популярные сочетания клавиш
Команды | Сочетания клавиш [специальные контексты] | Идентификатор команды |
---|---|---|
Разрыв строки | ВВОД [текстовый редактор, конструктор отчетов, конструктор Windows Forms] |
или CTRL+ПРОБЕЛ [текстовый редактор, конструктор рабочих процессов]
или CTRL+K, W [конструктор рабочих процессов]
или SHIFT+DELETE [схема последовательностей, схема действий UML, схема слоев]
или CTRL+K, CTRL+L [конструктор рабочих процессов]
или CTRL+K, CTRL+P [конструктор рабочих процессов]
или SHIFT + ALT + BACKSPACE
Файл: популярные сочетания клавиш
Команды | Сочетания клавиш [специальные контексты] | Идентификатор команды |
---|---|---|
Выход | ALT+F4 | File.Exit |
Создание файла | CTRL+N | File.NewFile |
Новый проект | CTRL+SHIFT+N | File.NewProject |
Новый веб-сайт | SHIFT+ALT+N | File.NewWebSite |
Открывает файл | CTRL+O | File.OpenFile |
Открытие проекта | CTRL+SHIFT+O | File.OpenProject |
Открыть веб-сайт | Shift+Alt+O | File.OpenWebSite |
Переименовать | F2 [Team Explorer] | File.Rename |
Сохранить все | CTRL+SHIFT+S | File.SaveAll |
Сохранить выбранные элементы | CTRL+S | File.SaveSelectedItems |
Просмотр в браузере | CTRL+SHIFT+W | File.ViewinBrowser |
Проект: популярные сочетания клавиш
Команды | Сочетания клавиш [специальные контексты] | Идентификатор команды |
---|---|---|
Добавить существующий элемент | SHIFT+ALT+A | Project.AddExistingItem |
Добавление нового элемента | CTRL+SHIFT+A | Project.AddNewItem |
Рефакторинг: популярные сочетания клавиш
Команда | Сочетание клавиш [специальные контексты] | Идентификатор команды |
---|---|---|
Извлечение метода | CTRL+R, CTRL+M | Refactor.ExtractMethod |
Средства: популярные сочетания клавиш
Команда | Сочетание клавиш [специальные контексты] | Идентификатор команды |
---|---|---|
Присоединение к процессу | CTRL+ALT+P | Tools.AttachtoProcess |
Представление: популярные сочетания клавиш
Команды | Сочетания клавиш [специальные контексты] | Идентификатор команды |
---|---|---|
Окно классов | CTRL+SHIFT+C | View.ClassView |
Изменить метку | F2 | View.EditLabel |
Список ошибок | CTRL+\, CTRL+E |
Окно: популярные сочетания клавиш
Команды | Сочетания клавиш [специальные контексты] | Идентификатор команды |
---|---|---|
Активировать окно документа | ESC | Window.ActivateDocumentWindow |
Закрыть окно документа | CTRL+F4 | Window.CloseDocumentWindow |
Следующее окно документа | CTRL+F6 | Window.NextDocumentWindow |
Следующая панель навигации окна документа | CTRL+TAB | Window.NextDocumentWindowNav |
Следующая область разделения | F6 | Window.NextSplitPane |
Глобальные сочетания клавиш
Следующие сочетания клавиш являются глобальными. Это означает, что их можно использовать в любом окне Visual Studio, которое находится в фокусе.
Анализ: глобальные сочетания клавиш
Команды | Сочетания клавиш | Идентификатор команды |
---|---|---|
Перейти назад | SHIFT+ALT+3 | Analyze.NavigateBackward |
Перейти вперед | SHIFT+ALT+4 | Analyze.NavigateForward |
Архитектура: глобальные сочетания клавиш
Команды | Сочетания клавиш | Идентификатор команды |
---|---|---|
Создать схему | CTRL+\, CTRL+N | Architecture.NewDiagram |
Команды | Сочетания клавиш | Идентификатор команды |
---|---|---|
Повторить операцию скрипта мобильной службы | CTRL+NUM *, CTRL+R | WindowsAzure.RetryMobileServiceScriptOperation |
Показать сведения об ошибке скрипта мобильной службы | CTRL+NUM *, CTRL+D | WindowsAzure.ShowMobileServiceScriptErrorDetails |
Сборка: глобальные сочетания клавиш
Контекстные меню представления классов: глобальные сочетания клавиш
Команды | Сочетания клавиш | Идентификатор команды |
---|---|---|
Свойства | ALT+ВВОД | ClassViewContextMenus.ClassViewMultiselectProjectreferencesItems.Properties |
Отладка: глобальные сочетания клавиш
Контекстные меню отладчика: глобальные сочетания клавиш
Команды | Сочетания клавиш | Идентификатор команды |
---|---|---|
Удалить | ALT+F9, D | DebuggerContextMenus.BreakpointsWindow.Delete |
Перейти к дизассемблированию | ALT+F9, A | DebuggerContextMenus.BreakpointsWindow.GoToDisassembly |
Перейти к исходному коду | ALT+F9, S | DebuggerContextMenus.BreakpointsWindow.GoToSourceCode |
Центр диагностики: глобальные сочетания клавиш
Команда | Сочетание клавиш | Идентификатор команды |
---|---|---|
Остановка сбора | CTRL+ALT+F2 | DiagnosticsHub.StopCollection |
Редактирование: глобальные сочетания клавиш
Команды | Сочетания клавиш | Идентификатор команды |
---|---|---|
Копировать | CTRL+C |
CTRL+SHIFT+Z
Контекстные меню редактора: глобальные сочетания клавиш
Команды | Сочетания клавиш | Идентификатор команды |
---|---|---|
Условия точки останова | ALT+F9, C | EditorContextMenus.CodeWindow.Breakpoint.BreakpointConditions |
Метки изменения точки останова | ALT+F9, L | EditorContextMenus.CodeWindow.Breakpoint.BreakpointEditlabels |
Вставка временной точки останова | SHIFT+ALT+F9, T | EditorContextMenus.CodeWindow.Breakpoint.InsertTemporaryBreakpoint |
Показать элемент | CTRL+` | EditorContextMenus.CodeWindow.CodeMap.ShowItem |
Execute | CTRL+ALT+F5 | EditorContextMenus.CodeWindow.Execute |
Перейти к представлению | CTRL+M, CTRL+G | EditorContextMenus.CodeWindow.GoToView |
Переключить файл заголовков кода | CTRL+K, CTRL+O (латинская буква O) | EditorContextMenus.CodeWindow.ToggleHeaderCodeFile |
Просмотр иерархии вызовов | CTRL+K, CTRL+T |
Файл: глобальные сочетания клавиш
Команды | Сочетания клавиш | Идентификатор команды |
---|---|---|
Выход | ALT+F4 | File.Exit |
Создание файла | CTRL+N | File.NewFile |
Новый проект | CTRL+SHIFT+N | File.NewProject |
Новый веб-сайт | SHIFT+ALT+N | File.NewWebSite |
Открывает файл | CTRL+O (латинская буква O) | File.OpenFile |
Открытие проекта | CTRL+SHIFT+O (латинская буква O) | File.OpenProject |
Открыть веб-сайт | SHIFT+ALT+O (латинская буква O) | File.OpenWebSite |
Печать | CTRL+P | File.Print |
Сохранить все | CTRL+SHIFT+S | File.SaveAll |
Сохранить выбранные элементы | CTRL+S | File.SaveSelectedItems |
Просмотр в браузере | CTRL+SHIFT+W | File.ViewinBrowser |
Справка: глобальные сочетания клавиш
Команды | Сочетания клавиш | Идентификатор команды |
---|---|---|
Добавить и удалить содержимое справки | CTRL+ALT+F1 | Help.AddandRemoveHelpContent |
Справка F1 | F1 | Help.F1Help |
Посмотреть справку | CTRL+F1 | Help.ViewHelp |
Справка окна | SHIFT+F1 | Help.WindowHelp |
Нагрузочный тест: глобальные сочетания клавиш
Команда | Сочетание клавиш | Идентификатор команды |
---|---|---|
Перейти в область счетчиков | CTRL+R, Q | LoadTest.JumpToCounterPane |
Другие контекстные меню: глобальные сочетания клавиш
Команда | Сочетание клавиш | Идентификатор команды |
---|---|---|
Добавить новую диаграмму | Вставить | OtherContextMenus.MicrosoftDataEntityDesignContext.AddNewDiagram |
Проект: глобальные сочетания клавиш
Команды | Сочетания клавиш | Идентификатор команды |
---|---|---|
Добавить существующий элемент | SHIFT+ALT+A | Project.AddExistingItem |
Добавление нового элемента | CTRL+SHIFT+A | Project.AddNewItem |
Мастер классов | CTRL+SHIFT+X | Project.ClassWizard |
Переопределение | CTRL+ALT+INS | Project.Override |
Предварительный просмотр изменений | ALT+; затем ALT+C | Project.Previewchanges |
Опубликовать выбранные файлы | ALT+; затем ALT+P | Project.Publishselectedfiles |
Заменить выбранные файлы с сервера | ALT+; затем ALT+R | Project.Replaceselectedfilesfromserver |
Контекстные меню проекта и решения: глобальные сочетания клавиш
Команды | Сочетания клавиш | Идентификатор команды |
---|---|---|
Переместить вниз | ALT+СТРЕЛКА ВНИЗ | ProjectandSolutionContextMenus.Item.MoveDown |
Переместить вверх | ALT+СТРЕЛКА ВВЕРХ | ProjectandSolutionContextMenus.Item.MoveUp |
Рефакторинг: глобальные сочетания клавиш
Команды | Сочетания клавиш | Идентификатор команды |
---|---|---|
Инкапсуляция поля | CTRL+R, CTRL+E | Refactor.EncapsulateField |
Извлечение интерфейса | CTRL+R, CTRL+I | Refactor.ExtractInterface |
Извлечение метода | CTRL+R, CTRL+M | Refactor.ExtractMethod |
Удалить параметры | CTRL+R, CTRL+V | Refactor.RemoveParameters |
Переименовать | CTRL+R, CTRL+R | Refactor.Rename |
Упорядочить параметры | CTRL+R, CTRL+O (латинская буква O) | Refactor.ReorderParameters |
Обозреватель решений: глобальные сочетания клавиш
Команды | Сочетания клавиш | Идентификатор команды |
---|---|---|
Открыть фильтр файлов | CTRL+[ , O (латинская буква O) |
Команда: глобальные сочетания клавиш
Команды | Сочетания клавиш | Идентификатор команды |
---|---|---|
Перейти к веткам Git | CTRL+0 (ноль), CTRL+N |
Контекстные меню Team Foundation: глобальные сочетания клавиш
Команды | Сочетания клавиш | Идентификатор команды |
---|---|---|
Перейти к сборкам | CTRL+0 (ноль), CTRL+B |
Тестирование: глобальные сочетания клавиш
Обозреватель тестов: глобальные сочетания клавиш
Средства: глобальные сочетания клавиш
Команды | Сочетания клавиш | Идентификатор команды |
---|---|---|
Присоединение к процессу | CTRL+ALT+P | Tools.AttachtoProcess |
Диспетчер фрагментов кода | CTRL+K, CTRL+B | Tools.CodeSnippetsManager |
Принудительная сборка мусора | CTRL+SHIFT+ALT+F12, CTRL+SHIFT+ALT+F12 | Tools.ForceGC |
Представление: глобальные сочетания клавиш
Окно: глобальные сочетания клавиш
Команды | Сочетания клавиш | Идентификатор команды |
---|---|---|
Активировать окно документа | ESC | Window.ActivateDocumentWindow |
Добавить вкладку в выделенный фрагмент | CTRL+SHIFT+ALT+ПРОБЕЛ | Window.AddTabtoSelection |
Закрыть окно документа | CTRL+F4 | Window.CloseDocumentWindow |
Закрыть окно инструментов | SHIFT+ESC | Window.CloseToolWindow |
Не закрывать вкладку | CTRL+ALT+HOME | Window.KeepTabOpen |
Перейти к панели навигации | CTRL+F2 | Window.MovetoNavigationBar |
Следующее окно документа | CTRL+F6 | Window.NextDocumentWindow |
Следующая панель навигации окна документа | CTRL+TAB | Window.NextDocumentWindowNav |
Следующая область | ALT+F6 | Window.NextPane |
Следующая область разделения | F6 | Window.NextSplitPane |
Следующая вкладка | CTRL+ALT+PGDN |
Сочетания клавиш, зависящие от контекста
Эти сочетания клавиш зависят от контекста. Это означает, что вы можете использовать их с меню и элементами в Visual Studio, которые относятся к типу проекта, языку программирования или платформе.
Читайте также: