VS Code 前端開發完全配置指南 2026 | 零基礎小白配置指南

VS Code 前端開發完全配置指南

工欲善其事，必先利其器。VS Code 是目前全球最流行的代碼編輯器，免費、輕量、插件豐富。但剛裝好的 VS Code 是「裸」的——沒有代碼提示、沒有格式化、沒有語法檢查。這篇教程用大白話帶你從零配好一個前端開發神器。

一、安裝 VS Code

1.1 下載安裝

打開官網：https://code.visualstudio.com
點「Download」按鈕，會自動識別你的系統
下載後雙擊安裝，一路下一步即可

💡 安裝時注意勾選：
✅ 「添加到 PATH」（終端裡可以直接用 code 命令打開文件）
✅ 「創建桌面快捷方式」
✅ 「註冊為支持的文件類型默認編輯器」

1.2 驗證安裝

安裝完成後，打開終端（命令行），輸入：

bash

code --version

如果顯示版本號，說明安裝成功且 PATH 配置正確！

1.3 用 VS Code 打開文件夾

VS Code 和 Word 不同——它不是打開單個文件，而是打開整個文件夾：

bash

# 用命令行打開當前文件夾
code .

# 打開指定文件夾
code /path/to/project

或者直接在 VS Code 裡：File → Open Folder → 選擇你的項目文件夾

💡 新手記住：永遠用「打開文件夾」而不是「打開文件」，這樣 VS Code 才能識別項目結構、提供智能提示。

二、必裝插件（核心！）

VS Code 的強大來自插件。以下是前端開發的必裝清單，按重要程度排序。

2.1 中文語言包

插件名：Chinese (Simplified) Language Pack
搜索：Chinese

安裝後按 Ctrl+Shift+P，輸入 Configure Display Language，選 zh-cn，重啟即可變中文界面。

2.2 代碼格式化

插件名：Prettier - Code formatter
搜索：Prettier

作用：按一個鍵，代碼自動排版（縮進、換行、引號統一）。

安裝後在設置裡配置：

json

// .vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,  // 保存時自動格式化（超好用！）
}

💡 保存自動格式化是提升效率的第一神器——再也不用手動對齊了。

2.3 語法檢查 ESLint

插件名：ESLint
搜索：ESLint

作用：寫代碼時實時檢查語法錯誤，紅線標出問題。鼠標懸停能看到具體錯誤信息。

2.4 瀏覽器預覽

插件名：Live Server
搜索：Live Server

作用：右鍵 HTML 文件 → 「Open with Live Server」，自動在瀏覽器打開網頁。你改代碼保存，瀏覽器自動刷新。

💡 寫純 HTML/CSS/JS 時這個插件超方便，不用每次手動刷新瀏覽器。

2.5 路徑自動補全

插件名：Path Intellisense
搜索：Path Intellisense

作用：輸入文件路徑時自動補全。比如打 import './' 會彈出當前目錄下的文件列表。

2.6 自動重命名標籤

插件名：Auto Rename Tag
搜索：Auto Rename Tag

作用：改 HTML 標籤時自動同步改閉合標籤。比如把 <div> 改成 <section>，</div> 自動變成 </section>。

2.7 閉合標籤高亮

插件名：Highlight Matching Tag
搜索：Highlight Matching Tag

作用：光標放在某個標籤上，對應的閉合標籤會高亮顯示。嵌套層級多時再也不怕找錯配對。

2.8 CSS 類名提示

插件名：IntelliSense for CSS class names
搜索：CSS class

作用：寫 HTML 裡的 class="..." 時，自動提示你 CSS 文件裡已有的類名。

2.9 括號顏色配對

插件名：Rainbow Brackets / Bracket Pair Colorizer
搜索：Rainbow Brackets

作用：不同層級的括號用不同顏色顯示，嵌套多了也不會看花眼。

💡 VS Code 1.60+ 已內置括號著色功能，如果已開啟就不需要這個插件了。

2.10 Git 可視化

插件名：GitLens
搜索：GitLens

作用：在每一行代碼後面顯示「誰在什麼時候改的這行」（git blame）。團隊協作必備。

2.11 圖標主題

插件名：Material Icon Theme
搜索：Material Icon

作用：給不同類型的文件顯示不同的彩色圖標，一眼就能區分 .js、.css、.vue、.json。

安裝後按 Ctrl+Shift+P → 輸入 icon theme → 選 Material Icon Theme。

三、框架專用插件

根據你用的框架，選擇性安裝：

3.1 Vue 開發

插件名：Vue - Official（原名 Volar）
搜索：Vue Official

作用：Vue 3 官方推薦插件，提供模板語法高亮、類型檢查、代碼補全。

⚠️ 如果之前裝了舊的 Vetur 插件，請先卸載，兩者會衝突。

3.2 React 開發

插件名：ES7+ React/Redux/React-Native snippets
搜索：React snippets

作用：輸入簡寫自動生成 React 組件代碼。比如打 rafce 回車，自動生成一個箭頭函數組件。

3.3 Tailwind CSS

插件名：Tailwind CSS IntelliSense
搜索：Tailwind

作用：寫 Tailwind 類名時自動提示顏色、間距等，懸停還能看到對應的 CSS 值。

3.4 TypeScript

VS Code 自帶 TypeScript 支持，不需要額外裝插件！

四、主題美化

4.1 推薦主題

插件名：One Dark Pro
搜索：One Dark Pro

安裝後按 Ctrl+Shift+P → 輸入 Color Theme → 選 One Dark Pro。

其他熱門主題：

Dracula：暗色系，高對比度
GitHub Theme：和 GitHub 網頁風格一致
Tokyo Night：日系配色，護眼

4.2 字體推薦

編程字體和普通字體不同——需要有等寬對齊和連字特性。

推薦字體：

JetBrains Mono（推薦！免費，帶連字）
Fira Code（免費，連字效果好）
Cascadia Code（微軟出品，Windows 自帶）

下載安裝後在設置中配置：

json

// .vscode/settings.json
{
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', monospace",
  "editor.fontLigatures": true,  // 開啟連字（=> 變成箭頭）
  "editor.fontSize": 14,
  "editor.lineHeight": 22,
  "editor.letterSpacing": 0.5
}

4.3 美化設置

json

// .vscode/settings.json
{
  // 隱藏側邊欄的某些不常用面板
  "explorer.excludeGitIgnore": true,

  // 編輯器設置
  "editor.wordWrap": "on",              // 長行自動換行
  "editor.minimap.enabled": false,       // 關掉右側縮略圖
  "editor.renderWhitespace": "boundary", // 顯示空白字符
  "editor.guides.bracketPairs": true,   // 括號對齊線
  "editor.smoothScrolling": true,        // 平滑滾動
  "editor.cursorBlinking": "smooth",    // 光標平滑閃爍
  "editor.cursorSmoothCaretAnimation": "on", // 光標平滑移動
  "editor.linkedEditing": true,         // 聯動編輯 HTML 標籤

  // 終端設置
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.fontFamily": "'JetBrains Mono', monospace",

  // 文件設置
  "files.autoSave": "afterDelay",       // 自動保存
  "files.autoSaveDelay": 1000,          // 1秒後自動保存
  "files.trimTrailingWhitespace": true,  // 保存時刪除行末空格
  "files.insertFinalNewline": true,     // 文件末尾自動加空行
}

五、必學快捷鍵

5.1 全局快捷鍵

快捷鍵	作用	說明
`Ctrl/Cmd + Shift + P`	命令面板	VS Code 的「萬能菜單」，什麼都能搜到
`Ctrl/Cmd + P`	快速打開文件	輸入文件名直接跳轉，不用翻目錄
`Ctrl/Cmd + Shift + F`	全局搜索	在整個項目裡搜文字
`Ctrl/Cmd + B`	切換側邊欄	隱藏/顯示左邊的文件樹
`Ctrl/Cmd + J`	切換底部面板	隱藏/顯示終端
`Ctrl/Cmd + ,`	打開設置	修改 VS Code 配置
`Ctrl/Cmd + W`	關閉當前標籤	關掉當前打開的文件
`Ctrl/Cmd + Shift + N`	新窗口	開一個新的 VS Code 窗口

5.2 編輯快捷鍵

快捷鍵	作用	說明
`Ctrl/Cmd + C`	複製	光標在空行按一下，複製整行
`Ctrl/Cmd + X`	剪切	光標在空行按一下，剪切整行
`Ctrl/Cmd + V`	粘貼	—
`Ctrl/Cmd + Z`	撤銷	—
`Ctrl/Cmd + Shift + Z`	重做	撤銷的撤銷
`Ctrl/Cmd + D`	選中相同詞	選中當前詞，再按選中下一個相同的，可以同時編輯
`Ctrl/Cmd + F`	當前文件搜索	—
`Ctrl/Cmd + H`	查找替換	—
`Alt + ↑ / ↓`	上下移動整行	不用剪切粘貼了
`Shift + Alt + ↓`	向下複製整行	快速複製當前行
`Ctrl/Cmd + /`	註釋/取消註釋	自動識別語言
`Shift + Alt + A`	塊註釋	註釋一段代碼
`Ctrl/Cmd + Enter`	下方插入新行	不用把光標移到行末
`Ctrl/Cmd + Shift + Enter`	上方插入新行	—
`Tab`	縮進	選中多行按 Tab 右移
`Shift + Tab`	減少縮進	選中多行按左移

5.3 多光標編輯（超實用！）

操作	效果
`Alt + 鼠標點擊`	在點擊位置加一個光標
`Ctrl/Cmd + D`	選中下一個相同的詞
`Ctrl/Cmd + Shift + L`	選中所有相同的詞
`Alt + Shift + 拖動鼠標`	列選擇（豎著選一列）
`Alt + ↑/↓ 拖動`	列選擇

💡 場景舉例：要把 5 個 var 都改成 let？光標放在第一個 var 上，按 5 次 Ctrl/Cmd + D，5 個都被選中了，直接打 let，5 處同時修改！

5.4 代碼摺疊

快捷鍵	作用
`Ctrl/Cmd + Shift + [`	摺疊當前區域
`Ctrl/Cmd + Shift + ]`	展開當前區域
`Ctrl/Cmd + K` 然後 `Ctrl/Cmd + 0`	摺疊所有
`Ctrl/Cmd + K` 然後 `Ctrl/Cmd + J`	展開所有

六、代碼片段（Snippets）

6.1 什麼是代碼片段？

每次寫 Vue 組件都要手動敲 <template> <script> <style> 一大堆？用代碼片段輸入一個簡寫就能自動生成。

6.2 創建自定義片段

按 Ctrl/Cmd + Shift + P
輸入 Configure User Snippets
選擇語言（比如 vue.json）
編寫片段：

json

{
  "Vue 3 Component": {
    "prefix": "vue3",
    "body": [
      "<template>",
      "  <div class=\"${1:container}\">",
      "    $2",
      "  </div>",
      "</template>",
      "",
      "<script setup lang=\"ts\">",
      "$3",
      "</script>",
      "",
      "<style scoped>",
      "$0",
      "</style>"
    ],
    "description": "Vue 3 SFC 組件模板"
  }
}

在 .vue 文件裡輸入 vue3 回車 → 自動生成整個組件結構！

💡 語法說明：
$1、$2、$3：按 Tab 跳轉的位置（按順序）
$0：最終光標位置
${1:默認值}：帶默認值的佔位符

6.3 實用片段示例

HTML 快捷片段：

json

{
  "HTML5 模板": {
    "prefix": "html5",
    "body": [
      "<!DOCTYPE html>",
      "<html lang=\"zh-CN\">",
      "<head>",
      "  <meta charset=\"UTF-8\">",
      "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
      "  <title>${1:頁面標題}</title>",
      "</head>",
      "<body>",
      "  $0",
      "</body>",
      "</html>"
    ]
  }
}

Console.log 快捷片段：

json

{
  "console.log": {
    "prefix": "clg",
    "body": "console.log($1)",
    "description": "快速打印日誌"
  },
  "console.log 變量": {
    "prefix": "clv",
    "body": "console.log('${1:變量名}:', ${1})",
    "description": "打印帶名稱的變量"
  }
}

七、終端配置

7.1 內置終端

VS Code 自帶終端，按 Ctrl/Cmd + ` 打開。不用再單獨開一個終端窗口了。

7.2 推薦終端 Shell

Mac：用 zsh + oh-my-zsh（安裝教程）
Windows：用 PowerShell 或 Git Bash
跨平臺：安裝 Windows Terminal（Windows）

在設置中指定默認終端：

json

{
  // Mac
  "terminal.integrated.defaultProfile.osx": "zsh",

  // Windows
  "terminal.integrated.defaultProfile.windows": "Git Bash"
}

7.3 終端分屏

在終端面板右上角點「分屏」按鈕，或按 Ctrl/Cmd + \ 左右分屏，一邊跑 dev server 一邊跑 git 命令。

八、調試配置

8.1 調試 JavaScript

創建 .vscode/launch.json 文件
選擇 Chrome 或 Node.js 環境

調試前端網頁（Chrome）：

json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "調試網頁",
      "url": "http://localhost:5173",
      "webRoot": "${workspaceFolder}/src"
    }
  ]
}

需要安裝 Debugger for Chrome 插件（新版 VS Code 已內置）。

調試 Node.js：

json

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "調試 Node 程序",
      "program": "${workspaceFolder}/index.js"
    }
  ]
}

8.2 使用調試功能

在代碼行號旁點擊 → 打斷點（紅點）
按 F5 啟動調試
代碼執行到斷點時會暫停
用頂部的控制欄：繼續（F5）、單步跳過（F10）、單步進入（F11）
左側面板查看變量值

九、設置同步

9.1 開啟同步

換電腦時不用重新配置一遍！

點擊左下角齒輪 ⚙️ → 「設置同步已關閉」→ 打開
選擇用 GitHub 或 Microsoft 賬號登錄
選擇要同步的內容：設置、快捷鍵、擴展、代碼片段、UI 狀態
在新電腦上登錄同一個賬號 → 自動同步所有配置

💡 強烈建議第一天就開啟！以後換電腦、重裝系統，5 分鐘就能恢復全部配置。

十、Emmet 語法（寫 HTML/CSS 快到飛起）

VS Code 內置了 Emmet，用簡寫就能生成大段代碼。

10.1 HTML 縮寫

輸入以下簡寫後按 Tab：

html

<!-- 輸入 div.container 按 Tab -->
<div class="container"></div>

<!-- 輸入 ul>li*3 按 Tab -->
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

<!-- 輸入 div.card>h3+p 按 Tab -->
<div class="card">
  <h3></h3>
  <p></p>
</div>

<!-- 輸入 nav>ul>li*3>a[href="#"] 按 Tab -->
<nav>
  <ul>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
  </ul>
</nav>

<!-- 輸入 input[type="text"].form-control 按 Tab -->
<input type="text" class="form-control">

10.2 CSS 縮寫

css

/* 輸入 w100 按 Tab → */
width: 100px;

/* 輸入 p10-20 按 Tab → */
padding: 10px 20px;

/* 輸入 m0-a 按 Tab → */
margin: 0 auto;

/* 輸入 db 按 Tab → */
display: block;

/* 輸入 tac 按 Tab → */
text-align: center;

/* 輸入 br8 按 Tab → */
border-radius: 8px;

/* 輸入 bg#f5 按 Tab → */
background: #f5f5f5;

💡 Emmet 語法速記：
> = 子級
+ = 同級
* = 重複
. = class
# = id
[attr=val] = 屬性

十一、常見問題

11.1 VS Code 很卡怎麼辦？

關掉不用的插件：插件越多越卡，只留必要的

排除大文件夾：在 settings.json 中配置：

json

{
  "files.watcherExclude": {
    "**/node_modules/**": true,
    "**/dist/**": true,
    "**/.git/**": true
  }
}

增加內存限制：在快捷方式後面加 --max-memory=4096

11.2 插件推薦安裝太多會衝突嗎？

會！特別是格式化類插件（Prettier 和其他格式化器可能打架）。建議：

格式化只用一個：Prettier
Vue 開發只裝一個：Vue Official（別裝 Vetur）
不確定要不要裝時，先不裝，需要時再裝

11.3 怎麼恢復默認設置？

刪掉用戶配置文件：

Mac：~/Library/Application Support/Code/User/settings.json
Windows：%APPDATA%\Code\User\settings.json

或者按 Ctrl/Cmd + Shift + P → 輸入 Reset Settings

十二、完整配置文件

把以下內容保存為 .vscode/settings.json，放在項目根目錄：

json

{
  // ========== 編輯器 ==========
  "editor.fontSize": 14,
  "editor.lineHeight": 22,
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', monospace",
  "editor.fontLigatures": true,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.linkedEditing": true,
  "editor.guides.bracketPairs": true,
  "editor.smoothScrolling": true,
  "editor.cursorBlinking": "smooth",
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.renderWhitespace": "boundary",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },

  // ========== 文件 ==========
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.eol": "\n",

  // ========== 終端 ==========
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.fontFamily": "'JetBrains Mono', monospace",

  // ========== 搜索 ==========
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/.git": true
  },

  // ========== 其他 ==========
  "explorer.excludeGitIgnore": true,
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "One Dark Pro"
}

十三、VS Code 速查表

13.1 必裝插件速查

插件	用途
Chinese Language Pack	中文界面
Prettier	代碼格式化
ESLint	語法檢查
Live Server	網頁實時預覽
Auto Rename Tag	自動重命名閉合標籤
Path Intellisense	路徑補全
Material Icon Theme	文件圖標
GitLens	Git 增強

13.2 快捷鍵速查（Top 15）

快捷鍵	作用
`Ctrl/Cmd + Shift + P`	命令面板
`Ctrl/Cmd + P`	快速打開文件
`Ctrl/Cmd + Shift + F`	全局搜索
`Ctrl/Cmd + D`	選中相同詞
`Ctrl/Cmd + /`	註釋
`Alt + ↑/↓`	移動整行
`Shift + Alt + ↓`	複製整行
`Ctrl/Cmd + B`	切換側邊欄
Ctrl/Cmd + `` ``	打開終端
`F5`	啟動調試
`Ctrl/Cmd + ,`	打開設置
`Ctrl/Cmd + S`	保存
`Ctrl/Cmd + Z`	撤銷
`Tab`	Emmet 展開
`Esc`	取消選擇/關閉提示

十四、總結

回顧本教程的要點：

VS Code 打開的是文件夾，不是單個文件
必裝插件：Prettier（格式化）、ESLint（語法檢查）、Live Server（預覽）
保存自動格式化："editor.formatOnSave": true
命令面板 Ctrl/Cmd + Shift + P 是萬能入口
多光標編輯 Ctrl/Cmd + D 批量修改神器
Emmet 語法 寫 HTML/CSS 快到飛起
代碼片段 把重複代碼變成一個簡寫
設置同步 換電腦不用重新配置
調試直接在 VS Code 裡打斷點，不用開瀏覽器 F12
主題字體：One Dark Pro + JetBrains Mono 是經典搭配

配好 VS Code，你的開發效率至少提升 50%。把這些配置和快捷鍵練成肌肉記憶，寫代碼就像彈鋼琴一樣流暢！

相關閱讀：

VS Code 前端開發完全配置指南 2026 | 零基礎小白配置指南 ​

一、安裝 VS Code ​

1.1 下載安裝 ​

1.2 驗證安裝 ​

1.3 用 VS Code 打開文件夾 ​

二、必裝插件（核心！） ​

2.1 中文語言包 ​

2.2 代碼格式化 ​

2.3 語法檢查 ESLint ​

2.4 瀏覽器預覽 ​

2.5 路徑自動補全 ​

2.6 自動重命名標籤 ​

2.7 閉合標籤高亮 ​

2.8 CSS 類名提示 ​

2.9 括號顏色配對 ​

2.10 Git 可視化 ​

2.11 圖標主題 ​

三、框架專用插件 ​

3.1 Vue 開發 ​

3.2 React 開發 ​

3.3 Tailwind CSS ​

3.4 TypeScript ​

四、主題美化 ​

4.1 推薦主題 ​

4.2 字體推薦 ​

4.3 美化設置 ​

五、必學快捷鍵 ​

5.1 全局快捷鍵 ​

5.2 編輯快捷鍵 ​

5.3 多光標編輯（超實用！） ​

5.4 代碼摺疊 ​

六、代碼片段（Snippets） ​

6.1 什麼是代碼片段？ ​

6.2 創建自定義片段 ​

6.3 實用片段示例 ​

七、終端配置 ​

7.1 內置終端 ​

7.2 推薦終端 Shell ​

7.3 終端分屏 ​

八、調試配置 ​

8.1 調試 JavaScript ​

8.2 使用調試功能 ​

九、設置同步 ​

9.1 開啟同步 ​

十、Emmet 語法（寫 HTML/CSS 快到飛起） ​

10.1 HTML 縮寫 ​

10.2 CSS 縮寫 ​

十一、常見問題 ​

11.1 VS Code 很卡怎麼辦？ ​

11.2 插件推薦安裝太多會衝突嗎？ ​

11.3 怎麼恢復默認設置？ ​

十二、完整配置文件 ​

十三、VS Code 速查表 ​

13.1 必裝插件速查 ​

13.2 快捷鍵速查（Top 15） ​

十四、總結 ​

VS Code 前端開發完全配置指南 2026 | 零基礎小白配置指南

一、安裝 VS Code

1.1 下載安裝

1.2 驗證安裝

1.3 用 VS Code 打開文件夾

二、必裝插件（核心！）

2.1 中文語言包

2.2 代碼格式化

2.3 語法檢查 ESLint

2.4 瀏覽器預覽

2.5 路徑自動補全

2.6 自動重命名標籤

2.7 閉合標籤高亮

2.8 CSS 類名提示

2.9 括號顏色配對

2.10 Git 可視化

2.11 圖標主題

三、框架專用插件

3.1 Vue 開發

3.2 React 開發

3.3 Tailwind CSS

3.4 TypeScript

四、主題美化

4.1 推薦主題

4.2 字體推薦

4.3 美化設置

五、必學快捷鍵

5.1 全局快捷鍵

5.2 編輯快捷鍵

5.3 多光標編輯（超實用！）

5.4 代碼摺疊

六、代碼片段（Snippets）

6.1 什麼是代碼片段？

6.2 創建自定義片段

6.3 實用片段示例

七、終端配置

7.1 內置終端

7.2 推薦終端 Shell

7.3 終端分屏

八、調試配置

8.1 調試 JavaScript

8.2 使用調試功能

九、設置同步

9.1 開啟同步

十、Emmet 語法（寫 HTML/CSS 快到飛起）

10.1 HTML 縮寫

10.2 CSS 縮寫

十一、常見問題

11.1 VS Code 很卡怎麼辦？

11.2 插件推薦安裝太多會衝突嗎？

11.3 怎麼恢復默認設置？

十二、完整配置文件

十三、VS Code 速查表

13.1 必裝插件速查

13.2 快捷鍵速查（Top 15）

十四、總結