Как включить Lint на HTML в коде против?

Question

Я занимаюсь разработкой приложения angular2 с кодом Visual Studio, я установил следующие расширения,

htmllint

а также

htmlhint-ng2

У меня есть шаблон компонента следующим образом,

@Component({
    selector: 'userprofile',
    template: `
            <div class="profilecontainer">  
                <div class="row"> 
                   <img [src]="profile.profilePic" />

                <div   class="row">
                    <h2>{{profile.firstName}} {{profile.lastName}} </h2>
                    <a target="_blank" href="{{profile.detailUrl}}"> View profile</a>
                    <a target="-blank" href="{{profile.editUrl}}">Edit profile</a>
                </div>
           </div>`
})

Hml lint не показывает никаких ошибок по сравнению с кодом? в чем проблема?

Answer 1

Прямо сейчас ты не можешь.

Чтобы добавить дополнительные функции (например, linting) в VS Code, вы должны использовать расширение, созданное для него, и, к сожалению, к моменту ответа нет htmllint VS Расширение кода.

Обратите внимание, что обе ссылки, которыми вы поделились, являются модулями узла, а не расширениями. Установка чего-то с помощью npm (т.е. npm install htmllint) не будет работать с VS Code.

Вы можете просматривать и устанавливать расширения в VS Code, как описано в документации, например:

Чтобы открыть представление "Расширения", нажмите значок "Расширения" на панели действий на боковой стороне кода VS или команду "Вид: расширения" (⇧⌘X).

Если вы не можете найти нужное расширение, у вас есть несколько вариантов:

• Создайте расширение самостоятельно
• Перейдите в редактор с таким расширением:
  • Атом: плагин linter-htmlhint
  • Sublime Text: https://packagecontrol.io/packages/SublimeLinter-contrib-htmllint
• Найдите альтернативный способ продолжать использовать редактор без необходимости писать собственное расширение.

---

Предлагаемая альтернатива:

1. Установите один из двух узловых модулей. (т.е. npm i htmlhint-ng2 -D)

2. Добавьте свою команду cli в package.json сценарий:

   "scripts": {
     "lint:html": "htmlhint-ng2 src/**/*.html"
   }
   

3. Проверьте это, запустив npm run lint:html
4. Установите модуль npm-watch: npm i npm-watch -D

5. Добавьте скрипт просмотра и настройку package.json

   "watch": {
     "lint:html": "src/**/*.html"
   },
   "scripts": {
     "lint:html": "htmlhint-ng2 src/**/*.html"
     "watch": "npm-watch"
   }
   

6. Бежать npm run watch

Answer 2

Теперь существует официальное расширение HTMLHint VS Code (которое заменяет устаревшее, созданное Microsoft).

https://marketplace.visualstudio.com/items?itemName=HTMLHint.vscode-htmlподсказка

Правила можно настроить для работы с компонентами Angular в HTML.