NetBeans增加自訂標籤與屬性：能用在Vue.js上嗎？ / Customize HTML Element Tags and Attributes for Vue.js in NetBeans
大家好，我是下著大雨的悶熱週六躲到實驗室工作的布丁。NetBeans 8.2在檢查HTML格式的時候並沒有支援Vue.js的特殊標籤與屬性，不過還好我們可以手動為NetBeans的專案加入自訂設定，避免NetBeans顯示錯誤訊息。但是NetBeans的自訂標籤似乎不能接受「:」或「@」開頭的縮寫屬性(shorthands)，但「v-on:」或「v-bind:」就可以。使用的時候可能要注意這個差異。
NetBeans版本: 8.2 / NetBeans Version: 8.2
我手邊用的NetBeans還是2016年發佈的8.2版本。後來NetBeans從Orcale轉移給Apache，軟體也改名為Apache NetBeans。目前2019年發佈的最新版是11.0。不過我還在繼續用舊版8.2就是了。
Vue.js模板語法 / Template Syntax in Vue.js
(圖片來源：HACKERNOON)
最近在撰寫網頁應用程式的時候採用了Vue.js這個MVVM框架(Model-view-viewmodel)。MVVM框架的共同特色是會在HTML網頁裡面加入自訂標籤和屬性，而JavaScript就能根據這些自訂標籤和屬性來實作資料綁定(data binding)、邏輯判斷等功能。
以Vue.js為例，自訂標籤主要是<template> (大多用於邏輯判斷上)，而更多的是自訂屬性，像是資料綁定中以「v-bind:」開頭的屬性或事件綁定中以「v-on:」開頭的屬性。而這兩種自訂屬性又有各自的簡寫，「v-bind:」可簡寫為「:」、「v-on:」可簡寫為「@」。
舉例來說，「v-on:click="doMethod"」就是請把此標籤的click事件綁定到Vue.js方法中的「doMethod」事件。而這個自訂標籤的寫法又可以簡寫為「@click="doMethod"」，使用上是一樣的。
HTML錯誤訊息 / HTML format error
這樣子的寫法也寫了好一陣子了，但一直覺得在NetBeans中編輯的時候，錯誤提示一直讓我看了很不順眼。因為NetBeans認為HTML語法裡面沒有「v-on:」屬性，所以會把Vue.js的模板語法標示錯誤。
要怎麼解決錯誤提示的這個問題呢？Geertjan's Blog的「Custom Elements & Attributes in HTML in NetBeans IDE」介紹了如何在NetBeans中新增自訂標籤和屬性的方法，讓我們一起來做做看吧。
新增自訂屬性 / Add a custom attribute
在NetBeans的HTML編輯器中，將輸入指標放到有錯誤提示的那一行。這時候會出現錯誤提示的敘述。接著你可以用滑鼠點選左邊帶有紅色驚歎號的燈泡，或是按下「Alt-Enter」來顯示錯誤提示處理選項。
我們選擇「Declare global attribute "v-on:click"」，為「v-on:click」來宣告全域屬性。
錯誤提示就這樣消失了。
你可以用這方法繼續新增其他的自訂標籤和屬性，但這些新增的設定去了那裡呢？
檢視自訂屬性檔案 / customs.json file
上述的自訂標籤和屬性的設定會保存在NetBeans專案資料夾底下的「customs.json」檔案裡面。要怎麼檢視這個檔案呢？
打開「Window」的「Files」，或是按快速鍵「Ctrl + 2」。
找到剛剛編輯的專案，在「nbproject」底下就可以找到「customs.json」檔案。
剛剛新增的自訂屬性「v-on:click」就在這裡了。
如果你有很多不同的專案都需要用到類似的自訂標籤和屬性，那就可以複製這個customs.json到其他專案使用。
模板語法縮寫無效 / Attribute customization doesn't work with shorthands
我們再來處理另一個「@click」的自訂屬性吧。
根據上述操作，選擇「Declare global attribute "@click"」，把它加入到全域屬性裡面。
奇怪的是，錯誤提示依然存在。
選擇「Edit project's editor custom elements configuration file」，開啟「customs.json」來看看。
「@click」確實加入到「customs.json」裡面了。可是儘管如此，NetBeans依然不會把「@click」辨識為自訂標籤。
除了「v-on:」的簡寫「@」之外，類似的情況還有「v-bind:」的簡寫「:」。這兩個簡寫在NetBeans裡面似乎都不能加入自訂屬性中。
因此，如果要避免Vue.js的模板語法在NetBeans出現錯誤提示的話，那最好不要使用簡寫，將「@」改回「v-on:」、「:」改回「v-bind:」，然後照上述作法將它們加入自訂屬性裡面吧。
結語 / In closing
其實我本來是希望看到新版的NetBeans會對Vue.js有更多支援，不過似乎NetBeans在Vue.js上的著墨並不多。找來找去，發現改一下設定檔就能解決這個小問題了，那這樣也好。
(圖片來源：NixCraft)
沒事就不要更動IDE，以免出現更多問題吧。
那麼這次對於 NetBeans增加自訂標籤與屬性的教學就到這邊了。你會使用MVVM框架來開發嗎？你通常是使用什麼IDE配合開發的呢？你對於MVVM框架的特殊標籤有什麼看法呢？歡迎在下面的留言處跟我們分享你的想法。大家的意見是我繼續分享的動力喔！如果你覺得我這篇教學寫的不錯的話，請幫我在AddThis分享工具按讚、將這篇分享到Facebook等社群媒體吧！感謝你的耐心閱讀，我是布丁，讓我們下一篇見。
