Проверка/проверка ошибок HTML кода HTML

Я только что перешел на Visual Studio Code для веб-разработки от Netbeans и нашел свой путь. В Netbeans, если я забуду закрытие скобки на тэг, это будет указывать на мою ошибку с красной подчеркнуто подчеркивающей и предупреждение в левом поле.

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

Как я могу достичь такого же поведения проверки ошибок html, css в VS Code?

Ответы

Ответ 1

VSCode по умолчанию не имеет проверки HTML. Но он позволяет добавлять расширения и включать эти функции.

Чтобы добавить проверку HTML (linting), откройте VSCode, затем нажмите Ctrl + P а затем вставьте в него ext install HTMLHint и нажмите enter. Он установит HTML-валидатор. Возможно, вам потребуется перезагрузить VSCode, чтобы загрузить расширение.

Теперь, если вы открываете тот же html-документ, у вас была синтаксическая ошибка, вы должны увидеть там проблему, показанную в строке состояния внизу :), и она также покажет вам ошибки в этих строках.

Ответ 2

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

Форматирование кода доступно в VS Code через следующие ярлыки:

  • В Windows Shift + Alt + F
  • На Mac Shift + Option + F
  • На Ubuntu Ctrl + Shift + I

Вы можете добавить Auto Close Tag рынок VS Code.

Запустите VS Code Quick Open (Ctrl + P), вставьте следующую команду и нажмите клавишу ввода.

  1. Автоматически добавлять тег тега HTML/XML, такой же, как Visual Studio IDE или Sublime Text

    ext install auto-close-tag

  2. VS Code для HTMLHint - инструмент анализа статического кода для HTML

    ext install HTMLHint

  3. Предоставляет завершение имени класса CSS для атрибута класса HTML на основе файлов CSS в вашей рабочей области. Также поддерживает атрибут React className.

    ext install html-css-class-completion

Ответ 3

Код VS поддерживает это по умолчанию. У него также включена поддержка Emmet по умолчанию, что означает, что вам не нужно беспокоиться о закрытии тегов HTML. Он автоматически добавляет закрывающий тег.

Ответ 4

Это не встроенная функциональность VsCode... Однако у нее есть много доступных плагинов. Я бы порекомендовал вам плагин HTMLHint. Это то, что я использовал.

Вы можете установить его, используя команду: ext install HTMLHint

Ответ 5

Я обнаружил, что это расширение (хотя и не позволяет расширять встроенные правила) работает лучше, чем HTMLHint для проверки правильности HTML.

Имя: W3C Validation

Идентификатор: umoxfo.vscode-w3cvalidation

Описание: Добавляет поддержку проверки W3C в код Visual Studio.

Версия: 2.3.0

Издатель: Umoxfo VS

Ссылка на Marketplace: https://marketplace.visualstudio.com/items?itemName=umoxfo.vscode-w3cvalidation

Ответ 6

Для VS Code есть расширение HTMLHint.
Вы можете установить это, следуя инструкциям ниже
1. Чтобы открыть расширения: рынок, нажмите Ctrl + Shift + X
2. Введите HTMLHint в поле расширения поиска
3. Нажмите кнопку "Установить" в результатах поиска, показывая HTMLHint, разработанный "Майком Кауфманом".