Vs code включить подчеркивание ошибок

Скачиваем и устанавливаем проверку орфографии русского языка в Visual Studio Code. Для проверки орфографии в Visual Studio Code — нам придется проделать пару манипуляций с программе. что проверка орфографии на русском языке заработала!

Скачать и установить плагин для проверки орфографии в Visual Studio Code

1. Скачать и установить проверку орфографии на Visual Studio Code
2. Включить проверку орфографии в программе Visual Studio Code
3. Как пользоваться проверкой орфографии в Visual Studio Code
4. Как добавить свое слово в словарь в Visual Studio Code<
5. Отключаем проверку орфографию Visual Studio Code<

Скачать и установить проверку орфографии на Visual Studio Code

Пришло время скачать плагин проверки орфографии и установить его а Visual Studio Code!

Открываем программу Visual Studio Code – слева ищем «иконку» где нарисовано четыре квадратика, нажимаем по ней!

Сверху у вас появляется окно поиском, вбиваем туда :

Code Spell Checker

Видим результат поиска Russian — Code Spell Checker найден – нажимаем по строке.

Справа внизу есть кнопка install, либо в открытом окне справа эта кнопка тоже есть. Устанавливаем!

Нажмите, чтобы открыть в новом окне.



Включить проверку орфографии в программе Visual Studio Code

После того, как вы скачали плагин проверки орфографии — его нужно включить!

Вариант №1 включить проверку орфографии Visual Studio Code

В очередной раз нажимаем по полюбившимся квадратикам в панели слева

Перед вами должно открыться окно с перечислением установленных плагинов. Выбираем Russian — Code Spell Checker

В правом нижнем углу видим шестеренку — > нажимаем включить проверку орфографии в Visual Studio Code

Нажмите, чтобы открыть в новом окне.



Вариант №2 включить проверку орфографии Visual Studio Code

Второй вариант включения Russian Spell Checker Dictionary

Нажимаем F1 на клавиатуре.

В окне ввода, если не нашли нужную строчку надо вставить Russian Spell Checker Dictionary

После ввода вы должны увидеть активную строку, на которую нужно нажать, мы второй раз это сделать не сможем, поскольку проверка орфографии в нашей версии Visual Studio Code уже включена, что сигнализирует подчеркнутая строка:

Enable Russian Spell Checker Dictionary

Нажмите, чтобы открыть в новом окне.



Как пользоваться проверкой орфографии в Visual Studio Code

Для того, чтобы продемонстрировать работу плагина проверки орфографии в Visual Studio Code, открывается какой-то файл и начинаем печатать текст на русском языке специально с ошибкой, и видим, что нашу ошибку программа Visual Studio Code прекрасно увидела, что свидетельствует подчеркивание слова с ошибкой:

Если мы наведем на подчеркнутое слово, то увидим слова Unknown word — переводится как — «неизвестное слово»


Как добавить сове слово в словарь в Visual Studio Code

Также можно занести любое слово в ваш словарь!

Нажимаем по строке ПКМ и в новом выпавшем окне ищем строку — Add Word to Folder Dictionary либо Add Word to User Dictionary


Отключаем проверку орфографию Visual Studio Code.

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

Если вы хотите просто отключить проверку орфографии в Visual Studio Code

Идем в установленные расширения.

Находим установленное — «Russian — Code Spell Checker »

И далее либо удаляем либо отключаем проверку орфографии!

Нажмите, чтобы открыть в новом окне.

Можете не благодарить, лучше помогите!

COMMENTS+

 
BBcode

I spent a lot of time and managed to make errors in vs code more visible. Still not in the gutter, but better then nothing. I replaced vs code squiggly error and warning underlines with background and thick underline:

(offtop: also on screenshot you can see how «Bracket Pair Colorizer» extension works

Install CSS and JS Loader and carefully follow all instructions (i had problem with link to css, which in windows must be like file:///C:/myfolder/myfile.css … better read whole extension instructions)

Create a css file with contents:

.monaco-editor.vs .squiggly-warning,
.monaco-editor.vs-dark .squiggly-warning {
  /* background */
  background: #f2e3b3;
  /* underline */
  border-bottom: 3px solid #ffc000; 
}
.monaco-editor.vs .squiggly-error,
.monaco-editor.vs-dark .squiggly-error {
  /* background */
  background: #ffc7c7;
  /* underline */
  border-bottom: 4px solid #ff0000; 
}

And place link to it in settings.json like said in CSS and JS Loader extension instructions

"vscode_custom_css.imports": ["file:///C:/yourfolder/youfilewithcustom.css"],
"vscode_custom_css.policy": true,

, then reload…

You can get color box around error (instead of underline, not simultaniously) if you use for example (border: instead of border-bottom: ):

border: 1px solid #ff0000; 

Or you can get custom border from any side (right border alone seems to look great, tried this while writing this post)

.monaco-editor.vs .squiggly-warning,
.monaco-editor.vs-dark .squiggly-warning {
  background: #f2e3b3;
  border-right: 5px solid #ffc000;
  border-bottom: 5px solid #ffc000;
  border-top: 3px solid #ffc000;
  border-left: 1px solid #ffc000;
}
.monaco-editor.vs .squiggly-error,
.monaco-editor.vs-dark .squiggly-error {
  background: #ffc7c7;
  border-right: 5px solid #ff0000;
  border-bottom: 3px solid #ff0000;
  border-top: 3px solid #ff0000;
  border-left: 1px solid #ff0000;
}

This css will only replace squiggle color from green to yellow:

.monaco-editor.vs .squiggly-warning,
.monaco-editor.vs-dark .squiggly-warning {
/* yellow squiggly */
background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' height='3' width='6'><g fill='#FF0'><path d='M5.5 0l-3 3H1.1l3-3z'/><path d='M4 0l2 2V.6L5.4 0zM0 2l1 1h1.4L0 .6z'/></g></svg>") repeat-x 0 100%;
}

As you can see the name of class changed from .greensquiggly to .squiggly-warning, that’s why css from previous answer doesn’t work.
To find out new error css class i used Help -> Toggle Developer Tools, where after deleting bunch of blocks, i could find the error and warning classes.

I spent a lot of time and managed to make errors in vs code more visible. Still not in the gutter, but better then nothing. I replaced vs code squiggly error and warning underlines with background and thick underline:

(offtop: also on screenshot you can see how «Bracket Pair Colorizer» extension works

Install CSS and JS Loader and carefully follow all instructions (i had problem with link to css, which in windows must be like file:///C:/myfolder/myfile.css … better read whole extension instructions)

Create a css file with contents:

.monaco-editor.vs .squiggly-warning,
.monaco-editor.vs-dark .squiggly-warning {
  /* background */
  background: #f2e3b3;
  /* underline */
  border-bottom: 3px solid #ffc000; 
}
.monaco-editor.vs .squiggly-error,
.monaco-editor.vs-dark .squiggly-error {
  /* background */
  background: #ffc7c7;
  /* underline */
  border-bottom: 4px solid #ff0000; 
}

And place link to it in settings.json like said in CSS and JS Loader extension instructions

"vscode_custom_css.imports": ["file:///C:/yourfolder/youfilewithcustom.css"],
"vscode_custom_css.policy": true,

, then reload…

You can get color box around error (instead of underline, not simultaniously) if you use for example (border: instead of border-bottom: ):

border: 1px solid #ff0000; 

Or you can get custom border from any side (right border alone seems to look great, tried this while writing this post)

.monaco-editor.vs .squiggly-warning,
.monaco-editor.vs-dark .squiggly-warning {
  background: #f2e3b3;
  border-right: 5px solid #ffc000;
  border-bottom: 5px solid #ffc000;
  border-top: 3px solid #ffc000;
  border-left: 1px solid #ffc000;
}
.monaco-editor.vs .squiggly-error,
.monaco-editor.vs-dark .squiggly-error {
  background: #ffc7c7;
  border-right: 5px solid #ff0000;
  border-bottom: 3px solid #ff0000;
  border-top: 3px solid #ff0000;
  border-left: 1px solid #ff0000;
}

This css will only replace squiggle color from green to yellow:

.monaco-editor.vs .squiggly-warning,
.monaco-editor.vs-dark .squiggly-warning {
/* yellow squiggly */
background: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' height='3' width='6'><g fill='#FF0'><path d='M5.5 0l-3 3H1.1l3-3z'/><path d='M4 0l2 2V.6L5.4 0zM0 2l1 1h1.4L0 .6z'/></g></svg>") repeat-x 0 100%;
}

As you can see the name of class changed from .greensquiggly to .squiggly-warning, that’s why css from previous answer doesn’t work.
To find out new error css class i used Help -> Toggle Developer Tools, where after deleting bunch of blocks, i could find the error and warning classes.

Редактирование кода является неотъемлемой частью рабочего процесса разработки. Он включает в себя все ваши действия в редакторе перед повторным запуском тестов или проверкой того, как ваши изменения влияют на приложение, над которым вы работаете:

• Добавление, изменение и удаление кода;
• Исправление синтаксических ошибок;
• Исправление опечаток, например, в именах переменных и функций;
• Исправление ошибок и предупреждений linter;
• Форматирование;
• Рефакторинг и реструктуризация кода.

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

Visual Studio Code обеспечивает надежное редактирование и предлагает множество расширений, которые вы можете установить, чтобы вывести его на новый уровень. Эти 6 расширений Visual Studio Code (extension pack) помогают оставаться в курсе событий и быть продуктивным при редактировании кода JavaScript и TypeScript:

GitHub Copilot

GitHub Copilot предлагает завершение кода для вашей текущей должности редактора. Его предложения, сгенерированные ИИ, варьируются от краткого завершения инструкции до полных функций и классов. 

Copilot, например, полезен для автоматической генерации шаблонного кода, обнаружения API и быстрой реализации общих шаблонов. Это также полезно для выхода из тупика, когда не сразу понятно, какой код нужен для решения проблемы.

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

Prettier

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

Prettier — самоуверенный форматировщик кода, которые используют во многих проектах JavaScript и TypeScript. Он может форматировать JavaScript, TypeScript, JSON, HTML, JSX (React), CSS и многое другое. Поскольку он предлагает лишь несколько параметров конфигурации, использование Prettier может помочь избежать дискуссий о форматировании кода.

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

"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.formatOnSaveMode": "modificationsIfAvailable"

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

quick-lint-js

quick-lint-js — отличная альтернатива ESLint, когда вы в первую очередь хотите проверить правильность кода. Он предоставляет фиксированный набор правил TypeScript и JavaScript и работает очень быстро.

Хотя quick-lint-js не обладает расширяемостью и параметрами конфигурации ESLint, он помогает быстро увидеть распространенные ошибки и исправить их. И поскольку он фокусируется на корректности, quick-lint-js не содержит самоуверенных правил стиля и очень хорошо работает с Prettier.

Code Spell Checker

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

P42 JS Assistant

Небольшие рефакторинги могут помочь реструктурировать и очистить ваш код при его редактировании. Был разработан P42 JS Assistant, который обеспечивает множество автоматизированных действий с кодом и предлагает рефакторинг, который делает ваш код более читабельным и современным. 

Вы можете открыть контекстное меню с действиями кода в редакторе, нажав на значок лампочки или используя сочетание клавиш для быстрого исправления (Ctrl + в Windows и Linux, ⌘ + в Mac). Вы можете использовать кодовые действия для быстрого и безопасного внесения семантических изменений в свой код.

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

Error Lens

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

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

В дополнению к отображению ошибок TypeScript и JavaScript, окрашивание сообщений делает Error Lens отличным дополнением к quick-lint-js (ошибки, предупреждения), Code Spell Checker (информация) и P42 JS Assistant (подсказка). Вы можете переключать отображение различных типов сообщений с помощью команды Error Lens: Toggle в палитре команд.

Заключение

Редактирование кода занимает центральное место в разработке программного обеспечения. С помощью выше указанных расширений Visual Studio Code вы можете расширить возможности редактирования и упростить написание высококачественного кода. Вы можете легко установить расширения с помощью пакета расширений JavaScript и TypeScript Editing.

ErrorLens turbo-charges language diagnostic features by making diagnostics stand out more prominently, highlighting
the entire line wherever a diagnostic is generated by the language and also prints the message inline.

Features

• Highlight lines containing diagnostics
• Append diagnostic as text to the end of the line
• Show icons in gutter
• Show message in status bar

Commands (6)

Settings (49)

Error Lens extension settings start with errorLens.

Colors (26)

Can be specified in settings.json (workbench.colorCustomizations section)

Line highlighting depends on the "errorLens.messageBackgroundMode" setting.

#fff0 — Completely transparent color.

Upstream issues

Please upvote the following VS Code issues:

• Api for editor insets
• Access theme’s colors programmatically
• When completing color keys in settings, fill in current value
• Inline text adornments break word wrapping
• OnClick event on Gutter
• Support hover decorations over the line numbers i.e. gutter

More Documentation

https://github.com/usernamehw/vscode-error-lens/tree/master/docs/docs.md

@alexdima
these are mine settings

{
  "breadcrumbs.filePath": "off",
  "breadcrumbs.symbolPath": "off",
  "editor.acceptSuggestionOnEnter": "smart",
  "editor.colorDecorators": false,
  "editor.cursorBlinking": "smooth",
  "editor.cursorStyle": "line-thin",
  "editor.detectIndentation": false,
  "editor.fontSize": 12,
  "editor.hover.enabled": false,
  "editor.minimap.renderCharacters": false,
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.scrollBeyondLastLine": false,
  "editor.snippetSuggestions": "top",
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true,
    "**/node_modules": true,
  },
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true,
  "files.trimTrailingWhitespace": true,
  "html.format.wrapAttributes": "force-expand-multiline",
  "window.closeWhenEmpty": true,
  "window.restoreFullscreen": true,
  "window.titleBarStyle": "custom",
  "workbench.commandPalette.history": 0,
  "workbench.editor.tabSizing": "shrink",
  "workbench.settings.editor": "json",
  "workbench.settings.useSplitJSON": true,
  "workbench.startupEditor": "newUntitledFile",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "javascript.updateImportsOnFileMove.enabled": "always",
  "breadcrumbs.enabled": false,
  "editor.renderControlCharacters": false,
  "editor.renderWhitespace": "none",
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "vscode.typescript-language-features"
  },
  "diffEditor.renderSideBySide": true,
  "javascript.validate.enable": false,
  "search.searchOnTypeDebouncePeriod": 500,
  "git.openDiffOnClick": false,
  "workbench.colorTheme": "GitHub Dark",
  "svg.preview.mode": "svg",
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
  }
}

I haven’t touched them since the last update and highlighting stopped working.
--user-data-dir with this highlighting works. soo, should I delete my settings and start over?