Как включить подсказки в visual studio code
Подсказки данных предоставляют удобный способ просмотра сведений о переменных в программе во время отладки. Подсказки данных работают только в режиме прерывания и только с переменными, которые находятся в пределах текущей области выполнения. Если вы не знакомы с процессом отладки кода, перед выполнением задач в этой статье рекомендуется прочесть документ об отладке для начинающих и статью Методы и инструменты отладки.
Работа с подсказками по данным
Подсказки по данным появляются только в режиме прерывания и только с переменными, которые находятся в пределах текущей области выполнения.
Отображение подсказки по данным
Установите точку останова в коде и начните отладку, нажав клавишу F5 или выбрав команду Отладка > Начать отладку.
При приостановке в точке останова наведите указатель мыши на любую переменную в текущей области. Появится подсказка по данным с именем и текущим значением переменной.
Прозрачная подсказка по данным
Чтобы сделать подсказку по данным прозрачной для просмотра находящегося за ней кода, нажмите клавишу CTRL, когда подсказка отображается. Подсказка будет прозрачной, пока удерживается клавиша CTRL. Это не работает для закрепленных или плавающих подсказок.
Закрепление подсказки по данным
Чтобы закрепить подсказку по данным, оставив ее открытой, щелкните значок канцелярской кнопки Прикрепить к источнику.
Закрепленную подсказку можно перемещать, перетаскивая ее в окне кода. Значок канцелярской кнопки отображается во внутреннем поле рядом со строкой, к которой прикреплена подсказка.
Подсказки по данным всегда вычисляются в контексте того места, где приостановлено выполнение, а не в контексте текущего местоположения курсора или местоположения подсказки. Если в другой функции навести указатель на переменную, имеющую такое же имя, что и переменная в текущем контексте, отобразится значение переменной в текущем контексте.
Открепление подсказки по данным от исходного кода
Чтобы сделать закрепленную подсказку по данным плавающей, наведите на нее указатель мыши и выберите значок канцелярской кнопки в контекстном меню.
Значок канцелярской кнопки примет открепленную форму, и подсказка станет плавающей, или ее можно помещать над всеми открытыми окнами. Плавающие подсказки по данным закрываются при завершении сеанса отладки.
Повторное закрепление подсказки по данным
Чтобы повторно закрепить плавающую подсказку по данным, наведите на нее указатель мыши в редакторе кода и щелкните значок канцелярской кнопки. Значок канцелярской кнопки примет прикрепленную форму, и подсказка снова станет закрепленной в окне кода.
Если плавающая подсказка находится не над окном исходного кода, значок канцелярской кнопки недоступен и подсказку нельзя закрепить повторно. Чтобы значок канцелярской кнопки стал доступен, верните подсказку в окно редактора кода, перетащив ее или переместив фокус на окно кода.
Закрытие подсказки по данным
Чтобы закрыть подсказку по данным, наведите на нее указатель мыши и выберите значок закрытия (x) в контекстном меню.
Закрытие всех подсказок по данным
Чтобы закрыть все подсказки по данным, в меню Отладка выберите команду Очистить все подсказки по данным.
Закрытие всех подсказок по данным для определенного файла
Чтобы закрыть все подсказки по данным для определенного файла, в меню Отладка выберите команду Удалить все подсказки по данным, прикрепленные к .
Развертывание и изменение сведений
Подсказки данных позволяют развернуть массив, структуру или объект для просмотра его элементов. Можно также изменить значение переменной из Подсказки Данных.
Развертывание переменной
Чтобы развернуть объект в подсказке по данным для просмотра его элементов, наведите указатель мыши на стрелки развертывания перед именами элементов. Элементы отобразятся в виде дерева. Для закрепленной подсказки по данным выберите + перед именем переменной, а затем разверните дерево.
Для перемещения вверх и вниз по развернутому представлению можно использовать мышь или клавиши со стрелками.
Можно также закреплять развернутые элементы в закрепленной подсказке по данным, наводя на них указатель мыши и выбирая значок канцелярской кнопки. После свертывания дерева элементы будут отображаться в закрепленной подсказке.
Изменение значения переменной
Чтобы изменить значение переменной или элемента в подсказке по данным, выберите значение, введите новое значение и нажмите клавишу ВВОД. Значения, предназначенные только для чтения, недоступны для выбора.
Закрепление свойств в подсказках по данным
С помощью средства Закрепляемые свойства можно быстро проверять объекты на основе их свойств в подсказках по данным. Чтобы воспользоваться этим средством, наведите указатель мыши на свойство и выберите значок булавки либо щелкните правой кнопкой мыши и в контекстном меню выберите пункт Закрепить элемент в избранном. Свойство будет размещено в верхней части списка свойств объекта, а имя и значение свойства будут отображаться в правом столбце подсказки по данным. Чтобы открепить свойство, щелкните значок булавки еще раз или в контекстном меню выберите пункт Открепить элемент в избранном.
При просмотре списка свойств объекта в подсказке по данным можно также включать и отключать отображение имен свойств и отфильтровывать незакрепленные свойства. Чтобы получить доступ к любой из этих команд, щелкните правой кнопкой мыши строку со свойством и выберите в контекстном меню команду Показать только закрепленные элементы или Скрыть имена закрепленных элементов в значениях.
Визуализация сложных типов данных
Значок лупы рядом с переменной или элементом в подсказке по данным означает, что для переменной доступен один или несколько визуализаторов, таких как средство визуализации текста. Визуализаторы выводят сведения в более наглядной, иногда графической, форме.
Чтобы просмотреть элемент с использованием визуализатора по умолчанию для этого типа данных, щелкните значок лупы . Щелкните стрелку рядом со значком лупы, чтобы выбрать вариант из списка визуализаторов для типа данных.
Добавление переменной в окно контрольных значений
Чтобы продолжить наблюдение за переменной, ее можно добавить в окно Контрольные значения из подсказки по данным. Щелкните переменную правой кнопкой мыши в подсказке по данным и выберите пункт Добавить контрольное значение.
Переменная появится в окне Контрольные значения. Если в используемом выпуске Visual Studio поддерживается несколько окон Контрольные значения, переменная появится в окне Контрольные значения 1.
Импорт и экспорт подсказок по данным
Подсказки по данным можно экспортировать в XML-файл, который можно использовать совместно или редактировать с помощью текстового редактора. Вы также можете импортировать XML-файл с подсказками, который вы получили или отредактировали.
Экспорт подсказок данных:
Выберите команду Отладка > Экспорт подсказок по данным.
В диалоговом окне Экспорт подсказок по данным перейдите к месту, где нужно сохранить XML-файл, введите им файла и нажмите кнопку Сохранить.
Импорт подсказок данных:
Выберите команду Отладка > Импорт подсказок по данным.
В диалоговом окне Импорт подсказок по данным выберите XML-файл с подсказками, который нужно открыть, и нажмите кнопку Открыть.
Редактор кода Visual Studio Code является одним из самых популярных решений для верстальщика. Он бесплатный, простой в освоении, легко настраивается, а также имеет огромное количество плагинов и возможностей для оптимизации рабочего процесса. Ускорить верстку в VS Code можно как с помощью сторонних плагинов, так и встроенных инструментов в сам редактор.
Какие есть фишки в Visual Studio Code для ускорения производительности
В отличии от многих ранее популярных решений для верстки, да и вообще написания кода, VS Code идет уже с некоторыми встроенными решениями, которые позволяют повысить продуктивность написания кода. Также вы можете установить сторонние плагины, которые тоже предназначены для автоматизации задач. Все они представлены во встроенном каталоге и распространяются на полностью бесплатной основе.
Некоторые решения для ускорения работы уже встроены в сам VS Code - вам нужно только их использовать, а другие можно получить благодаря установке дополнительных плагинов, что делается буквально в два клика.
Emmet
Главный инструмент любого верстальщика. В Visual Studio Code Emmet в самой базовой версии уже установлен по умолчанию. Его суть в том, что он позволяет записывать большие HTML-конструкции в виде формулы или набора сокращений и потом раскрывать их. Например, чтобы сделать базовую развертку шаблона под HTML-страницу достаточно прописать знак “!” без кавычек и нажать клавишу Enter.
Развертка базовой структуры HTML-документа
Все доступные сокращения и формулы можно изучить в документации к Emmet или на специализированных форумах. Не забывайте, что их можно комбинировать между собой, делать вложения и так далее. Если базового функционала Emmet, встроенного в Visual Studio будет недостаточно, то можно расширить его, установив отдельные Emmet-дополнения для решения более узкоспециализированного круга задач.
Совсем начинающему верстальщику, который ранее не сталкивался с Emmet рекомендуется посмотреть, как работают с ним коллеги. Если такой возможности нет, то можно открыть любой туториал по верстке на YouTube. Там ведущие очень часто прибегают к использованию Emmet. Запомнив основные сокращения и формулы можно очень быстро оптимизировать свой рабочий процесс верстки.
Использовать сниппеты
Этот совет подходит не только верстальщикам, но и вообще всем программистам. Сниппеты - это заранее сохраненный кусок кода, который часто используется при работе. В отличии от Emmet, где ко всем сокращениям и формулам записаны свои значения, в случае со сниппетами разработчик задает их самостоятельно. Туда можно записывать целые конструкции, которые часто применяются в работе, но при этом только в конкретном проекте. Удобство еще и в том, что сниппетам можно задавать собственные обозначения, постоянно их расширять. Последнее позволяет работать еще более продуктивнее над большими проектами в сложившейся команде разработчиков.
Использование сниппетов также позволяет лучше продумать структуру, так с помощью заранее заготовленных блоков кода не стоит особого труда ее быстро набросать. Если что-то не так, то можно быстро удалить некорректный кусок кода и вставить подходящий из имеющихся сниппетов. Если же все более-менее корректно, то разработчику не составит труда доработать шаблонную конструкцию.
Также частое использование сниппетов поможет разработчику быстрее изучить ту или иную библиотеку или фреймворк. Дело в том, что используя уже готовые конструкции проще понимать логику работы, а также вероятность допустить ошибку меньше. Однако это актуально для заранее записанных сниппетов, которые можно загрузить из каталога расширений или каких-то других проектов.
Разработчик может как самостоятельно создавать собственные сниппеты, так и использовать чужие - своих коллег по проекту, общие сниппеты для рабочей команды, просто скачать необходимые из каталога. Во встроенном каталоге VS Code имеются сниппеты для всех основных языков программирования и разметки. Некоторые могут включать в себя несколько сотен тысяч готовых конструкций и шаблонных решений.
Сторонние HTML-сниппеты в разделе с плагинами для VS Code
IntelliSense
Еще один встроенный в VS Code инструмент, который позиционируется как интеллектуальный способ автоматического заканчивания кода. При написании кода инструмент дает автоматические подсказки для завершения того или иного участка, что позволяет немного ускорить процесс написания. Однако в случае с версткой “ускорение” будет небольшим, так как в процессе работы не требуется использовать каких-либо сложных команд или ключевых слов.
Полезность инструмента IntelliSense для разработчика заключается в другом - возможность посмотреть пояснения к тому или иному элемента кода. Если навести мышь на некий участок кода, IntelliSense покажет дополнительные сведения о типах и даст возможность добраться до сведений об источнике их описания. Это бывает полезно как в процессе обучения, так и при работе в команде, когда из-за разного стиля написания кода разными людьми могут возникать недопонимания.
Всплывающие подсказки инструмента IntelliSense
Система также способна “предсказывать” некоторые действия разработчика, но это будет полезно преимущественно бэк и фулл-стак разработчикам. Во время ввода названия объекта, команды, ключевого слова и так далее появляется выпадающее окошко с подсказками. Когда код дописывается подсказки становятся более релевантными. Выбрать их можно в появляющемся контекстном меню с помощью клавиш со стрелками и клавиши Enter. Также стоит отметить, что система обучается на основе того, какие вы выбираете подсказки в выпадающих списках.
Данный инструмент в первую очередь будет полезен при написании JavaScript-кода, PHP, Python, которые тоже используются в процессе верстки, правда, в бэкенд-разработке.
Использовать интегрированный терминал
Тоже пригодится больше для бэкенда или организационного процесса, например, связи с директориями на GitHub. Терминал, интегрированный в среду разработки Visual Studio Code ничем не уступает стандартному Терминалу в Linux, Mac OS или Командной строке в Windows. Он экономит в первую очередь время тем, что вам не нужно переключаться между окно редактора и терминала для отладки определенных процессов.
Интегрированный терминал VS Code
По умолчанию раздел со встроенным терминалом VS Code расположен в нижней части окна. Вы можете при необходимости настроить его расположение в редакторе. Быстро включить встроенный терминал можно с помощью сочетаний клавиш Ctrl+`. Терминал откроется для корневой папки проекта, над которым в данный момент ведется работа. Если требуется открыть несколько окон терминала, то воспользуйтесь сочетанием клавиш Ctrl+Shift+`. Таким образом можно будет открыть несколько окон встроенного терминала для работы. Они будут в собственных вкладках.
Быстрый поиск объектов и классов
Работая над большим проектом разработчик может присвоить один и тот же класс в нескольких местах одновременно. Функционал VS Code позволяет отобразить все эти места, а также выполнить автоматическую замену обнаруженных элементов. Чтобы получить нужную информацию по интересующему элементу в документе, разработчику достаточно просто кликнуть по нему правой кнопкой мыши. Также можно выделить нужный участок кода и воспользоваться сочетанием клавиш Shift+F12.
Работа с элементами в VS Code
Клавиатурные сокращения
Верстальщику и программисту желательно как можно реже убирать руки от клавиатуры во время работы, дабы не терять время зря. Чтобы как можно это делать, нужно запомнить клавиатурные сокращения для работы в программе. Однако начинающему разработчику может быть трудно это все их запомнить. Для быстрого обращения ко встроенной в VS Code “шпаргалки” нужно воспользоваться сочетанием клавиш Ctrl+K+S.
Список клавиатурных сочетаний в VS Code
В окошке по умолчанию представлены все популярные сочетания клавиш. Их можно искать по категориям или через поисковую строку в верхней части окна. Однако пользователь может выделить специально для себя группы горячих клавиш, к которым регулярно обращается.
Взаимодействие с Git-репозиториями
Еще в Visual Studio Code встроена возможность взаимодействия с Git-репозиториями. Это можно делать как в графическом режиме, так и через встроенный терминал. В специальном разделе можно готовить к коммитам изменённые файлы, делать коммиты, откатывать изменения, делать комментарии. Благодаря тому, что все действия с репозиториями можно проводить прямо внутри редактора экономится много времени, так как не требуется отдельно открывать окно терминала, а тем более веб-интерфейс GitHub.
Полезные плагины для ускорения работы в Visual Studio Code
Там несколько тысяч разных плагинов и дополнений, но далеко не все из них будут полезны верстальщику. Для начала можно вполне обойтись парой штук из основного списка.
CSS Peek
Полезный плагин для работы с CSS-стилями, а также классами и идентификаторами в HTML-разметке. С его помощью можно отслеживать изменения таблиц стилей нужного класса или идентификатора. Для этого просто достаточно кликнуть правой кнопкой мыши на селектор в HTML-файле и воспользоваться функцией “Перейти к определению” или “Подсмотреть определение”.
Color Info
По умолчанию цвета, написанные HEX, RGB(a)-кодировкой, никак не подсвечиваются в редакторе кода. Это неудобно в процессе задания стилей, так как даже опытный разработчик не всегда может определить по коду цвет. Color Info - это небольшой плагин, который показывает больше информации о выбранном цвете, а также позволяет получить “перевод” этого цвета в другие кодировки, например, из RGB в HEX.
SVG Viewer
В верстке все чаще используются SVG-изображения, например, для установки иконок и других векторных обозначений в документе. По умолчанию SVG-картинка в редакторе кода выглядит как просто набор параметров, что усложняет ее правильную идентификацию, особенно, когда таких изображений в документе много. С помощью SVG Viewer картинки можно просматривать прямо в документе, а также редактировать их, конвертировать их в PNG и создавать data URL схемы.
Faker
Плагин будет полезен в тех случаях, когда в верстке требуется указать случайные данные: адреса, имена, номера телефона и так далее. Он основан на JavaScript и имеет полностью открытый исходный код, что позволяет быстро настроить данное решение под свои потребности. Помимо генерации фейковых персональных данный плагин также умеет вставлять в верстку случайные изображения, текст-рыбу и даже отрывки из литературных произведений. Все это ускоряет работу над “сырым” макетом, когда адекватное наполнение от заказчика еще не было получено.
Live Server
Плагин открывает результат верстки в браузере и обновляет ее в режиме реального времени в ходе внесения в документ правок. Это позволяет сэкономить время на открытии проекта в браузере вручную и постоянном обновлении страниц для отображения результата.
Image preview
Плагин показывает превью вставленных изображений. По умолчанию картинки видны только в виде специального тега и адреса их расположения на компьютере/сервере. Показ превью картинок позволяет сэкономить время, так как разработчик точно знает, в каком участке кода вставлена какая картинка.
Path Intellisense
Значительно упрощает процесс написания пути в коде до какого-то файла или картинки. При установке специального тега, подразумевающего вставку файла, дает автоматические подсказки, где можно быстро выбрать нужное расположение, а не прописывать его вручную.
Заключение
Visual Studio Code сам по себе уже оснащен всем необходимым для продуктивной работы верстальщика, благодаря чему тратиться минимум времени на настройку и отладку рабочего пространства. Некоторые недостающие моменты можно добавить с помощью плагинов прямо из встроенной библиотеки. Все это делается в два клика, что позволяет максимально быстро приступить к работе. Рассмотренные инструменты рекомендуется применять в работе все вместе для достижения максимальной продуктивности.
IntelliSense is a general term for various code editing features including: code completion, parameter info, quick info, and member lists. IntelliSense features are sometimes called by other names such as "code completion", "content assist", and "code hinting."
IntelliSense for your programming language
Visual Studio Code IntelliSense is provided for JavaScript, TypeScript, JSON, HTML, CSS, SCSS, and Less out of the box. VS Code supports word based completions for any programming language but can also be configured to have richer IntelliSense by installing a language extension.
Below are the most popular language extensions in the Marketplace. Select an extension tile below to read the description and reviews to decide which extension is best for you.
IntelliSense features
VS Code IntelliSense features are powered by a language service. A language service provides intelligent code completions based on language semantics and an analysis of your source code. If a language service knows possible completions, the IntelliSense suggestions will pop up as you type. If you continue typing characters, the list of members (variables, methods, etc.) is filtered to only include members containing your typed characters. Pressing Tab or Enter will insert the selected member.
You can trigger IntelliSense in any editor window by typing ⌃Space (Windows, Linux Ctrl+Space ) or by typing a trigger character (such as the dot character ( . ) in JavaScript).
Tip: The suggestions widget supports CamelCase filtering, meaning you can type the letters which are upper cased in a method name to limit the suggestions. For example, "cra" will quickly bring up "createApplication".
If you prefer, you can turn off IntelliSense while you type. See Customizing IntelliSense below to learn how to disable or customize VS Code's IntelliSense features.
As provided by the language service, you can see quick info for each method by either pressing ⌃Space (Windows, Linux Ctrl+Space ) or clicking the info icon. The accompanying documentation for the method will now expand to the side. The expanded documentation will stay so and will update as you navigate the list. You can close this by pressing ⌃Space (Windows, Linux Ctrl+Space ) again or by clicking on the close icon.
After choosing a method you are provided with parameter info.
When applicable, a language service will surface the underlying types in the quick info and method signatures. In the image above, you can see several any types. Because JavaScript is dynamic and doesn't need or enforce types, any suggests that the variable can be of any type.
Types of completions
The JavaScript code below illustrates IntelliSense completions. IntelliSense gives both inferred proposals and the global identifiers of the project. The inferred symbols are presented first, followed by the global identifiers (shown by the Word icon).
VS Code IntelliSense offers different types of completions, including language server suggestions, snippets, and simple word based textual completions.
Methods and Functions | method , function , constructor |
Variables | variable |
Fields | field |
Type parameters | typeParameter |
Constants | constant |
Classes | class |
Interfaces | interface |
Structures | struct |
Events | event |
Operators | operator |
Modules | module |
Properties and Attributes | property |
Values and Enumerations | value , enum |
References | reference |
Keywords | keyword |
Files | file |
Folders | folder |
Colors | color |
Unit | unit |
Snippet prefixes | snippet |
Words | text |
Customizing IntelliSense
You can customize your IntelliSense experience in settings and key bindings.
Settings
The settings shown below are the default settings. You can change these settings in your settings.json file as described in User and Workspace Settings.
Tab Completion
The editor supports "tab completion" which inserts the best matching completion when pressing Tab . This works regardless of the suggest widget showing or not. Also, pressing Tab after inserting a suggestions will insert the next best suggestion.
By default, tab completion is disabled. Use the editor.tabCompletion setting to enable it. These values exist:
- off - (default) Tab completion is disabled.
- on - Tab completion is enabled for all suggestions and repeated invocations insert the next best suggestion.
- onlySnippets - Tab completion only inserts static snippets which prefix match the current line prefix.
Locality Bonus
Sorting of suggestions depends on extension information and on how well they match the current word you are typing. In addition, you can ask the editor to boost suggestions that appear closer to the cursor position, using the editor.suggest.localityBonus setting.
In above images you can see that count , context , and colocated are sorted based on the scopes in which they appear (loop, function, file).
Suggestion selection
By default, VS Code pre-selects the previously used suggestion in the suggestion list. This is very useful as you can quickly insert the same completion multiple times. If you'd like different behavior, for example, always select the top item in the suggestion list, you can use the editor.suggestSelection setting.
- first - (default) Always select the top list item.
- recentlyUsed - The previously used item is selected unless a prefix (type to select) selects a different item.
- recentlyUsedByPrefix - Select items based on previous prefixes that have completed those suggestions.
"Type to select" means that the current prefix (roughly the text left of the cursor) is used to filter and sort suggestions. When this happens and when its result differs from the result of recentlyUsed it will be given precedence.
When using the last option, recentlyUsedByPrefix , VS Code remembers which item was selected for a specific prefix (partial text). For example, if you typed co and then selected console , the next time you typed co , the suggestion console would be pre-selected. This lets you quickly map various prefixes to different suggestions, for example co -> console and con -> const .
Snippets in suggestions
By default, VS Code shows snippets and completion proposals in one widget. You can control the behavior with the editor.snippetSuggestions setting. To remove snippets from the suggestions widget, set the value to "none" . If you'd like to see snippets, you can specify the order relative to suggestions; at the top ( "top" ), at the bottom ( "bottom" ), or inline ordered alphabetically ( "inline" ). The default is "inline" .
Key bindings
The key bindings shown below are the default key bindings. You can change these in your keybindings.json file as described in Key Bindings.
Note: There are many more key bindings relating to IntelliSense. Open the Default Keyboard Shortcuts (File > Preferences > Keyboard Shortcuts) and search for "suggest".
Troubleshooting
If you find IntelliSense has stopped working, the language service may not be running. Try restarting VS Code and this should solve the issue. If you are still missing IntelliSense features after installing a language extension, open an issue in the repository of the language extension.
Tip: For configuring and troubleshooting JavaScript IntelliSense, see the JavaScript documentation.
A particular language extension may not support all the VS Code IntelliSense features. Review the extension's README to find out what is supported. If you think there are issues with a language extension, you can usually find the issue repository for an extension through the VS Code Marketplace. Navigate to the extension's Details page and select the Support link.
Next steps
-
- Get the most out of your JavaScript development, including configuring IntelliSense. - See an example of IntelliSense in action in the Node.js walkthrough. - Learn how to set up debugging for your application. - Learn how to create extensions that add IntelliSense for new programming languages.
Common questions
Why am I not getting any suggestions?
This can be caused by a variety of reasons. First, try restarting VS Code. If the problem persists, consult the language extension's documentation. For JavaScript specific troubleshooting, please see the JavaScript language topic.
Why am I not seeing method and variable suggestions?
This issue is caused by missing type declaration (typings) files in JavaScript. You can check if a type declaration file package is available for a specific library by using the TypeSearch site. There is more information about this issue in the JavaScript language topic. For other languages, please consult the extension's documentation.
Visual Studio Code has a high productivity code editor which, when combined with programming language services, gives you the power of an IDE and the speed of a text editor. In this topic, we'll first describe VS Code's language intelligence features (suggestions, parameter hints, smart code navigation) and then show the power of the core text editor.
Quick file navigation
Tip: You can open any file by its name when you type ⌘P (Windows, Linux Ctrl+P ) (Quick Open).
The Explorer is great for navigating between files when you are exploring a project. However, when you are working on a task, you will find yourself quickly jumping between the same set of files. VS Code provides two powerful commands to navigate in and across files with easy-to-use key bindings.
Hold Ctrl and press Tab to view a list of all files open in an editor group. To open one of these files, use Tab again to pick the file you want to navigate to, then release Ctrl to open it.
Alternatively, you can use ⌃- (Windows Alt+Left , Linux Ctrl+Alt+- ) and ⌃⇧- (Windows Alt+Right , Linux Ctrl+Shift+- ) to navigate between files and edit locations. If you are jumping around between different lines of the same file, these shortcuts allow you to navigate between those locations easily.
Breadcrumbs
The editor has a navigation bar above its contents called Breadcrumbs. It shows the current location and allows you to quickly navigate between folders, files, and symbols.
Breadcrumbs always show the file path and, with the help of language extensions, the symbol path up to the cursor position. The symbols shown are the same as in Outline view and Go to Symbol.
Selecting a breadcrumb in the path displays a dropdown with that level's siblings so you can quickly navigate to other folders and files.
If the current file type has language support for symbols, you will see the current symbol path and a dropdown of other symbols at the same level and below.
You can turn off breadcrumbs with the View > Show Breadcrumbs toggle or with the breadcrumbs.enabled setting.
Breadcrumb customization
The appearance of breadcrumbs can be customized. If you have very long paths or are only interested in either file paths or symbols paths, you can use the breadcrumbs.filePath and breadcrumbs.symbolPath settings. Both support on , off , and last and they define if or what part of the path you see. By default, breadcrumbs show file and symbol icons to the left of the breadcrumb but you can remove the icons by setting breadcrumbs.icons to false.
Symbol order in Breadcrumbs
You can control how symbols are ordered in the Breadcrumbs dropdown with the breadcrumbs.symbolSortOrder settings.
- position - position in the file (default)
- name - alphabetical order
- type - symbol type order
Breadcrumb keyboard navigation
To interact with breadcrumbs, use the Focus Breadcrumbs command or press ⇧⌘. (Windows, Linux Ctrl+Shift+. ) . It will select that last element and open a dropdown that allows you to navigate to a sibling file or symbol. Use the ← (Windows, Linux Left ) and → (Windows, Linux Right ) keyboard shortcuts to go to elements before or after the current element. When the dropdown appears, start typing - all matching elements will be highlighted and the best match will be selected for quick navigation.
You can also interact with breadcrumbs without the dropdown. Press ⇧⌘; (Windows, Linux Ctrl+Shift+; ) to focus the last element, use ← (Windows, Linux Left ) and → (Windows, Linux Right ) to navigate, and use Space to reveal the element in the editor.
Go to Definition
If a language supports it, you can go to the definition of a symbol by pressing F12 .
If you press Ctrl and hover over a symbol, a preview of the declaration will appear:
Tip: You can jump to the definition with Ctrl+Click or open the definition to the side with Ctrl+Alt+Click .
Go to Type Definition
Some languages also support jumping to the type definition of a symbol by running the Go to Type Definition command from either the editor context menu or the Command Palette. This will take you to the definition of the type of a symbol. The command editor.action.goToTypeDefinition is not bound to a keyboard shortcut by default but you can add your own custom keybinding.
Go to Implementation
Languages can also support jumping to the implementation of a symbol by pressing ⌘F12 (Windows, Linux Ctrl+F12 ) . For an interface, this shows all the implementors of that interface and for abstract methods, this shows all concrete implementations of that method.
Go to Symbol
You can navigate symbols inside a file with ⇧⌘O (Windows, Linux Ctrl+Shift+O ) . By typing : the symbols will be grouped by category. Press Up or Down and navigate to the place you want.
Open symbol by name
Some languages support jumping to a symbol across files with ⌘T (Windows, Linux Ctrl+T ) . Type the first letter of a type you want to navigate to, regardless of which file contains it, and press Enter .
We think there's nothing worse than a big context switch when all you want is to quickly check something. That's why we support peeked editors. When you execute a Go to References search (via ⇧F12 (Windows, Linux Shift+F12 ) ), or a Peek Definition (via ⌥F12 (Windows Alt+F12 , Linux Ctrl+Shift+F10 ) ), we embed the result inline:
You can navigate between different references in the peeked editor and make quick edits right there. Clicking on the peeked editor filename or double-clicking in the result list will open the reference in the outer editor.
Tip: Additionally, the peek window is closed if you press Escape or double-click in the peek editor region. You can disable this behavior with the editor.stablePeek setting.
Bracket matching
Matching brackets will be highlighted as soon as the cursor is near one of them.
Tip: You can jump to the matching bracket with ⇧⌘\ (Windows, Linux Ctrl+Shift+\ )
Bracket Pair Colorization
Matching bracket pairs can also be colorized by setting editor.bracketPairColorization.enabled to true .
All colors are themeable and up to six colors can be configured.
You can use workbench.colorCustomizations to override these theme-contributed colors in your settings:
Reference information
Tip: Directly invoke the Peek References action by clicking on these annotations.
Tip: Reference information shown in CodeLens can be turned on or off through the editor.codeLens setting.
Rename symbol
Some languages support rename symbol across files. Press F2 and then type the new desired name and press Enter . All usages of the symbol will be renamed, across files.
Errors & warnings
Warnings or Errors can be generated either via configured tasks, by rich language services, or by linters, that constantly analyze your code in the background. Since we love bug-free code, warnings and errors show up in multiple places:
- In the Status Bar, there is a summary of all errors and warnings counts.
- You can click on the summary or press ⇧⌘M (Windows, Linux Ctrl+Shift+M ) to display the PROBLEMS panel with a list of all current errors.
- If you open a file that has errors or warnings, they will be rendered inline with the text and in the overview ruler.
Tip: To loop through errors or warnings in the current file, you can press F8 or ⇧F8 (Windows, Linux Shift+F8 ) which will show an inline zone detailing the problem and possible Code Actions (if available):
Code Action
Warnings and Errors can provide Code Actions (also known as Quick Fixes) to help fix issues. These will be displayed in the editor in the left margin as a lightbulb. Clicking on the lightbulb will either display the Code Action options or perform the action.
Inlay Hints
Some languages provide inlay hints: that is additional information about source code that is rendered inline. This is usually used to show infered types. The sample below shows inlay hints that display the inferred types of JavaScript variables and function return types.
Inlay hints can be enabled/disabled with the editor.inlayHints.enabled -setting, the default is enabled. Extensions, like TypeScript or Rust, are needed to provide the actual inlay hint information.
Outgoing link protection
For your protection, VS Code displays a prompt before opening an outgoing website link from the editor.
You can proceed to the external website in your browser or have the options to copy the link or cancel the request. If you choose Configure Trusted Domains, a dropdown lets you trust the exact URL, trust the URL domain and subdomains, or trust all domains to disable outgoing link protection.
The option to Manage Trusted Domains, also available at any time from the Command Palette, brings up the Trusted Domains JSON file, where you can add, remove, or modify trusted domains.
Next steps
Now that you know how the editor works, time to try a few other things.
-
- Watch an introductory video on code editing features. - In case you missed a basic orientation around VS Code. - Learn how to modify key bindings to your preference. - This is where VS Code really shines.
Common questions
How can I automatically select the second entry in Quick Open instead of the first?
With the command workbench.action.quickOpenPreviousEditor , you can have the second entry automatically selected in Quick Open. This can be useful if you want to select the previous entry from the list without having to invoke another keybinding:
How can I configure Ctrl+Tab to navigate across all editors of all groups
By default, Ctrl+Tab navigates between editors of the same editor group. If you want to navigate across all opened editors in all groups, you can create keyboard shortcuts for the workbench.action.quickOpenPreviousRecentlyUsedEditor and workbench.action.quickOpenLeastRecentlyUsedEditor commands:
How can I navigate between recently used editors without a picker
Here is a list of commands you can use to navigate in editors without opening a picker:
Краткие сведения — это функция IntelliSense, которая отображает сигнатуры и описания методов, когда пользователь наводит указатель мыши на имя метода. Вы можете реализовать такие функции на основе языка, как краткие сведения, определив идентификаторы, для которых необходимо предоставить описания краткие сведения, а затем создав подсказку, в которой будет отображаться содержимое. Можно определить краткие сведения в контексте языковой службы или определить собственное расширение имени файла и тип содержимого и отобразить краткие сведения только для этого типа. Кроме того, можно отобразить краткие сведения для существующего типа содержимого (например, "Text"). В этом пошаговом руководстве показано, как отобразить краткие сведения для типа содержимого text.
Пример краткие сведения в этом пошаговом руководстве отображает подсказки, когда пользователь наводит указатель мыши на имя метода. Эта схема требует реализации следующих четырех интерфейсов:
исходный интерфейс поставщика
интерфейс поставщика контроллера
поставщики источников и контроллеров Managed Extensibility Framework (MEF). они отвечают за экспорт классов источников и контроллеров, а также импорт служб и брокеров ITextBufferFactoryService , например,, который создает текстовый буфер подсказки, и IQuickInfoBroker , который запускает сеанс краткие сведения.
В этом примере источник краткие сведения использует жестко закодированный список имен и описаний методов, но в полной реализации языковая служба и документация по языку отвечают за предоставление этого содержимого.
Необходимые компоненты
начиная с Visual Studio 2015 вам не нужно устанавливать пакет SDK для Visual Studio из центра загрузки. он входит в состав Visual Studio установки в качестве дополнительного компонента. Пакет SDK для VS можно установить и позже. дополнительные сведения см. в статье установка пакета SDK для Visual Studio.
Создание проекта MEF
Создание проекта MEF
Добавьте шаблон элемента классификатора редактора в проект. Дополнительные сведения: Создание расширения с помощью шаблона элемента редактора.
Удалите файлы существующих классов.
Реализация источника краткие сведения
Источник краткие сведения отвечает за сбор набора идентификаторов и их описаний, а также добавление содержимого в текстовый буфер подсказки при обнаружении одного из идентификаторов. В этом примере идентификаторы и их описания просто добавляются в конструктор исходного кода.
Реализация источника краткие сведения
Добавьте файл класса с именем TestQuickInfoSource .
Добавьте ссылку на Microsoft. VisualStudio. Language. IntelliSense.
Добавьте приведенные ниже импортированные данные.
Объявите класс, реализующий IQuickInfoSource , и назовите его TestQuickInfoSource .
Добавьте поля для поставщика источника краткие сведения, текстового буфера и набора имен методов и сигнатур методов. В этом примере имена и подписи методов инициализируются в TestQuickInfoSource конструкторе.
Добавьте конструктор, который задает поставщик источника краткие сведения и текстовый буфер, и заполняет набор имен методов, а также сигнатуры и описания методов.
Выполните метод AugmentQuickInfoSession. В этом примере метод находит текущее слово или предыдущее слово, если курсор находится в конце строки или в текстовом буфере. Если слово является одним из имен методов, описание этого имени метода добавляется в содержимое краткие сведения.
Также необходимо реализовать метод Dispose (), поскольку IQuickInfoSource реализуется IDisposable :
Реализация поставщика источника краткие сведения
Поставщик источника краткие сведения служит главным образом для экспорта самого себя в качестве части компонента MEF и создания экземпляра источника краткие сведения. Поскольку это часть компонента MEF, она может импортировать другие компоненты MEF.
Реализация поставщика источника краткие сведения
Объявите поставщик источника краткие сведения с именем TestQuickInfoSourceProvider , реализующий IQuickInfoSourceProvider , и экспортируйте его с помощью NameAttribute элемента "ToolTip краткие сведения Source", объекта OrderAttribute Before = "default" и ContentTypeAttribute объекта "Text".
Импортируйте две службы редактора, ITextStructureNavigatorSelectorService и ITextBufferFactoryService , как свойства TestQuickInfoSourceProvider .
Реализуйте TryCreateQuickInfoSource , чтобы вернуть новый объект TestQuickInfoSource .
Реализация контроллера краткие сведения
Контроллеры краткие сведения определяют, когда отображается краткие сведения. В этом примере краткие сведения появляется, когда указатель наведен на слово, соответствующее одному из имен методов. Контроллер краткие сведения реализует обработчик событий наведения указателя мыши, который запускает сеанс краткие сведения.
Реализация контроллера краткие сведения
Объявите класс, реализующий IIntellisenseController , и назовите его TestQuickInfoController .
Добавьте закрытые поля для текстового представления, текстовые буферы, представленные в текстовом представлении, сеанс краткие сведения и поставщик контроллера краткие сведения.
Добавьте конструктор, который задает поля и добавляет обработчик событий наведения указателя мыши.
Добавьте обработчик событий наведения указателя мыши, который запускает сеанс краткие сведения.
Реализуйте Detach метод таким образом, чтобы он удаляет обработчик событий наведения указателя мыши при отсоединении контроллера от текстового представления.
Реализуйте ConnectSubjectBuffer метод и DisconnectSubjectBuffer метод как пустые методы в этом примере.
Реализация поставщика контроллера краткие сведения
Поставщик контроллера краткие сведения в основном служит для экспорта самого себя в составе компонента MEF и создания экземпляра контроллера краткие сведения. Поскольку это часть компонента MEF, она может импортировать другие компоненты MEF.
Реализация поставщика контроллера краткие сведения
Объявите класс с именем TestQuickInfoControllerProvider , реализующий IIntellisenseControllerProvider , и экспортируйте его с помощью элемента NameAttribute "краткие сведения Controller" и ContentTypeAttribute объекта "Text":
Импортируйте IQuickInfoBroker как свойство.
Реализуйте TryCreateIntellisenseController метод, создав экземпляр контроллера краткие сведения.
Сборка и тестирование кода
Чтобы протестировать этот код, создайте решение Куиккинфотест и запустите его в экспериментальном экземпляре.
Создание и тестирование решения Куиккинфотест
при запуске этого проекта в отладчике запускается второй экземпляр Visual Studio.
Создайте текстовый файл и введите текст, содержащий слова "Добавить" и "Subtract".
Наведите указатель мыши на одно из вхождений "Добавить". Должна отобразиться подпись и описание add метода.
Читайте также: