【VSCode】自動移除行尾空白

本篇重點

• VSCode 可以在存檔時自動移除行尾空白（Trim Trailing Whitespace）
• 基礎設定為全域生效
• settings.json 可進行語言層級的進階控制
• Render Whitespace 設定可以輔助檢視空白位置

---

行尾空白（trailing whitespace）指一行文字結尾處多餘的空白字元（例如：space 或 tab）。

常見來源包含：

• 編輯時不小心多按空白
• 貼上程式碼或文件時殘留
• 自動排版或格式化工具產生

選擇自動移除的原因：

• 不影響程式行為
• 容易造成版本控制的無意義 diff
• 編輯習慣層級的清理設定

透過圖形介面啟用

操作步驟：

1. 點擊左下角齒輪裡的設定
   
2. 搜尋 trim trailing whitespace
3. 勾選 Files: Trim Trailing Whitespace
   

啟用後效果：

• 每次存檔時自動移除行尾空白
• 為全域設定，預設會套用至所有檔案類型

透過 settings.json 設定

開啟 VSCode 設定檔 (JSON檔)

方法一、使用快捷鍵開啟

1. 使用按鍵 F1 或是 ctrl + shift + p 顯示所有命令

2. 輸入 open settings 選取 Preferences: Open User Settings (Json)
   

3. 即可開啟設定檔（settings.json）

方法二、從設定中開啟

1. 點擊左下角齒輪裡的設定
   

2. 點擊右上角的 開啟設定(json)
   

3. 即可開啟設定檔（settings.json）

新增基礎全域設定

在 settings.json 中新增設定，效果和在圖形介面勾選完全相同

settings.json

{
  "files.trimTrailingWhitespace": true
}

進階應用：針對特定語言停用

當全域設定與特定語言需求衝突時，可利用範圍定義功能（Scoped settings）來覆蓋全域行為。

settings.json

{
  "files.trimTrailingWhitespace": true,
  "[指定語言]": {
    "files.trimTrailingWhitespace": false
  }
}

• 全域仍維持自動清理
• 只會在指定語言檔案中停用

範例

在 Markdown 中，使用者可以根據撰寫習慣，決定是不是要停用自動移除行尾空白的功能。

• 使用雙換行（Double Enter）控制文章換行：如果習慣用兩次換行符號產生新段落，則可以移除行尾空格，維持全域自動移除設定。

• 使用行尾雙空格控制文章換行：如果習慣在行末輸入兩個空格來達成「段落內強制換行」，那就必須停用自動移除，以免版面跑版。

  settings.json

  {
    "files.trimTrailingWhitespace": true,
    "[markdown]": {
      "files.trimTrailingWhitespace": false
    }
  }

輔助檢視：Render Whitespace

用途：

• 顯示 space、tab 等不可見字元
• 用來確認行尾是否存在空白
• 視覺輔助，不影響實際內容或存檔行為

透過圖形介面啟用

1. 開啟設定，搜尋 Render Whitespace
2. 調整空格呈現方式的選項

• boundary：僅在行首、行尾、文字間單一空格以上會顯示。
• all：顯示檔案中所有的空格點。
  

透過 settings.json 設定

1. 開啟 VSCode 設定檔 (JSON檔)

2. 新增 Render Whitespace 設定

   settings.json

   {
     "editor.renderWhitespace": "boundary" // 或是 "all"
   }

延伸閱讀

• 【VSCode 官方文件】setting 說明
• 【VSCode 官方文件】markdown 調整說明