次世代 Hugo

無駄を削ぎ、本質を研ぐ

使用 WebStorm 開發 Hugo

Sam Xiao's Avatar 2025-08-19

WebStorm 目前並沒有原生支援 Hugo，必須另外安裝 Smart Hugo plugin，但原生支援 Prettier 美化 HTML/SCSS/JavaScript，與 Stylelint 加強 CSS 檢查與排序。

Version

WebStorm 2025.2

Node.js

hugo05

Settings -> Languages & Frameworks -> Node.js

  • 設定 Node.js 路徑

一定要設定，否則 Prettier 與 Stylelint 在 WebStorm 將無法執行

Smart Hugo

webstorm01

Settings -> Plugins

  • 安裝 Smart Hugo plugin

CSS

hugo04

Settings -> Directories

  • 將 CSS 的 根目錄 指定成 Resource Root

Prittier

$ npm install -D prettier 
$ npm install -D prettier-plugin-go-template
$ npm install -D prettier-plugin-toml
  • prettier：美化 HTML/SCSS/JavaScript
  • prettier-plugin-go-template：Prettier plugin：美化 Go template
  • prettier-plugin-toml：Prettier plugin：美化 TOML

.prettierrc

{
  "bracketSameLine": true,
  "htmlWhitespaceSensitivity": "ignore",
  "semi": false,
  "singleQuote": true,
  "arrowParens": "avoid",
  "plugins": [
    "prettier-plugin-go-template",
    "prettier-plugin-toml"
  ],
  "overrides": [
    {
      "files": [
        "*.html"
      ],
      "options": {
        "parser": "go-template"
      }
    }
  ]
}

Line 2

"bracketSameLine": true,
"htmlWhitespaceSensitivity": "ignore",
"semi": false,
"singleQuote": true,
"arrowParens": "avoid",
  • bracketSameLine: true：HTML 的多 attribute 造成 tag 變成多行時，> 不換行
  • htmlWhitespaceSensitivity: ignore：HTML 忽略 white space 不換行
  • semi: false：JavaScript 支援 ASI，結尾不加分號
  • singleQuote: true：JavaScript 的 String 使用 單引號，但 HTML 與 SCSS 仍維持 雙引號
  • arrowParens: avoid：JavaScript 的 function 只有一個參數時不加 ()

Line 7

"plugins": [
  "prettier-plugin-go-template",
  "prettier-plugin-toml"
],
  • plugins：設定 Prettier plugin
    • prettier-plugin-go-template：美化 Go template
    • prettier-plugin-toml：美化 TOML

Line 11

"overrides": [
  {
    "files": [
      "*.html"
    ],
    "options": {
      "parser": "go-template"
    }
  }
]
  • 將 .html 視為 Go template 處理

.prettierignore

node_modules
public
*.min.css
*.mim.js

設定 Prettier 忽略的檔案類型與目錄：

  • node_modules：忽略 NPM 套件的目錄
  • public：忽略 Hugo 編譯後檔案的目錄
  • *.min.css：忽略已經壓縮的 CSS
  • *.min.js：忽略已經壓縮的 JavaScript

hugo02

Settings -> Languages & Frameworks -> JavaScript -> Prettier

  • Manual Prettier configuration
    • Prettier package：指定 node_modules 下的 prettier
    • Path to .prettierignore：自動偵測 .prettierignore
    • Run on Reformat Code action：On
    • Run for files：**/*.{html,css,js,toml}
    • Run on save：On
    • Prefer Prettier configuration to IDE code style：On

Run for files 的 html、css、js 與 toml 之間 不要有空格

package.json

"scripts": {
  "prettier": "prettier --write '**/*.{html,css,js,toml}'"
}
  • prettier：一次處理專案內所有 HTML/SCSS/JavaScript/TOML

Stylelint

$ npm install -D stylelint
$ npm install -D stylelint-config-standard
$ npm install -D stylelint-config-clean-order
  • stylelint：檢查 CSS
  • stylelint-config-standard：Stylelint plugin：標準 CSS 規則
  • stylelint-config-clean-order：Stylelint plugin：CSS 樣式排序規則

.stylelintrc

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-clean-order"
  ],
  "rules": {
    "max-nesting-depth": [
      1,
      {}
    ],
    "selector-class-pattern": [
      "^[a-z]+(?:__[a-z0-9]+)?(?:--[a-z0-9]+)?$",
      {
        "message": "Expected class selector to follow BEM"
      }
    ]
  }
}
  • extends：沿用規則
    • stylelint-config-standard：標準 CSS 規則
    • stylelint-config-clean-order：樣式排序規則
  • rules：建立自訂規則
    • max-nesting-depth：巢狀最多只能一層
    • selector-class-pattern：BEM 命名規則

.stylelintignore

node_modules
public
static

設定 Stylelint 忽略的檔案類型與目錄：

  • node_modules：忽略 NPM 套件的目錄
  • public：忽略 Hugo 編譯後檔案的目錄
  • static：忽略 static 目錄下 CSS

hugo03

Settings -> Languages & Frameworks -> Style Sheets -> Stylelint

  • Enabled：啟用 Stylelint
  • Stylelint package：指定 node_modules 下的 stylelint
  • Configuration file：自動偵測 .stylelintrc
  • Run for files：**/*.{css}
  • Run stylelint --fix on save：on

package.json

"scripts": {
  "stylelint": "npx stylelint '**/*.{css,}' --fix"
}
  • stylelint：一次處理專案內所有 CSS

Git

.gitignore

# Hugo
public
resources
.hugo_build.lock

# Editor
.idea
.vscode/*
!.vscode/settings.json
!.vscode/extensions.json

# NPM
node_modules

# macOS
.DS_Store

將 .gitignore 建立在 Hugo 專案的 根目錄 下。

  • public : final HTML/CSS/JavaScript for production
  • resources：hugo server 時所建立的暫存目錄
  • .hugo_build.lock : Hugo build 所建立的 lock 檔
  • .idea : WebStorm 的暫存檔存放目錄
  • .vscode：VS Code 的暫存檔存放目錄
  • !.vscode/settings.json：VS Code workspace 的 user setting 要進 Git
  • !.vscode/extensions.json：VS Code workspace 的推薦 extension 要進 Git
  • node_modules : NPM 套件存放目錄
  • .DS_Store : macOS 的資源檔

Conclusion

  • Smart Hugo 雖非 JetBrains 官方 Plugin，但其表現比 Go Template Plugin 好，是專為 Hugo 所設計
  • Prettier 本身並不支援 Go template 與 TOML，必須另外安裝 prettier-plugin-go-template 與 prettier-plugin-toml
  • WebStorm 原生已經支援 Prettier，只需加以設定即可
  • Stylelint 可對 CSS 與 BEM 做檢查，並對屬性加以排序
  • WebStorm 原生已經支援 Stylelint，只需加以設定即可

# Hugo # WebStorm