コードとHTMLの間でlintを有効にするにはどうすればよいですか？

Question

私はVisual Studioのコードでangular2アプリを開発しています

、私は次の拡張子がインストールされている、

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

今すぐできません。あなたはこの回答の時点で、残念ながらそれのために作られたと拡張子を使用する必要がありVSコードに余分な機能を追加するために

（すなわち毛羽立ち）は、任意のhtmllint VSコードの拡張機能がありません。

共有したリンクは両方ともノードモジュールであり、拡張機能ではありません。 npm（つまりnpm install htmllint）でのインストールは、VSコードでは動作しません。あなたはこのように、VSコード、as describe in it docs内から拡張子を閲覧し、インストールすることができます

：

拡張機能を起動しますがVSコード、またはビューの側の活動バーの拡張機能のアイコンをクリックして表示します：Extensionsコマンド（⇧⌘X）。

あなたが必要な拡張機能を見つけることができない場合、あなたはいくつかのオプションがあります、このような拡張子を持つ編集者へ

• Create the extension yourself
• 変更：
  • アトム：linter-htmlhint pluginを
  • 崇高な文章：SublimeLinter-contrib-htmllint package
• 独自の拡張機能を記述することなくエディタを使い続ける別の方法を見つけることができます。

---

代替推奨：

1. 2つのノードモジュールのいずれかをインストールします。 （すなわち、npm i htmlhint-ng2 -D）

2. package.jsonスクリプトにそのCLIコマンドを追加します。

   "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