次世代 Hugo

無駄を削ぎ、本質を研ぐ

使用 VS Code 開發 HTML/CSS

Sam Xiao's Avatar 2025-07-13

若只是用來學習 HTML/CSS，可只安裝 Prettier、Stylelint、Live Server 與 Firefox Developer Edition 即可。

Version

VS Code 1.102.0
HTML 5
CSS 3

Prettier

$ npm i -D prettier
  • prettier：安裝 Prettier 美化 HTML/CSS

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

.prettierignore

node_modules

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

  • node_modules：忽略 NPM 套件的目錄
ext intall esbenp.prettier-vscode
  • 在 VS Code 內使用 Prettier

settings.json

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

Line 2

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

Line 3

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

Line 3

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

Stylelint

$ npm i -D stylelint
$ npm i -D stylelint-config-standard
$ npm i -D stylelint-order
  • stylelint：安裝 Stylelint 加強支援 CSS
  • stylelint-config-standard：安裝 Stylelint plugin：標準 CSS 格式規則
  • stylelint-order：安裝 Stylelint plugin：對 CSS 屬性排序

.stylelintrc

{
  "extends": "stylelint-config-standard",
  "plugins": ["stylelint-order"],
  "rules": {
    "order/properties-order": [
      [
        "position",
        "top",
        "right",
        "bottom",
        "left",
        "display",
        "justify-content",
        "align-items",
        "width",
        "height",
        "margin",
        "padding",
        "color",
        "font-size"
      ],
      {
        "unspecified": "bottomAlphabetical"
      }
    ]
  }
}
  • "extends": "stylelint-config-standard"：沿用標準 CSS 格式規則
  • "plugins": ["stylelint-order"]：啟用 stylelint-order plugin
  • rules：設定 CSS 屬性排序規則

.stylelintignore

node_modules

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

  • node_modules：忽略 NPM 套件的目錄
ext install stylelint.vscode-stylelint
  • 在 VS Code 內使用 Stylelint

settings.json

{
  // 存檔執行 Stylelint
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": "always"
  },
    
  // VS Code
  "css.validate": false,
  
  // Stylelint
  "stylelint.validate": ["css"],
}
  • 由於 VSCode 與 Stylelint 都可處理 CSS，因此必須先關閉 VSCode 的處理，再設定 Stylelint 處理 CSS 與 SCSS

Line 2

// 存檔執行 Stylelint
"editor.codeActionsOnSave": {
  "source.fixAll.stylelint": "always"
},
  • 存檔執行 Stylelint 並修正錯誤

Line 7

// VS Code
"css.validate": false,
  • 關閉 VS Code 對 CSS 驗證

Line 11

// Stylelint
"stylelint.validate": ["css"],
  • 設定 Stylelint 驗證 CSS

Firefox Developer Edition

$ brew install --cask firefox@developer-edition
  • 以 Firefox Developer Edition 作為練習用的瀏覽器

Live Server

ext install ritwickdey.liveserve
  • 及時看到 HTML 與 CSS 改變結果

settings.json

{
  "liveServer.settings.CustomBrowser": "/Applications/Firefox Developer Edition.app/Contents/MacOS/firefox",
  "liveServer.settings.donotShowInfoMsg": true
}
  • liveServer.settings.CustomBrowser：指定使用 Firefox Developer Edition 開啟
  • liveServer.settings.donotShowInfoMsg：不顯示提示視窗

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

Workspace Setting

.vscode/settings.json

{
  // UI Setting
  "window.zoomLevel": 1.6,
  "workbench.colorTheme": "Webstorm New Darcula",
  "workbench.sideBar.location": "right",
  "workbench.editor.labelFormat": "short",
  "workbench.editor.untitled.labelFormat": "name",
  "breadcrumbs.enabled": false,
  "workbench.activityBar.location": "hidden",
  "workbench.editor.showTabs": "single",
  "workbench.colorCustomizations": {
    "statusBar.background": "#303030",
    "statusBar.noFolderBackground": "#303030",
    "focusBorder": "#303030"
  },

  // Editor setting
  "editor.fontFamily": "Fira Code",
  "editor.fontLigatures": true,
  "editor.fontWeight": "500",
  "editor.fontSize": 15,
  "editor.tabSize": 2,
  "editor.minimap.enabled": false,
  "editor.parameterHints.enabled": false,
  "editor.accessibilitySupport": "off",
  "editor.tabCompletion": "on",
  "editor.acceptSuggestionOnEnter": "off",
  "editor.defaultFormatter": "esbenp.prettier-vscode",

  // 存檔執行 Prettier
  "editor.formatOnSave": true,
  "files.autoSave": "afterDelay",

  // 存檔執行 Stylelint
  "editor.codeActionsOnSave": {
    "source.fixAll.stylelint": "always"
  },

  // VS Code
  "css.validate": false,
  "scss.validate": false,

  // Stylelint
  "stylelint.validate": ["css"],

  // Git
  "git.openRepositoryInParentFolders": "never",

  // Live Server
  "liveServer.settings.CustomBrowser": "/Applications/Firefox Developer Edition.app/Contents/MacOS/firefox",
  "liveServer.settings.donotShowInfoMsg": true
}

.vscode/extensions.json

{
  "recommendations": [
    "esbenp.prettier-vscode",
    "stylelint.vscode-stylelint",
    "ritwickdey.liveserve"
  ]
}

Conclusion

  • Prettier：支援 HTML/SCSS
  • Stylelint：支援 CSS 屬性檢查與排序
  • 當 Prettier 與 Stylelint 同時存在時，事實上是先執行 Prettier，然後再執行 Stylelint

# HTML # CSS # VS Code