如何在 WebStorm 中使用 Pug/Jade 模板引擎？

4715

要在webstorm中高效使用pug模板引擎，需完成以下步驟：1. 安裝pug：通過npm或yarn在項目中安裝pug；2. 配置文件類型：在webstorm中將.pug文件關(guān)聯(lián)至pug語言以啟用語法高亮與代碼補(bǔ)全；3. 利用內(nèi)置功能：如語法高亮、emmet支持、代碼格式化及live edit實時預(yù)覽；4. 調(diào)試pug模板：編譯生成html后，在JavaScript代碼中設(shè)置斷點并結(jié)合webstorm調(diào)試器與chrome開發(fā)者工具進(jìn)行調(diào)試；5. 實現(xiàn)自動編譯：通過配置file watchers調(diào)用pug命令行工具實現(xiàn)保存時自動編譯；6. 解決格式化問題：調(diào)整webstorm的html代碼風(fēng)格設(shè)置或使用editorconfig保持代碼風(fēng)格一致；7. 使用live templates：創(chuàng)建自定義pug代碼片段提升開發(fā)效率。以上配置完成后，即可顯著提升pug在webstorm中的開發(fā)體驗與編碼效率。

如何在 WebStorm 中使用 Pug/Jade 模板引擎？

Pug (原 Jade) 是一種簡潔優(yōu)雅的 HTML 模板引擎，能在 WebStorm 中高效使用。關(guān)鍵在于配置 WebStorm 的文件類型關(guān)聯(lián)和利用其提供的代碼補(bǔ)全、語法高亮等功能。

在 WebStorm 中使用 Pug/Jade 模板引擎，你需要進(jìn)行一些配置，并了解如何利用 WebStorm 提供的功能來提高開發(fā)效率。

安裝 Pug

首先，確保你的項目中已經(jīng)安裝了 Pug。可以使用 npm 或 yarn 進(jìn)行安裝：

npm install pug # 或者 yarn add pug

配置 WebStorm 文件類型

WebStorm 需要知道 .pug 文件應(yīng)該如何處理。

  1. 打開 WebStorm 的設(shè)置 (File -> Settings 或 WebStorm -> Preferences)。
  2. 導(dǎo)航到 Editor -> File Types。
  3. 在 “Recognized File Types” 列表中，查找 “Pug”。 如果沒有，點擊 “+” 按鈕，選擇 “Pug”。
  4. 在 “Registered Patterns” 中，添加 *.pug。

使用 WebStorm 的 Pug 功能

配置完成后，WebStorm 會自動識別 .pug 文件，并提供以下功能：

  • 語法高亮： Pug 代碼會根據(jù)語法進(jìn)行高亮顯示，提高可讀性。
  • 代碼補(bǔ)全： WebStorm 會根據(jù)上下文提供代碼補(bǔ)全建議，減少手動輸入。
  • Emmet 支持： Pug 支持 Emmet 語法，可以快速生成 HTML 結(jié)構(gòu)。 例如，輸入 div#container.wrapper>ul>li*3>a 然后按 Tab 鍵，可以快速生成一個包含嵌套列表和鏈接的 div。
  • 代碼格式化： WebStorm 可以自動格式化 Pug 代碼，保持代碼風(fēng)格一致。 使用快捷鍵 Ctrl+Alt+L (windows/linux) 或 Cmd+Option+L (macos) 可以格式化代碼。
  • 實時預(yù)覽 (配合 Live Edit): 可以配置 WebStorm 的 Live Edit 功能，在修改 Pug 文件后自動刷新瀏覽器，實時預(yù)覽效果。

如何在 WebStorm 中調(diào)試 Pug 模板？

直接調(diào)試 Pug 模板本身比較困難，因為 Pug 最終會被編譯成 HTML。 調(diào)試的重點應(yīng)該放在生成的 HTML 和相關(guān)的 JavaScript 代碼上。

  1. 編譯 Pug 模板: 你需要先將 Pug 模板編譯成 HTML。 可以使用 Pug 的命令行工具或在 Node.JS 代碼中使用 pug.renderFile 方法。

    const pug = require('pug'); const compiledFunction = pug.compileFile('template.pug'); const html = compiledFunction({ name: 'Timothy' }); console.log(html);

  2. 設(shè)置斷點: 在與生成的 HTML 交互的 JavaScript 代碼中設(shè)置斷點。 例如，如果你的 JavaScript 代碼動態(tài)地更新了 HTML 內(nèi)容，就在更新代碼的地方設(shè)置斷點。

  3. 使用 WebStorm 的調(diào)試器: 啟動 WebStorm 的調(diào)試器，運行你的 Node.js 應(yīng)用或在瀏覽器中打開 HTML 文件。 當(dāng)代碼執(zhí)行到斷點時，調(diào)試器會暫停，你可以檢查變量的值，單步執(zhí)行代碼，等等。

  4. 利用 Chrome 開發(fā)者工具: Chrome 開發(fā)者工具可以幫助你檢查生成的 HTML 結(jié)構(gòu)，查看 css 樣式，以及調(diào)試 JavaScript 代碼。 你可以通過 “Elements” 面板查看 HTML 結(jié)構(gòu)，通過 “Sources” 面板調(diào)試 JavaScript 代碼。

WebStorm 是否支持 Pug 的自動編譯？

WebStorm 本身不直接提供 Pug 的自動編譯功能，但可以通過配置 “File Watchers” 來實現(xiàn)。 File Watchers 可以在文件發(fā)生變化時自動執(zhí)行指定的命令。

  1. 打開 File Watchers 設(shè)置: 在 WebStorm 的設(shè)置中，導(dǎo)航到 Tools -> File Watchers。

  2. 添加新的 File Watcher: 點擊 “+” 按鈕，選擇 “Pug”。 如果沒有 Pug 選項，選擇 “Custom”。

  3. 配置 File Watcher: 根據(jù)你的項目配置進(jìn)行設(shè)置。 以下是一些常用的配置選項：

    • Name: File Watcher 的名稱，例如 “Pug Compiler”。
    • File type: 選擇 “Pug”。
    • Scope: 指定 File Watcher 監(jiān)控的文件范圍。
    • Program: Pug 編譯器的可執(zhí)行文件路徑。 通常是 node_modules/.bin/pug。 你可以使用 $ProjectFileDir$ 變量來指定項目根目錄。 例如，$ProjectFileDir$/node_modules/.bin/pug。
    • Arguments: 傳遞給 Pug 編譯器的參數(shù)。 例如，$FilePath$ –out $FileDir$ 會將當(dāng)前 Pug 文件編譯成 HTML 文件，并輸出到同一目錄下。 你還可以添加其他參數(shù)，例如 –pretty 可以生成格式化的 HTML 代碼。
    • Output paths to refresh: 指定編譯后需要刷新的文件路徑。 例如，$FileDir$/$FileNameWithoutExtension$.html。

  4. 啟用 File Watcher: 確保 File Watcher 已啟用 (選中復(fù)選框)。

配置完成后，當(dāng)你的 Pug 文件發(fā)生變化時，WebStorm 會自動執(zhí)行 Pug 編譯器，生成 HTML 文件。

如何解決 WebStorm 中 Pug 代碼格式化問題？

WebStorm 默認(rèn)的代碼格式化可能不完全符合你的 Pug 代碼風(fēng)格。 你可以通過配置 WebStorm 的代碼風(fēng)格設(shè)置來解決這個問題。

  1. 打開 Code Style 設(shè)置: 在 WebStorm 的設(shè)置中，導(dǎo)航到 Editor -> Code Style -> HTML。

  2. 配置 HTML 代碼風(fēng)格: WebStorm 將 Pug 代碼視為 HTML 代碼進(jìn)行格式化。 你可以配置以下選項來調(diào)整代碼風(fēng)格：

    • General: 設(shè)置縮進(jìn)大小、換行方式等。
    • Other: 設(shè)置是否保留空行、是否在屬性周圍添加空格等。

  3. 使用 EditorConfig: 如果你的項目使用了 EditorConfig 文件，WebStorm 會自動讀取 EditorConfig 文件中的代碼風(fēng)格設(shè)置，并應(yīng)用到 Pug 代碼的格式化中。 EditorConfig 可以幫助你保持團(tuán)隊代碼風(fēng)格的一致性。

如何在 WebStorm 中使用 Pug 的代碼片段 (Live Templates)？

WebStorm 的 Live Templates 功能可以讓你快速插入常用的 Pug 代碼片段。

  1. 打開 Live Templates 設(shè)置: 在 WebStorm 的設(shè)置中，導(dǎo)航到 Editor -> Live Templates。

  2. 創(chuàng)建新的 Live Template: 點擊 “+” 按鈕，選擇 “Live Template”。

  3. 配置 Live Template: 根據(jù)你的需求進(jìn)行設(shè)置。 以下是一些常用的配置選項：

    • Abbreviation: 用于觸發(fā) Live Template 的縮寫。 例如，pug-block。

    • Description: Live Template 的描述。

    • Template text: Pug 代碼片段。 你可以使用變量來插入動態(tài)內(nèi)容。 例如：

      block $BLOCK_NAME$     $END$

    • Applicable in: 指定 Live Template 適用的文件類型。 選擇 “HTML”。

  4. 使用 Live Template: 在 Pug 文件中輸入縮寫，然后按 Tab 鍵，WebStorm 會自動插入代碼片段。

通過配置 Live Templates，你可以快速插入常用的 Pug 代碼結(jié)構(gòu)，提高開發(fā)效率。 例如，你可以創(chuàng)建一個 Live Template 來快速插入一個包含標(biāo)題和內(nèi)容的 section：

  • Abbreviation: pug-section
  • Description: Create a section with a title and content.
  • Template text:
section   h2 $TITLE$   p $CONTENT$   $END$

現(xiàn)在，在你的 Pug 文件中輸入 pug-section 然后按 Tab 鍵，WebStorm 會自動插入以下代碼：

section   h2   p

你可以直接在占位符 $TITLE$ 和 $CONTENT$ 中輸入標(biāo)題和內(nèi)容。

? 版權(quán)聲明
THE END
開發(fā)工具
# linux# 工具# ai# windows# html# JavaScript# 瀏覽器# red# css# JS# macos# cos# chrome# npm# webstorm# yarn# li# ul
喜歡就支持一下吧
點贊15 分享