タグ : WebStorm
使用 Prettier 美化 Petite-vue
Prettier 內建已經支援 Vue，但只支援 .vue，但 Petite-vue 通常會搭配後端或 SSG，如 Hugo 只支援 .html，若要使用 Prettier 在其他副檔名，則必須在 .prettierrc 做額外設定。
整合 WebStorm 與 Prettier
Prettier 為簡單的 Code Formatter，可為 HTML / JavaScript / CSS 重整格式，在 WebStorm 或 VS Code 皆可使用。
使用 Alpine.js Support Plugin 支援 Alpine
WebStorm 目前還沒有支援 Alpine，但可按裝 3rd Party 的 Alpine.js Support Plugin 支援 Alpine。
使用 Go Template Plugin 支援 Hugo
Hugo 的 Layout 是使用 Go Template，我們可安裝 JetBrains 官方的 Go Template Plugin 使其語法變色。
Modifying Default Templates of HTML
WebStorm provides many templates. If default templates are not suitable for us, we can modify them directly.
Integrating Nunjucks with WebStorm
WebStorm doesn’t support Nunjucks by default, and we have to add the Twig plugin manually to integrate Numjucks with WebStorm.
使用 WebStorm 開發 Gridsome
Gridsome 一大特色是使用 GraphQL 作為 Data Layer 的統一 Query 語言，透過 WebStorm 的 JS GraphQL Plugin，我們可會獲得更棒的 Gridsome 開發體驗。
使用 WebStorm 開發 Vue
WebStorm 已經提供 Vue Plugin 完整支援 Vue，唯一只有 .vue 格式縮排部分，Webstorm 與 Vue 的看法迥異，在 Reformat Code 之後，縮排會完全跑掉，需要稍微調整。
使用 WebStorm 開發 GraphQL
WebStorm 基於 ECMAScript 生態系設計，支援 GraphQL 當然不在話下，只要安裝 JS GraphQL 就可完美支援 GraphQL。
如何使 WebStorm 不 Reformat Gridsome 的 GraphQL ?
Gridsome 在 Vue Component 內以 <static-query> 與 <page-query> 使用 GraphQL 讀取 Data 為其一大特色，但目前 WebStorm 尚未全面支援 Gridsome，因此在 Reformat 時，原本 GraphQL 的 Format 會完全跑掉。
如何在 WebStorm 自動切換 Project ?
以 JetBrains ToolBox 快速切換 Project 時，WebStorm 預設會 詢問 是否開啟，可加以設定為 不詢問 自動開啟 Project。
如何不顯示 Browser Popup ?
WebStorm 的 Browser Popup 對於純 HTML 很有幫助，但若對於 Vue 則意義則不大，該如何將 Browser Popup 關起來呢 ?
如何使 WebStorm 的 Auto Import 為 Single Quote ?
當使用 Function 時 WebStorm 會自動幫我們 Import 相關 Module，但預設為 Double Quote，該如何更改成 Single Quote 呢 ?
如何在 WebStorm 存檔時 Reformat Code 與 Optimize Import ?
在開發時常常需要 Reformat Code 與 Optimize Import，若能在 存檔 同時也做這兩件事情，將會增加開發效率。
如何在 WebStorm 同時開啟多個專案 ?
Vue 與 GraphQL 雖然都使用 ECMAScript，但實務上常分成不同 Project，也各自有 Git Repository，但能在同一個 WebStorm 同時開發 Vue 與 GraphQL 兩個 Project 嗎 ?
如何在 WebStorm 使用 ASI ?
ECMAScript 其實並不如 C、C# 與 Java 強制在每行結尾都要加上 ;，支援所謂 ASI (Automatic Semicolon Insertion) 會在每行結尾自動加上 ;；WebStorm 與 ESLint 只要稍加設定就可完美支援 ASI。
如何為 React 設定自訂 ESLint 規則 ?
若想為 React 專案自定 ESLint 規則，必須先 yarn eject 將 package.json 展開，然後再 src 目錄新增 .eslintrc.json 檔案自訂 ESLint 規則。
如何在 WebStorm 使用 Fira Code 字型 ?
Fira Code 是最近很流行字型，其特色是 => 變成真正箭頭，特別適合 ECMAScript 2015 的 Arrow Function。WebStorm 已經內建 Fira Code，只要稍微設定即可使用。
如何以更簡短 Command 啟動 WebStorm ?
WebStorm 目前也可在 CLI 以 webstorm Command 直接開啟目前目錄的 Project，但 webstorm 稍嫌冗長，該如何改以 ws 啟動呢 ?
使用 Rainbow Bracket 讓 Block 更明顯
Rainbow Bracket 是 VS Code 很有名的 Extension，讓 Block 以相同顏色顯示，使 Code 結構更清楚，WebStorm 也可使用。
如何在 WebStorm 快速切換 Word Wrap ?
由於 HTML 是橫向發展，如 VS Code 的 ⌥ Z 快速切換 Word Wrap 就相當實用；WebStorm 雖然也有提供相對應的 Soft-Wrap，卻沒提供 Shortcut，本文提供兩種方式解決。
如何移除舊版 WebStorm ?
使用 Toolbox 更新 WebStorm 時，預設並不會移除舊版 WebStorm，JetBrains 本意是讓你能快速 Rollback 到之前版本，但這也無形浪費 SSD 空間，其實也可以移除舊版 WebStorm，並設定只留下最新版本。
如何解決 CLI 啟動舊版 WebStorm ?
WebStorm 除了使用 Toolbox 啟動外，也可如 VS Code 使用 CLI 啟動，但實務上發現 Toolbox 更新 WebStorm 後，CLI 仍會呼叫舊版 WebStorm，該如何解決呢 ?
如何對 CSS Extract Variable ?
WebStorm 在 2019.1 開始支援 CSS 的 Extract Variable，可將重複部分直接抽成 CSS Variable，方便日後維護。
如何在 WebStorm 顯示 Shortcut ?
WebStorm 支援豐富的 Shortcut，在 Demo 時若想將 Shortcut 即時顯示，需另外安裝 Presentation Assistant。