如何在 vs 代碼中啟用 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 在 vs 代碼上沒有顯示任何錯誤？ 問題是什么？

Answer 1

現在， 你不能 。

為了向VS Code添加額外的功能（即linting ），你必須使用為它做的擴展，不幸的是，到這個答案的時候，沒有任何htmllint VS Code擴展。

請注意，您共享的兩個鏈接都是節點模塊，而不是擴展。 與安裝的東西npm （即npm install htmllint ）不會讓它與VS代碼工作。

您可以在VS Code中瀏覽和安裝擴展， 如文檔中所述 ，如下所示：

單擊VS Code側面的活動欄中的Extensions圖標或View：Extensions命令（⇧⌘X），打開Extensions視圖。

如果找不到所需的擴展名，可以選擇以下幾種方法：

• 自己創建擴展
• 更改為具有此類擴展名的編輯器：
  • Atom： linter-htmlhint插件
  • Sublime Text： SublimeLinter-contrib-htmllint包
• 找到另一種繼續使用編輯器的方法，而無需編寫自己的擴展。

---

建議的替代方案 ：

1. 安裝其中一個2節點模塊。 （即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-htmlhint

可以將規則配置為與 HTML 中的 Angular 組件一起使用。