IntelliJ IDEA：Pug (Jade)模板引擎

Pug (Jade)模板引擎

此功能僅在Ultimate版本中受支持。

IntelliJ IDEA與Pug（Jade） 模板引擎集成。

使用準備

1. 下載并安裝Node.js。

2. 如“插件管理”中所述，在“插件”頁面上安裝并啟用Pug（以前的Jade）存儲庫插件。

此外，如果您需要文件觀察器，請確保已安裝并啟用了文件監(jiān)視器插件。該插件未與IntelliJ IDEA捆綁在一起，但可以從JetBrains插件存儲庫安裝，如“插件管理”中所述。

對UI的更改

Pug (Jade)插件向IntelliJ IDEA UI引入了以下更改：

• 該Jade文件項被添加到“新建”菜單中。
• Pug文件標有圖標 ; Jade文件標有圖標  。
• Pug（Jade）特定和HTML上下文中提供了編碼幫助：代碼格式化；語法突出顯示；代碼完成；配色方案。

在Node.js應用程序中使用Pug（Jade）模板

在運行時，Pug（Jade）文件填充轉換為HTML頁面。

1. 從頭開始創(chuàng)建項目，或者在現(xiàn)有源周圍創(chuàng)建項目，或者基于NodeExpress模板創(chuàng)建項目。

2. 創(chuàng)建一個Pug（Jade）文件。跟著這些步驟：

   1. 在“項目工具”窗口中，選擇要在其中創(chuàng)建新文件的目錄。例如，選擇：文件|新建。

   2. 在上下文菜單中，選擇Jade文件并在打開的對話框中指定文件名。

3. 創(chuàng)建一個文件觀察器，使用擴展名.jade或.pug將文件轉換為.html網(wǎng)頁：

   1. 單擊編輯器右上角的“ 添加觀察器”鏈接。

   2. 在“新建觀察器對話框”中，接受默認的預定義設置。

      請注意，如果可執(zhí)行文件位于PATH中，則不應顯式指定它。根據(jù)文件擴展名（.jade或.pug），將調(diào)用相應的可執(zhí)行文件。

      

4. 在編輯.pug/.jade文件時，IntelliJ IDEA調(diào)用文件觀察器，該文件觀察器創(chuàng)建一個.html文件，其中包含已處理的.pug/ .jade文件的名稱，并將生成的html代碼存儲在其中。