Visual Studio Code 超详细使用教程
Visual Studio Code 超详细使用教程
—— 从下载安装到环境配置，再到高效开发（完整版）
一、什么是 Visual Studio Code
Visual Studio Code（简称 VS Code） 是微软推出的一款 免费、开源、跨平台 的代码编辑器。
它不是传统意义上的“IDE”，而是一个高度可扩展的编辑器内核，通过插件（Extension）实现：
多语言开发（Python / Java / C++ / Go / 前端 / Rust 等）
代码补全、语法高亮、格式化
调试（Debug）
Git 版本控制
远程开发（SSH / Docker / WSL）
VS Code 的核心优势
启动快、占用低
插件生态极其丰富
跨平台（Windows / macOS / Linux）
对新手友好，对专业开发者也足够强大
二、VS Code 下载与安装
1. 官方下载地址
进入官网：
点击 Download，系统会自动识别你的操作系统。
支持系统：
Windows 10 / 11
macOS（Intel / Apple Silicon）
Linux（deb / rpm / tar.gz）
2. Windows 安装（详细）
（1）下载版本说明
Windows 有两种常见版本：
User Installer（推荐）
安装到用户目录
不需要管理员权限
System Installer
安装到 Program Files
需要管理员权限
建议新手使用 User Installer
（2）安装步骤
双击
VSCodeUserSetup-x64.exe接受协议
安装路径可默认
重点选项（非常重要）：
勾选以下选项：
☑ 添加到 PATH（Add to PATH）
☑ 在资源管理器中添加“通过 Code 打开”
☑ 在资源管理器右键菜单添加“在此处打开 Code”
这些选项会极大提升使用体验。
点击安装
安装完成后启动 VS Code
3. macOS 安装（详细）
（1）下载 dmg 文件
下载 VSCode-darwin-universal.dmg
（2）安装步骤
打开 dmg
将 Visual Studio Code.app 拖入 Applications
打开 Launchpad → VS Code
（3）命令行启动（可选但强烈推荐）
打开 VS Code：
Cmd + Shift + P输入：
Shell Command: Install 'code' command in PATH回车确认
之后你可以在终端中使用：
code .
4. Linux 安装（以 Ubuntu 为例）
sudo apt update
sudo apt install code
或使用官网 .deb 包。
三、VS Code 界面详解（核心）
首次打开 VS Code，你会看到如下结构：
1. 主界面区域划分
活动栏（最左侧）
文件资源管理器
搜索
Git
运行与调试
扩展
侧边栏
文件树
Git 状态
插件管理
编辑区
打开的代码文件
状态栏（底部）
编码格式
行列号
Git 分支
语言模式
命令面板
Ctrl / Cmd + Shift + PVS Code 的“万能入口”
四、基础操作与核心概念
1. 打开项目（非常重要）
VS Code 的设计理念是：以文件夹为项目
推荐方式
菜单：
文件 → 打开文件夹或终端：
code 项目路径
打开文件夹后：
.vscode/目录会保存项目配置Debug、格式化、插件都可按项目生效
2. 文件编码与换行符
右下角可以看到：
UTF-8CRLF / LF
建议统一：
编码：UTF-8
换行：LF（跨平台友好）
3. 自动保存
设置自动保存：
文件 → 自动保存
或设置中搜索
Auto Save
五、VS Code 插件系统（核心）
1. 插件市场
点击左侧 扩展图标
插件由三部分组成：
插件本体
语言服务器
调试适配器
2. 新手必装插件（通用）
（1）中文界面（可选）
Chinese (Simplified) Language Pack
（2）代码格式化
Prettier（前端）
Black Formatter（Python）
clang-format（C/C++）
（3）代码提示增强
IntelliSense（内置）
Path Intellisense
（4）主题与字体
One Dark Pro
Dracula
GitHub Theme
六、环境配置（重点章节）
一）前端开发环境（HTML / CSS / JS）
1. 安装 Node.js
官网：
安装完成后验证：
node -v
npm -v
2. VS Code 插件
Live Server（本地服务器）
ESLint
Prettier
3. 运行前端项目
npm install
npm run dev
二）Python 开发环境（非常详细）
1. 安装 Python
官网：
安装时 务必勾选：
☑ Add Python to PATH
验证：
python --version
2. VS Code 插件
Python（官方）
Pylance
3. 虚拟环境（强烈推荐）
python -m venv venv
激活：
Windows：
venv\Scripts\activate
macOS / Linux：
source venv/bin/activate
VS Code 会自动识别虚拟环境。
4. 运行 Python
右键 → 在终端中运行
或：
python main.py
三）Java 开发环境
1. 安装 JDK（建议 17）
Oracle JDK / OpenJDK
验证：
java -version
2. VS Code 插件
Extension Pack for Java
3. Maven / Gradle 支持
VS Code 可直接识别 pom.xml / build.gradle
四）C / C++ 开发环境
1. 编译器安装
Windows：MinGW / MSVC
macOS：Xcode Command Line Tools
Linux：gcc / g++
验证：
gcc --version
2. VS Code 插件
C/C++
Code Runner（可选）
七、调试（Debug）机制详解
1. 调试核心概念
断点（Breakpoint）
调试配置（launch.json）
调试控制台
2. Python 调试示例
左侧点击 运行与调试
创建
launch.json选择 Python
点击绿色运行按钮
3. 前端调试
Chrome Debugger
Edge Debugger
支持断点调试 JS
八、Git 与版本控制
1. Git 安装
git --version
2. VS Code Git 功能
文件变更高亮
可视化提交
分支切换
冲突解决
3. 推荐 Git 插件
GitLens（强烈推荐）
九、效率技巧（高手必备）
1. 快捷键
2. 设置同步
登录微软账号：
同步插件
同步设置
同步快捷键
3. settings.json 高级配置
{
"editor.fontSize": 14,
"editor.formatOnSave": true,
"editor.tabSize": 2
}
十、常见问题与排错
1. 插件不生效
检查语言模式
检查是否启用
查看 Output 面板
2. 终端命令无效
PATH 未配置
重启 VS Code
3. 运行慢
禁用不用的插件
使用工作区插件
十一、总结
VS Code 并不是“装完就会用”的工具，它真正的价值在于：
插件组合
环境配置
对开发流程的理解
一旦配置完成，它可以成为：
前端 IDE
Python IDE
Java IDE
C/C++ IDE
运维编辑器
文档编辑器
- 感谢你赐予我前进的力量
-
微信 
支付宝
