:::

NetBeans增加自訂標籤與屬性:能用在Vue.js上嗎? / Customize HTML Element Tags and Attributes for Vue.js in NetBeans

6-NetBeans_Vue.js上嗎?.png

大家好,我是下著大雨的悶熱週六躲到實驗室工作的布丁。NetBeans 8.2在檢查HTML格式的時候並沒有支援Vue.js的特殊標籤與屬性,不過還好我們可以手動為NetBeans的專案加入自訂設定,避免NetBeans顯示錯誤訊息。但是NetBeans的自訂標籤似乎不能接受「:」或「@」開頭的縮寫屬性(shorthands),但「v-on:」或「v-bind:」就可以。使用的時候可能要注意這個差異。

NetBeans版本: 8.2 / NetBeans Version: 8.2

2019-0601-043353.png

我手邊用的NetBeans還是2016年發佈的8.2版本。後來NetBeans從Orcale轉移給Apache,軟體也改名為Apache NetBeans。目前2019年發佈的最新版是11.0。不過我還在繼續用舊版8.2就是了。

Vue.js模板語法 / Template Syntax in Vue.js

1_Pki08Q31XRtQA8zLl2Gn1w.png

(圖片來源:HACKERNOON)

最近在撰寫網頁應用程式的時候採用了Vue.js這個MVVM框架(Model-view-viewmodel)。MVVM框架的共同特色是會在HTML網頁裡面加入自訂標籤和屬性,而JavaScript就能根據這些自訂標籤和屬性來實作資料綁定(data binding)、邏輯判斷等功能。

以Vue.js為例,自訂標籤主要是<template>  (大多用於邏輯判斷上),而更多的是自訂屬性,像是資料綁定中以「v-bind:」開頭的屬性或事件綁定中以「v-on:」開頭的屬性。而這兩種自訂屬性又有各自的簡寫,「v-bind:」可簡寫為「:」、「v-on:」可簡寫為「@」。

2019-0601-044800.png 2019-0601-044819.png

舉例來說,「v-on:click="doMethod"」就是請把此標籤的click事件綁定到Vue.js方法中的「doMethod」事件。而這個自訂標籤的寫法又可以簡寫為「@click="doMethod"」,使用上是一樣的。

HTML錯誤訊息 / HTML format error

2019-06-01_162527.png 

這樣子的寫法也寫了好一陣子了,但一直覺得在NetBeans中編輯的時候,錯誤提示一直讓我看了很不順眼。因為NetBeans認為HTML語法裡面沒有「v-on:」屬性,所以會把Vue.js的模板語法標示錯誤。

要怎麼解決錯誤提示的這個問題呢?Geertjan's Blog的「Custom Elements & Attributes in HTML in NetBeans IDE」介紹了如何在NetBeans中新增自訂標籤和屬性的方法,讓我們一起來做做看吧。

新增自訂屬性 / Add a custom attribute

2019-0601-045617.png

在NetBeans的HTML編輯器中,將輸入指標放到有錯誤提示的那一行。這時候會出現錯誤提示的敘述。接著你可以用滑鼠點選左邊帶有紅色驚歎號的燈泡,或是按下「Alt-Enter」來顯示錯誤提示處理選項。

2019-0601-045858.png

我們選擇「Declare global attribute "v-on:click"」,為「v-on:click」來宣告全域屬性。

2019-0601-050125.png

錯誤提示就這樣消失了。

你可以用這方法繼續新增其他的自訂標籤和屬性,但這些新增的設定去了那裡呢?

檢視自訂屬性檔案 / customs.json file

上述的自訂標籤和屬性的設定會保存在NetBeans專案資料夾底下的「customs.json」檔案裡面。要怎麼檢視這個檔案呢?

2019-0601-050740.png

打開「Window」的「Files」,或是按快速鍵「Ctrl + 2」。

2019-0601-050556.png

找到剛剛編輯的專案,在「nbproject」底下就可以找到「customs.json」檔案。

2019-0601-051012.png

剛剛新增的自訂屬性「v-on:click」就在這裡了。

如果你有很多不同的專案都需要用到類似的自訂標籤和屬性,那就可以複製這個customs.json到其他專案使用。

模板語法縮寫無效 / Attribute customization doesn't work with shorthands

2019-0601-051259.png

我們再來處理另一個「@click」的自訂屬性吧。

2019-0601-051336.png

根據上述操作,選擇「Declare global attribute "@click"」,把它加入到全域屬性裡面。

2019-0601-051521.png

奇怪的是,錯誤提示依然存在。

2019-0601-051455.png

選擇「Edit project's editor custom elements configuration file」,開啟「customs.json」來看看。

2019-06-01_171438.png

「@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上的著墨並不多。找來找去,發現改一下設定檔就能解決這個小問題了,那這樣也好。

61258461_2677911852222176_6639832930661171200_n.jpg

(圖片來源:NixCraft)

沒事就不要更動IDE,以免出現更多問題吧。


那麼這次對於 NetBeans增加自訂標籤與屬性的教學就到這邊了。你會使用MVVM框架來開發嗎?你通常是使用什麼IDE配合開發的呢?你對於MVVM框架的特殊標籤有什麼看法呢?歡迎在下面的留言處跟我們分享你的想法。大家的意見是我繼續分享的動力喔!如果你覺得我這篇教學寫的不錯的話,請幫我在AddThis分享工具按讚、將這篇分享到Facebook等社群媒體吧!感謝你的耐心閱讀,我是布丁,讓我們下一篇見。