次世代 Hugo

智能を研ぎ、創造を編む

使用 VS Code 開發 Web

Sam Xiao's Avatar 2026-05-12

若只是用來學習 HTML/CSS/JavaScript，可只安裝 Prettier 與 Live Server 即可，其他用 VS Code 內建。

Version

VS Code 1.120

Prettier

  • 美化 HTML/CSS/JavaScript
  • Prettier 比較特別，要分別安裝 Node.js 端 與 VS Code 端

Node.js 端

$ npm install -D prettier
  • prettier：美化 HTML/CSS/JavaScript

.prettierrc

{
  "bracketSameLine": true,
  "htmlWhitespaceSensitivity": "ignore",
  "semi": false,
  "singleQuote": true,
  "arrowParens": "avoid"
}
  • Prettier 設定檔 .prettierrc

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 與 CSS 仍維持 雙引號
  • arrowParens: avoid：JavaScript 的 function 只有一個參數時不加 ()

.prettierignore

node_modules

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

  • node_modules：忽略 NPM 套件的目錄

VS Code 端

web02

  • 在 VS Code 內使用 Prettier

settings.json

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "files.autoSave": "afterDelay",
  "[html]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}
  • 與 Prettier 相關的設定

要放在 Global Setting 或 Project Setting 皆可，可依需求決定

Line 3

"editor.defaultFormatter": "esbenp.prettier-vscode",
  • 設定 Prettier 為預設格式工具

Line 4

"editor.formatOnSave": true,
  • 每次儲存檔案時自動 Prettier 格式化

Line 5

"files.autoSave": "afterDelay",
  • 延遲幾百毫秒後自動儲存

Live Server

web01

  • 及時看到修改結果結果

settings.json

{
  "liveServer.settings.NoBrowser": true,
  "liveServer.settings.donotShowInfoMsg": true
}
  • liveServer.settings.NoBrowser：Live Server 啟動時，不自動開啟 Browser
  • liveServer.settings.donotShowInfoMsg：不顯示提示視窗

EditorConfig

web10

  • 支援 EditorConfig

.editorconfig

root = true

# 針對所有檔案的預設設定
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true
trim_trailing_whitespace = true

# 強制針對 HTML 檔案使用 2 空格
[*.{html,htm}]
indent_style = space
indent_size = 2
  • 強制 HTML 語法 indent 為 2

Git

.gitignore

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

# NPM
node_modules

# macOS
.DS_Store

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

  • .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 的資源檔

Explorer

web03

  • 在 Explorer 按右鍵，選擇 Open Editors、Outline

web04

  • Open Editors：可顯示已開啟的 Editor，方便快速切換
  • Outline：可顯示 HTML 的 Outline

Exclusive Directories

web05

settings.json

"files.exclude": {
  "node_modules": true,
  ".idea": true,
  ".vscode": false,
  ".git": true,
  ".gitignore": true,
  ".prettierrc": true,
  ".prettierignore": true,
  ".DS_Store": true,
  ".editorconfig": true,
  "package.json": true,
  "package-lock.json": true
},
  • 在 Workspace Setting 設定在 Explorer 不顯示的目錄與檔案：
    • node_modules：NPM 套件存放目錄
    • .idea：WebStorm 設定檔目錄
    • .vscode：VS Code 設定檔目錄
    • .git：Git 版本控制目錄
    • .gitignore：Git 忽略規則檔
    • .prettierrc：Prettier 設定檔
    • .prettierignore：Prettier 忽略檔
    • .DS_Store：macOS 資源檔
    • .editorconfig：Editor 格式統一設定檔
    • package.json：NPM 設定檔
    • package-lock.json：NPM 依賴版本鎖定檔

Integrated Browser

web06

  • 啟動 Live Server

web07

  • 先使用 ⌘ \ 將目前 Split Screen 成兩個 Editor

web08

  • 按右上角圖示啟動 Integrated Browser

web09

  • 在網址列輸入 http://localhost:5500
  • VS Code 已經內建 Chromium，可直接在 VS Code 內邊開發邊看到結果

Workspace Setting

.vscode/settings.json

{
  // Prettier
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "files.autoSave": "afterDelay",
  "[html]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // Exclusive Directories
  "files.exclude": {
    "node_modules": true,
    ".idea": true,
    ".vscode": false,
    ".git": true,
    ".gitignore": true,
    ".prettierrc": true,
    ".prettierignore": true,
    ".DS_Store": true,
    ".editorconfig": true,
    "package.json": true,
    "package-lock.json": true
  },

  // Live Server
  "liveServer.settings.NoBrowser": true,
  "liveServer.settings.donotShowInfoMsg": true
}
  • 完整適用於 Web 專案的 Workspace Setting

.vscode/extensions.json

{
  "recommendations": [
    "esbenp.prettier-vscode",
    "ritwickdey.liveserve",
    "editorconfig.editorconfig"
  ]
}
  • 完整適用於 Hugo 專案的 Extension Setting：
    • esbenp.prettier-vscode：Prettier - Code Formatter
    • ritwickdey.liveserve：Web Server
    • editorconfig.editorconfig：EditorConfig

Conclusion

  • 由於 VS Code 強烈依賴 Node.js 生態系的 Prettier，因此必須安裝 Node.js
  • 由於 VS Code 內建 Chromium，可直接在 VS Code 邊開發 Hugo Layout 邊看到 HTML 結果，非常方便

# VS Code