Visual studio code подсветка ошибок

Обновлено: 07.07.2024

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

Я постоянно читаю статьи о VS Code, и, наверное, прочел уже их все. Но большая часть статей описывает одни и те же прекрасные плагины, вы их знаете: Bracket Pair Colorizer 2 , Prettier , GitLens , Auto Rename Tag , Live Server , Bookmarks …

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

Поэтому я решил создать список моих любимых расширений для VS Code, которые не так известны и популярны, как перечисленные выше. Начнем!

1. Gitignore

Это очень простой маленький плагин . Он просто добавляет опцию Add to .gitignore в меню, когда вы щелкаете на файл правой кнопкой.

2. Highlight Matching Tag (Выделение парных тегов)

Он делает именно то, что указано в названии — Highlight Matching Tag подчеркивает соответствующий выделенному закрывающий или открывающий тег, находится ли он на той же строке или далеко внизу страницы.

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

3. Image Preview (Предварительный просмотр изображений)

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

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

4. Indented Block Highlighting (Подсветка выделенных блоков)

Это моя последняя находка . Я очень люблю это расширение и с трудом могу поверить в то, что оно не особо популярно.

Оно подсвечивает выделенный блок, с которым вы работаете в данный момент. В примере выше полностью подсвечен компонент StartPage.

Когда я нахожусь внутри компонента HandleSubmit, подсвечивается только эта часть:

5. Quokka

Quokka похож на черновик для JavaScript (или TypeScript). Он дает возможность предварительного просмотра вывода кода, будь то ошибка или значение. И это здорово, если вы пробуете новую концепцию или просто хотите поиграть с кодом.

6. Reload

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

7. TabOut

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

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

Кто-нибудь знает проблему и как снова восстановить этот функционал?

Недавно я столкнулся с той же проблемой с VS 2010. И вскоре я заметил это, угадайте что, я установил и удалил Resharper. Это случилось со мной на VS2013 после установки Resharper. Я думаю, что инструменты Visual Studio Power Tools тоже могли оказать влияние.

Обычно я люблю сбрасывать настройки после того, как возился с плагинами, так как они имеют тенденцию портить настройки: Tools → Import and Export Settings. → Reset all settings .

для меня это было слишком очевидно. спасибо, все отлично работает;) Такое же исправление сработало для VS2013 после выполнения вышеуказанного и компиляции. мне приходилось делать это в 2012 и 2013 годах. почему это должно быть выключено по умолчанию !! это было действительно полезно после того, как я удалил Resharper. Мне также нужно было проверить "Показывать живые семантические ошибки" в том же месте

О возможных причинах.

Для VS 2012 и 2013, если у вас есть более одного экземпляра Visual Studio на разных машинах, привязанных к одной «живой» учетной записи, и на одной из них установлен ReSharper, он отключает собственный IntelliSense и подчеркивает ошибки (чтобы заменить его собственными правилами) который будет синхронизирован через вашу учетную запись с другим компьютером без ReSharper.

Это сработало для исправления моих постоянных ошибок подчеркивания и отключения настроек xaml intellisense, очень полезно, спасибо! Чувак . Я только что понял это. Иногда это чертовски жутко.

Обычно это называется Disable Squiggl y или Wavy lines в Visual Studio.

Как у вас дела в Visual Studio 2013?

ИНСТРУМЕНТЫ -> Параметры . -> Текстовый редактор -> C / C ++ -> Дополнительно -> Отключить закорючки : True / False (в IntelliSense) -> Нажмите OK

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

Решение : скопировали всю папку Unity Project (которая в основном похожа на обычную папку VS Solution) и работала с новой папкой, и эта проблема исчезла.

У меня была такая же проблема с 2017 годом. Была опция «отключить интеллект», убедитесь, что для нее установлено значение false.

Для Visual Studio 2017 действуйте согласно комментариям HeeJae в:

Здравствуй. вы, вероятно, столкнулись с известной проблемой. можешь попробовать это?

1. обновите до последней версии, если это не решит проблему

2. Перейдите в Инструменты \ Параметры \ Проекты и решения \ Общие и снимите флажок «Разрешить параллельную инициализацию проекта».

4. Удалите каталог «.vs» рядом с файлом решения.

5. снова открыть VS.

Вы можете повторно включить параметр «Разрешить параллельную инициализацию проекта» после того, как проблема будет решена.

Я пытался обновить VS, сбросить настройки VS, очистить кеш VS и все, что люди делают обычно, но никто из них не решил эту проблему! В конце концов, упомянутое решение сработало для меня волшебным образом.

Выгрузка и повторная загрузка того же проекта из решения делает свое дело. Просто щелкните проект правой кнопкой мыши и выберите «Выгрузить проект». После выгрузки снова щелкните правой кнопкой мыши тот же проект и выберите «Перезагрузить проект». Подсветка ошибки вернется.

Так может выглядеть интерфейс редактора после установки расширений

Основные возможности

отладчик кода
встроенный терминал
удобные инструменты для работы с Git
подсветка синтаксиса для множества популярных языков и файловых форматов
удобная навигация
встроенный предпросмотр Markdown
умное автодополнение
встроенный пакетный менеджер

VS Code имеет большое количество расширений для разработчика. Для установки нового пакета зайдите во вкладку “Extensions”, введите название пакета в строке поиска, нажмите кнопку “Install”.

EditorConfig for VS Code

EditorConfig — это конфигурационный файл и набор расширений к большому количеству редакторов кода. Он подхватывает настройки из файла .editorconfig , который, как правило, размещается в корне проекта. Расширение автоматически настроит отступы и перевод строк единообразно для всех разработчиков, использующих его. PHP код чаще всего выполняется на *nix системах, поэтому необходимо использовать стандарт.

Ниже приводится пример файла .editorconfig , который используется в Laravel:

PHP Intelephense

В редакторе уже есть поддержка синтаксиса и подсказок стандартных функций языка. Но без специального дополнения редактор не будет подсказывать пользовательские функции из других частей проекта. Поэтому для поддержки автодополнения, анализа кода, перехода к месту, где создана функция/класс/переменная (с помощью шортката Alt+Click ), используется дополнение PHP Intelephense

Чтобы подсказки не дублировались необходимо отключить встроенную в редактор поддержку кода для PHP: Extensions -> Search @builtin php -> PHP Language Features -> Disable

PHP Debug

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

Чтобы воспользоваться PHP Debug, необходимо установить сам XDebug, без него расширение для редактора работать не будет. Установив расширение, необходимо добавить конфигурацию для PHP в разделе Debug . После выбора языка в корне проекта будет создан файл .vscode/launch.json с задачами для Дебаггера. Расширение создаст файл со стандартными параметрами.

Для того, чтобы XDebug общался с нашим дебаггером, необходимо добавить настройки в файл конфигурации php. Чтобы найти этот файл выполните в терминале команду php --ini или запустите веб-сервер с кодом phpinfo() .

В Linux PHP подгружает не только основной файл, но и файл из этой директории. Например, на Ubuntu путь к директории конфигурационных файлов для PHP может быть таким — /etc/php/7.3/cli/conf.d/ . В ней создаём файл с необходимыми правами (требуются root права):

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

PHP Sniffer

В языках программирования есть понятие стиль кодирования. Но не все разработчики знают об этом. Программа, которая отвечает за проверку на соответствие стандартам, называется линтер. В PHP приняты стандарты под названием PSR. Нас интересуют стандарты PSR-1 и PSR-12. Именно эти два стандарта касаются кодирования и правил оформления.

В PHP в качестве линтера используется PHP_CodeSniffer. Для его работы необходимо установить глобально сам линтер composer global require "squizlabs/php_codesniffer=*" и расширение PHP Sniffer.

Проверьте, что линтер установился:

Выполнить проверку кода в терминале можно с помощью команды phpcs , явно указав стандарт, который мы хотим использовать, и путь для проверки:

Semicolon Insertion Shortcut

PHP требует разделять инструкции с помощью точки запятой. Расширение Semicolon Insertion Shortcut добавляет необходимый символ в конец строки с помощью шортката. Если при нажатии [Ctrl] + ; символ не вставляется, то необходимо проверить список горячих клавиш и при необходимости назначить комбинацию вручную: File -> Preferences -> Keyboard Shortcuts

Extra

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

— в VS Code уже встроена поддержка Git. Но когда базовых возможностей становится недостаточно, на помощь может придти Gitlens. Например, одна из полезных фич — git blame на текущей строке.

— разноцветные отступы в коде. Подсвечивает некорректный отступ. Можно вместо радуги установить оттенки серого.

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

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

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

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

3 ответа

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

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

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

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

Что такое ключевое слово?
Что такое строковый литерал?
Что за комментарий?
и т.п.

Вы не определяете цвета в файлах .plist !

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

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

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

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

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

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

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