Подсветка ошибок visual studio

Обновлено: 07.01.2025

Программист постоянно работает с исходными кодами. Инструменты для написания кода можно разделить на две группы: среды разработки (IDE) и редакторы. Первые предоставляют большие возможности при разработке программ: отладку, управление пакетами, интеграцию с тестами и тд. Например: Visual Studio, Intellij IDEA, Eclipse. Редакторы – легковесные программы, в которых нет таких широких возможностей как в IDE. Тем не менее они выполняют главную функцию – помогают быстро писать код. А многие из них предоставляют богатые возможности по настройке под себя. Примеры редакторов кода: Sublime Text, Atom, Notepad++.

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

Visual Studio Code – редактор кода от Microsoft. Он бесплатный, и скачать его можно на официальном сайте. VS Code соответствует новой политике Microsoft, поэтому он опенсорсный и работает на нескольких платформах. Рассмотрим отличительные черты этого редактора:

Explorer. На изображении выше открыт этот блок. В нем определяется workspace – файлы, с которыми вы работаете. Имя рабочего пространства соответствует корневой директории. Над ним перечислены все открытые в редакторе файлы. Кружком помечены те, которые не сохранены.
Search. Поиск по workspace. Можно искать с учетом регистра, целых слов и по шаблону. В этом же блоке работает замена строк. Для перехода в режим поиска можно использовать комбинацию CTRL + SHIFT + F . При наведении курсора на любой блок VS Code подскажет какие комбинации клавиш им соответствуют.
Source Control. Встроенная поддержка git и других систем контроля версий.
Debug. Все для отладки: Variables, Call Stack, Watch, Breakpoints.
Extensions. Набор всевозможных плагинов, которые можно установить. Вот список самых популярных:

В VS Code можно настроить очень многое под свои нужды. Меняйте внешний вид редактора и автоматизируйте ваши действия.

Изменение темы

Изменение настроек

Рассмотрим некоторые настройки, которые могут вам пригодиться:

Настройки редактирования.
- Размер шрифта. "editor.fontSize": 14
- Размер таба. "editor.tabSize": 4
- Шрифт. "editor.fontFamily": "Consolas, 'Courier New', monospace"
- Перенос слов. "editor.wordWrap": "on"
Если с первыми тремя настройками все понятно, то последнюю нужно пояснить. Когда она включена, слово, которое не помещается по длине в размер редактора, будет целиком перенесено на следующую строку. При этом горизонтальный скролл никогда не появится. Удобная настройка, которая по умолчанию отключена.
- Автосохранение. "files.autoSave": "on"
- Задержка при автосохранении. "files.autoSaveDelay": 5000
По умолчанию файлы сохраняются только тогда, когда пользователь об этом попросит. Это поведению можно изменить, включив автосохранение файлов. Также можно настроить задержку после ввода перед автосохранением. Величина записывается в миллисекундах.
- Размер шрифта. "terminal.integrated.fontSize": 14
- Выбор терминала. "terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe"
- Тип курсора. "terminal.integrated.cursorStyle": "line"
Все настройки, связанные с терминалом, находятся в разделе Integrated Terminal. Например, вы можете изменить отображение курсора с блока на линию.

Создание задач

Зачем нужны задачи покажу на конкретном примере. Для локального запуска сайта я использую команды:

Для того, чтобы делать это, не выходя из редактора, можно использовать встроенный терминал. Однако, можно автоматизировать и этот процесс. Для этого существуют задачи. Откроем их конфигурацию через Command Palette: Tasks. Configure Tasks . В открывшемся файле tasks.json создадим кастомную задачу.

Однако, это несильно автоматизирует наш процесс. Для запуска этой задачи нужно открывать Command Palette и искать ее среди других команд. Чтобы запускать задачу по кнопке, откроем файл keybindings.json (в Command Palette: Preferences. Open Keyboard Shortcuts File ) и добавим нужные комбинации клавиш.

Также задачи часто используются для автоматизации сборки кода и прогона тестов.

Создание сниппетов

Рассмотрим стандартные команды и соответствующие им комбинации клавиши, которые полезны в самых разных ситуациях. Маппинг команд и сочетаний клавиш можно открыть через CTRL + K, CTRL + S и переопределить на свой вкус.
- Zen Mode ( CTRL + K, Z ). В этом режиме окно с кодом занимает весь экран. Это располагает к максимальной сосредоточенности на этом файле и работе. Он отличается от полноэкранного режима ( F11 ), в котором все пространство занимает именно редактор. В режиме Zen вы не будете отвлекаться ни на что. Для переключения на другой файл используйте комбинацию CTRL + P . Она работает во всех режимах и позволяет искать именно по файлам в рабочем пространстве. Выход из режима Zen осуществляется двойным ESC .
- Markdown Preview ( CTRL + K, V ). Полезная операция для тех, кто пользуется Markdown. Она отображает справа от текста результаты вашей верстки.
- Дублирование строки вниз/вверх ( ALT + SHIFT + DOWN/UP ).
- Перемещение строки вниз/вверх ( ALT + DOWN/UP ).
- Комментирование строки ( CTRL + / ).
Команды выше работают и для нескольких строк.
- Вставка новой строки вверх/вниз ( CTRL + ENTER / CTRL + SHIFT + ENTER ).
- Выделение строки ( CTRL + I ).
- Выделение слова ( CTRL + D ).
- Множественный курсор. ( ALT + CLICK ).
Мне трудно представить свой рабочий процесс без VS Code. Если вы им не пользуетесь, то советую хотя бы попробовать. Сегодня мы посмотрели на малую часть того, как можно упростить работу с кодом с помощью этого редактора. В следующий раз мы рассмотрим некоторые полезные плагины, которые есть в маркете VS Code.

Фронтенд-разработчик, UX/UI-дизайнер Савио Мартин опубликовал в блоге на dev.to 34 расширения Visual Studio Code (VS Code) для повышения продуктивности.

1. Auto Rename Tag. Автоматически переименовывает парный тег «HTML/XML» так же, как Visual Studio IDE.

2. Better Comments. Помогает создавать в коде более понятные комментарии. Расширение позволяет разбивать аннотации на следующие категории:
- Оповещения;
- Запросы;
- TODO-комментарии;
- События.
3. Bootstrap 4, Font Awesome 4, Font Awesome 5 Free & Pro Snippets. Плагин кода Visual Studio, содержащий фрагменты кода Bootstrap 4, Font Awesome 4, Font Awesome 5 Free и Pro Snippets. Плагин работает как в стабильной, так и в инсайдерской сборке.

4. Bracket Pair Colorizer 2. Позволяет идентифицировать совпадающие скобки по цвету. Пользователь может определить, какие токены должны соответствовать и какие цвета использовать.

5. change-case. Позволяет быстро изменить регистр текущего выделенного текста или слова.

6. Code Runner. Запускает фрагмент или файл кода для нескольких языков (полный список доступен здесь ) и пользовательские команды.

7. Code Spell Checker. Цель расширения — проверка распространенных ошибок и уменьшение количества ложных срабатываний. Хорошо работает со стилем написания составных слов CamelCase (верблюжий регистр).

8. CSS Peek. Разрешает просмотр идентификаторов CSS и строк классов как определений из HTML-файлов в соответствующий CSS-файл. Позволяет просматривать и переходить к определению.

9. Debugger for Chrome. Расширение для отладки JavaScript-кода в браузере Google Chrome или других задач, поддерживающих протокол Chrome DevTools Protocol .

10. EJS language support. Подсветка синтаксиса для тегов EJS, JavaScript и HTML. Включает автозаполнение javascript.

11. ES7 React/Redux/GraphQL/React-Native snippets. Расширение для React, Redux и GraphQL в JavaScript/TypeScript с синтаксисом ES7 и функциями плагина Babel для VS Code.

12. GitHub Pull Request and Issue. Позволяет просматривать и управлять запросами на вытягивание GitHub и проблемами в Visual Studio Code.

13. GitLens — Git supercharged. Расширяет возможности Git, встроенные в VS Code. Среди функций:
- Визуализация авторства кода с помощью аннотаций Git;
- Плавное перемещение и исследование репозитория Git;
- Получение необходимой информации с помощью команд сравнения.
14. Google Fonts. Расширение позволяет просматривать список шрифтов Google и вставлять их в HTML или CSS код.

15. Image Preview. Расширение для предварительного просмотр изображений при наведении курсора.

16. GraphQL. Добавляет подсветку синтаксиса, его проверку и языковые функции, такие как:
- Переход к определению;
- Просмотр информации о наведении и автозаполнение для проектов graphql ;
- Работа с запросами, помеченными тегом gql .
17. vscode-styled-components. Подсветка синтаксиса и IntelliSense для стилизованных компонентов . Использует грамматику CSS, построенную на основе language-sass и language-css .

18. Prettify JSON. Расширение Prettify JSON для Visual Studio Code.

19. Import Cost. Позволяет отображать в редакторе размер импортированного пакета. Для этого расширение использует webpack и babili-webpack-plugin .

20. IntelliSense для имен классов CSS в HTML. Обеспечивает завершение имени класса CSS для атрибута HTML class на основе определений, найденных в рабочей области или внешних файлах, на которые ссылается элемент link .

21. JavaScript (ES6) code snippets. Расширение содержит фрагменты кода для JavaScript в синтаксисе ES6 для редактора VS CODE. Поддерживает как JavaScript, так и TypeScript.

22. Live Server. Запускает локальный сервер разработки с функцией перезагрузки в реальном времени для статических и динамических страниц.

23. Live Share. Расширение для совместной разработки, редактирования и отладки в режиме реального времени. Позволяет мгновенно и безопасно делиться проектами. Разработчики, которые подключаются к сеансам, получают необходимые файлы по текущему проекту и могут начать работу без необходимости клонирования репозиториев или SDK.

24. Markdown Preview Enhanced. Расширение для тех, кто знаком с Markdown Preview Plus или RStudio Markdown . Имеет множество полезных функций, среди которых:
- Автосинхронизация скролла;
- Поддержка языка диаграмм PlantUML,
- Экспорт PDF,
- Создание презентация.
25. Mongo Snippets for Node-js. Расширение для проектов Node-js. Содержит:
- Сниппеты для подключения к документоориентированной системе управления базами данных MongoDB и запросов;
- Команду Palette Feature для настройки кода шаблона;
- Предложения по доработке для моделей Mongoose Models.
26. npm. Поддерживает выполнение npm-скриптов, определенных в файле package.json , и проверку установленных модулей на соответствие зависимостям, определенным в package.json .

27. npm Intellisense. Плагин Visual Studio Code, который автоматически заполняет модули nmp в операторах импорта.

28. Placeholder Images. Расширение позволяет создавать и вставлять так называемые изображения-заполнители в HTML-код в VS Code с помощью сторонних сервисов, таких как Unsplash, placehold.it и LoremFlickr.

29. Polacode. Позволяет делать скриншоты кода с пользовательскими шрифтами и темами.

30. Prettier — Code formatter. Средство для форматирования кода. Нацелено на использование жестко заданных правил по оформлению программ. Обеспечивает согласованный стиль, анализируя код и повторно воспроизводя его с особыми правилами, которые принимают во внимание максимальную длину строки.

31. Tabnine Autocomplete. Помощник на основе искусственного интеллекта (ИИ). Помогает кодировать быстрее и уменьшить количество ошибок. Изучает общедоступный код и использует алгоритмы глубокого обучения ИИ.

32. Tailwind CSS IntelliSense. Расширяет возможности разработки Tailwind, предоставляя пользователям VS Code больше функций, например, автозаполнение, выделение синтаксиса и линтинг (процесс проверки исходного кода на программные и стилистические ошибки).

33. Luna Paint. Позволяет редактировать растровые изображения из VS Code.

34. Quokka.js. Инструмент повышения производительности разработчика для быстрого прототипирования JavaScript/TypeScript. Значения времени выполнения обновляются и отображаются в IDE-среде рядом с кодом по мере его ввода.

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

С помощью окна Список ошибок можно выполнять следующие задачи.

Поиск синтаксических ошибок, обнаруженных функцией IntelliSense.

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

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

Поиск конкретных терминов и ограничение поиска только в текущим проектом или документом.

Чтобы открыть окно Список ошибок, выберите Вид > Список ошибок или нажмите сочетание клавиш CTRL+ \ +E.

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

Фильтры списка ошибок

Существует два типа фильтров в двух раскрывающихся списках: один находится справа от панели инструментов, а другой — слева. В раскрывающемся списке слева от панели инструментов указан набор файлов кода (Все решение, Открытые документы, Текущий проект, Текущий документ).

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

В списке справа от панели инструментов указано, следует ли отображать ошибки из сборки (ошибки, возникающие из операции сборки) или из IntelliSense (ошибки, обнаруженные перед запуском сборки) либо и те, и другие.

Поиск

Используйте текстовое поле Поиск в списке ошибок справа от панели инструментов Список ошибок, чтобы найти конкретные ошибки в списке. Поиск можно выполнять на любом отображаемом столбце списка ошибок, и результаты поиска всегда сортируются на основе столбца, имеющего приоритет сортировки, а не на основе примененного запроса или фильтра. Чтобы очистить поисковый запрос и отфильтрованные результаты поиска, нажмите клавишу ESC, выделив область Список ошибок. Можно также щелкнуть X справа от текстового поля, чтобы очистить его.

Сохранить

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

Список элементов пользовательского интерфейса

В настоящее время я пытаюсь написать расширение для нового типа файла (ANTLR) и задаюсь вопросом, как изменить цвета, используемые для выделения синтаксиса в Visual Studio Code. Мне кажется, что это определено не в расширении, а где-то еще. Нет записи в настройках для цветов, и я не нашел файл CSS, который это определяет (чего я ожидал, поскольку vscode использует Electron). Я также просмотрел файл настроек, сгенерированный vscode, и файлы, которые были с ним, но тоже не поняли. Не помог и поиск в Интернете. Итак, я немного потерялся.

Может ли кто-нибудь дать мне несколько советов или указать на соответствующую документацию?

3 ответа

Нет необходимости обновлять тему, из официальной документации:

Чтобы настроить цвета подсветки синтаксиса редактора, используйте editor.tokenColorCustomizations в файле настроек пользователя settings.json.

Помимо простой настройки токенов, вы можете полностью переопределить правила TextMate с помощью немного более сложных настроек, например:

Правила выделения синтаксиса хранятся в файлах .plist (или, альтернативно, в файлах .tmLanguage ). В этих файлах для выделения синтаксиса объявлены разные типы токенов:
- Что такое ключевое слово?
- Что такое строковый литерал?
- Что за комментарий?
- и т.п.
Вы не определяете цвета в файлах .plist !

Связь между типами токенов и цветами устанавливается в объявлениях цветовой темы.

Вы можете рассмотреть возможность использования цветовой темы

Поддержка тем для семантических токенов

Цветовые темы теперь могут записывать правила для цветных семантических токенов, сообщаемых языковыми расширениями, такими как TypeScript.

Приведенное выше правило определяет, что все объявления переменных, доступных только для чтения, в Java должны быть окрашены жадным шрифтом и жирным шрифтом.

Дополнительную информацию см. На странице семантического выделения вики.

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