VSCode 全稱是 Visual Studio Code，是微軟在 2015 年推出的免費代碼編輯器，它“個頭”小，安裝包只有百兆左右，打開速度飛快。
VSCode 幾乎能搞定所有主流語言，從網頁三件套到 Python、C++、Java、Go 一應俱全，初學者裝完就能寫代碼，老手靠插件把它變成全能 IDE，全程不用掏一分錢。
VSCode 支持跨平台，在 Windows、macOS、Linux 上都能裝，真正的“一次下載，全平台通用”。
和其它通同領域的軟件相比，VSCode 的優勢是：不掏錢、不卡頓、插件多到誇張，配置步驟還傻瓜化，學生機老電腦都能跑得歡，Stack Overflow 全球調查連續多年把它頂到第一。
下載VSCode
VSCode最新版官方安裝包下載地址：VSCode安裝包
這裏為大家提供了多個 VSCode 安裝包，它們分別適用於 Windows、Linux 和 Mac OS 平台：
1) Windows 平台:
- VSCode-win32-x64-1.106.3.zip
- VSCodeUser...-x64-1.106.3.exe
2) Linux 平台：
- code-1.106.3-1764110935.el8.x86_64.rpm
- code_1.106.3-1764110892_amd64.deb
3) Mac OS 平台：
- VSCode-darwin-universal.zip
安裝VSCode
我用的是 Windows 系統，官方提供了 2 種安裝包，一個是 zip 壓縮包，另一個是 .exe 安裝程序，兩個都可以用，它們的區別是：
- .zip 壓縮包：包含完整的 VSCode，下載解壓即用，不需要安裝；
- .exe 安裝程序：需要根據引導逐步安裝。
1) 下載 .zip 壓縮包的小夥伴，解壓後得到下圖所示的文件夾：
找到 Code.exe（上圖選中的），雙擊打開它，就可能啓動 VSCode 了。
2) 下載 .exe 安裝文件的小夥伴，接下里帶領大家安裝，邊講解邊用截圖輔助大家理解：
① 雙擊 VSCodeU...-x64-1.106.3.exe，啓動安裝：
彈出上圖的警告窗口，點擊“運行”即可。
② 勾選“我同意...”，然後點擊“下一步”：
③ 默認安裝到 C 盤，這裏建議手動調整到其它盤（非系統盤），比如下圖安裝到 D 盤：
④ 根據需要可以勾選“不創建開始菜單文件夾”，不過勾選後就無法在開始菜單裏找到 VSCode 了（新手強烈不建議），點擊“下一步”：
⑤ 建議勾選“創建桌面快捷方式”，然後點擊“下一步”：
⑥ 直接點擊“安裝”，正式開始安裝：
⑦ 等待安裝完成：
⑧ 點擊“完成”，VSCode 就安裝完了：
⑨ 安裝完成後，VSCode 會自動運行，顯示出下圖所示的主界面：
漢化VSCode
VSCode 默認是英文的界面，對新手小白不是很友好，我們可以通過為 VSCode 安裝中文插件，講它的界面改為中文樣式。
1) 點擊界面最左側的 Extension 按鈕，或者按快捷鍵“Ctrl+Shift+X”：
2) 在搜索框裏，輸入“chinese”：
注意，如果輸入後搜索失敗，可能會你網絡的問題，也可能是正在運行着的一些軟件的問題。首先排除自己網絡的問題（能正常上網），然後可以結束一些正在運行着的軟件，比如保護安全的等等（我這裏開啓了 ToDesk，關閉後就正常了）。
3) 點擊第一個插件的 Install 按鈕，安裝完成後會在右下角彈出下圖的窗口：
4) VSCode 重新啓動後，界面就會變成中文的了：
VSCode 就漢化成功了！
使用VSCode
VSCode 本身就是一個代碼編輯器，不安裝插件的前提下，功能很單一。接下來為大家總結了各個開發方向需要安裝的插件，安裝完後才能滿足日常開發的需要。
|
語言
|
必裝插件（1-3 個）
|
插件作用一句話
|
|
JavaScript / TypeScript
|
ESLint、Prettier、JavaScript (ES6) code snippets
|
規範檢查+自動格式化+ES6 代碼片段
|
|
Python
|
Python、Pylance、Black Formatter
|
語法提示、類型檢查、一鍵格式化
|
|
Java
|
Extension Pack for Java、Spring Boot Extension Pack
|
語法高亮、Maven/Gradle 支持、Spring 全家桶
|
|
C / C++
|
C/C++、CMake Tools、Code Runner
|
IntelliSense、斷點調試、CMake 自動化
|
|
C#
|
C# Dev Kit、.NET Install Tool
|
調試、測試、項目管理，跨平台替代 Visual Studio
|
|
Go
|
Go、Go Test Explorer
|
語法高亮、自動補全、單元測試可視化
|
|
Rust
|
rust-analyzer、CodeLLDB
|
實時類型提示、調試支持
|
|
Vue
|
Volar、Vue VSCode Snippets
|
Vue3 語法高亮+類型推斷、快捷代碼片段
|
|
React
|
ES7+ React/Redux/React-Native snippets
|
快速生成組件、Hook、Redux 模板
|
|
PHP
|
PHP Intelephense、PHP Debug
|
快速補全、跳定義、Xdebug 調試
|
|
Ruby
|
Ruby、Solargraph
|
語法高亮、自動補全、文檔提示
|
|
Markdown
|
Markdown All in One、Markdown Preview Enhanced
|
快捷鍵寫作+實時預覽+導出 PDF
|
使用 VSCode 的過程，使用一些快捷鍵可以大幅提高效率：
|
快捷鍵（Windows / Linux）
|
Mac 對應
|
作用一句話
|
|
Ctrl + P
|
⌘ + P
|
快速打開文件（模糊搜索）
|
|
Ctrl + Shift + P
|
⌘ + Shift + P
|
命令面板，可執行任意指令
|
|
Ctrl + `
|
⌃ + `
|
顯示/隱藏集成終端
|
|
Ctrl + \
|
⌘ + \
|
左右分欄，再按一次關閉
|
|
Alt + 左 / 右
|
⌃ + - / ⌃ + ⇧ + -
|
前進 / 後退到上次光標位置
|
|
Ctrl + Shift + L
|
⌘ + Shift + L
|
選中所有相同單詞，批量編輯
|
|
Ctrl + D
|
⌘ + D
|
逐個選中下一個相同單詞
|
|
Alt + ↑ / ↓
|
⌥ + ↑ / ↓
|
整行上下移動
|
|
Ctrl + /
|
⌘ + /
|
單行註釋 / 取消註釋
|
|
Shift + Alt + F
|
⇧ + ⌥ + F
|
格式化整個文檔
|
|
F12
|
F12
|
跳轉到定義
|
|
Shift + F12
|
⇧ + F12
|
查看所有引用
|
|
Ctrl + K Ctrl + S
|
⌘ + K ⌘ + S
|
打開快捷鍵設置，可自定義
|
還有一些其它的常用插件：
|
插件名稱
|
一句話作用
|
推薦場景
|
|
Chinese (Simplified) Language Pack
|
界面完全中文化
|
新手零門檻
|
|
Material Icon Theme
|
給文件/文件夾加上 Material 風格圖標
|
顏值黨、暗黑模式
|
|
Prettier - Code formatter
|
保存即自動格式化
|
團隊統一風格
|
|
ESLint
|
實時語法與風格檢查
|
JS/TS 必備
|
|
GitLens — Git supercharged
|
行級 blame、代碼作者一目瞭然
|
多人協作
|
|
Git Graph
|
圖形化查看分支與提交
|
分支管理
|
|
Markdown All in One
|
快捷鍵寫作+側邊預覽
|
文檔/筆記
|
|
Markdown Preview Enhanced
|
數學公式、PPT、PDF 導出一條龍
|
技術博客、教學
|
|
Better Comments
|
彩色分類註釋（TODO、警告等）
|
全語言通用
|
|
Auto Rename Tag
|
修改標籤自動同步另一半
|
HTML/JSX/Vue
|
|
Image preview
|
懸停或槽內顯示圖片縮略圖
|
前端切圖
|
|
Code Runner
|
一鍵運行片段代碼
|
刷算法、腳本測試
|
|
LeetCode
|
內置題庫、提交與測試
|
刷題、面試
|
|
daily anime
|
命令面板一鍵追番+隨機句子
|
學習摸魚
|
|
小霸王
|
編輯器內嵌經典小遊戲
|
上班解壓
|
|
超越鼓勵師
|
楊超越隨機語音打 Call
|
提神醒腦
|
|
Tabnine AI Autocomplete
|
離線 AI 整行補全
|
全語言加速
|
|
GitHub Copilot
|
AI 生成函數、測試、註釋
|
全語言、學生免費
|
|
Live Server
|
保存即瀏覽器自動刷新
|
前端靜態頁調試
|
|
REST Client
|
直接在編輯器裏發 HTTP 請求
|
接口調試
|
