Jak włączyć kłódkę na kodzie HTML w stosunku do kodu?

Question

Zajmuję angular2 aplikację z kodu Visual studio, mam zainstalowane następujące rozszerzenia,

htmllint

i

htmlhint-ng2

Mam szablon komponentu następująco,

@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>` 
}) 

Henton HML nie pokazuje żadnych błędów w stosunku do kodu? jaki jest problem?

Answer 1

Teraz nie można.

Aby dodać dodatkowe funkcje (tj strzępienia) Kodeksu VS należy użyć rozszerzenia wykonany dla niego i niestety, do czasu tej odpowiedzi, nie ma żadnego htmllint rozszerzenie kodu VS.

Należy pamiętać, że oba udostępnione łącza są modułami węzłów, a nie rozszerzeniami. Zainstalowanie czegoś przy pomocy npm (tj. npm install htmllint) nie spowoduje, że będzie działało z kodem VS.

można przeglądać i instalować rozszerzenia z kodem VS, as describe in it docs, tak:

wychować Rozszerzenia zobaczyć klikając na ikonę Extensions w pasku aktywność na stronie Kodeksu VS lub widok : Polecenie rozszerzenia (⇧⌘X).

Jeśli nie można znaleźć rozszerzenie trzeba, masz kilka opcji:

• Create the extension yourself
• zmiana w edytorze, który ma takiego rozszerzenia:
  • Atom: linter-htmlhint plugin
  • Wysublimowany tekst: SublimeLinter-contrib-htmllint package
• Znajdź alternatywny sposób korzystania z edytora bez konieczności pisania własnego rozszerzenia.

---

Sugerowana alternatywna:

1. zainstalować jeden z modułów 2 węzłów. (to znaczy.npm i htmlhint-ng2 -D)

2. Dodaj swoje polecenia CLI do package.json skryptu:

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

3. przetestować uruchamiając npm run lint:html
4. Zainstalować moduł npm-watch: npm i npm-watch -D

5. dodać skrypt zegarek i config package.json

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

6. Uruchom npm run watch