跳到主内容
Zhimalab
VSCode 破冰 14 天快速通关
0%
VSCode 破冰

14 天快速通关

从编辑器配置到高效开发工作流,每天一个主题

🎯 14 节课从安装到实战,循序渐进
✍️ 动手任务每课配套实操练习
🧠 即时测验学完就测,巩固记忆
💾 自动保存进度本地持久化

🚀开始你的旅程

VSCode 是全球使用率最高的代码编辑器。这 14 天将带你从零到熟练,掌握大二开发所需的所有核心技能。

📦

环境与配置

安装、界面、设置、快捷键

高效编辑

多光标、搜索替换、代码片段

🐛

调试与工具

断点调试、终端、Git 集成

🧩

扩展生态

精选插件、远程开发、协作

Day 01 · 环境

认识 VSCode 与界面布局

装好编辑器,看懂每一块面板是干什么的

安装配置 下载安装 VSCode,认识四大面板
命令面板 掌握 F1 / Ctrl+Shift+P 这个万能入口
主题定制 切换深浅主题,调整字号

🧭为什么是 VSCode

VSCode(Visual Studio Code)是微软开源的跨平台代码编辑器。它不是 IDE(不自带编译器),却凭借轻量内核 + 扩展生态成为全球使用率最高的编辑器。对大二学生来说,它是写 C/Java/Python/前端的全能选手——一个工具通吃所有课程作业。

📦安装

安装步骤

      # macOS(推荐 Homebrew)brew install --cask visual-studio-code
# Windows / Linux
# 访问 https://code.visualstudio.com 下载安装包
# 安装时务必勾选 "添加到 PATH"
    

🪟界面五大区域

🎯

活动栏

最左侧竖条,切换资源管理器、搜索、Git、调试、扩展

📁

侧边栏

显示当前视图内容,如文件树、扩展列表

📝

编辑区

写代码的主战场,支持多标签页分屏

📉

面板区

终端、问题、输出、调试控制台

🗺️

状态栏

底部显示语言、行列、Git 分支、编码

⌨️第一个必学快捷键:命令面板

命令面板是 VSCode 的灵魂。几乎一切操作都能从这里找到,记不住快捷键时用它搜索。

命令面板

      Ctrl+Shift+P   
# Windows / Linux 打开命令面板Cmd+Shift+P     
# macOS
# 输入 "theme" 切换主题
# 输入 "font size" 调整字号
# 输入 "toggle sidebar" 隐藏侧边栏
    
💡 小技巧命令面板里带 > 的是命令,不带 > 的是文件跳转。直接输入文件名就能快速打开文件。

动手任务

安装 VSCode 并打开它 确认能在终端输入 code . 打开当前文件夹
用命令面板切换到深色主题 搜索 Color Theme,选择 Dark+ (default dark)
在设置中把字号调成 15 命令面板搜 Preferences: Open Settings (UI)

🧠小测验

Q 在 VSCode 中打开命令面板的快捷键是?
A Ctrl+P
B Ctrl+Shift+P
C Ctrl+B
D Ctrl+`
Day 02 · 文件

文件资源管理器与工作区

用文件夹组织项目,理解单文件夹与多根工作区的区别

打开文件夹 学会用 code . 打开项目
文件操作 新建、重命名、删除、拖拽排序
工作区 理解 .code-workspace 的作用

📂打开项目

VSCode 的基本工作单位是「文件夹」。最推荐的方式是在终端里进入项目目录后用 code . 打开。

shell

      # 在终端进入你的项目文件夹cd ~/Desktop/my-projectcode .              
# 用 VSCode 打开当前文件夹code ~/Desktop/my-project   
# 等价写法
    
⚠️ 注意如果终端提示 code: command not found,说明没加入 PATH。macOS 上打开 VSCode → 命令面板 → 搜 "shell command" → 选 "Install 'code' command in PATH"。

🗂️资源管理器操作

操作快捷键 / 方式
新建文件Ctrl+N 或在文件树空白处点右键 → New File
新建文件夹文件树右键 → New Folder
重命名选中文件按 F2
删除选中文件按 Delete
复制文件路径右键 → Copy Path,或 Shift+Alt+C
在文件树中定位当前文件Shift+Alt+R

🏢工作区(Workspace)

当你只打开一个文件夹时,叫「单文件夹模式」。当你需要同时打开多个文件夹(比如前端 + 后端两个目录),用「工作区」。

创建多根工作区

      菜单 File Add Folder to Workspace... 添加多个文件夹后菜单 File Save Workspace As... 保存为 project.code-workspace
    

.code-workspace 文件是一个 JSON,记录了包含哪些文件夹、共享的设置等。下次直接双击它就能恢复整个工作环境。

📌 大二场景做课程大作业时,把「文档」「代码」「参考资料」三个文件夹放进一个工作区,切换自如。

动手任务

在桌面新建一个文件夹 demo,用 code . 打开 练习终端打开方式
在资源管理器中创建 src/main.py 和 README.md 练习嵌套创建:输入 src/main.py 会自动建文件夹
尝试添加第二个文件夹并保存为工作区 File → Add Folder to Workspace

🧠小测验

Q 以下哪个命令能在终端用 VSCode 打开当前目录?
A vscode .
B code .
C open . vscode
D edit .
Day 03 · 编辑

编辑基本功

移动、复制、删除行的套路,让打字变快

行操作 上下移动、复制、删除整行
缩进 Tab / Shift+Tab 调整缩进层级
自动保存 配置文件保存策略

✂️行级编辑

这是你每天会用上百次的操作。练到肌肉记忆。

操作Windows / LinuxmacOS
删除当前行Ctrl+Shift+KCmd+Shift+K
向上移动当前行Alt+Option+
向下移动当前行Alt+Option+
向上复制当前行Shift+Alt+Shift+Option+
向下复制当前行Shift+Alt+Shift+Option+
在下方插入新行Ctrl+EnterCmd+Enter
行首/行尾跳转Home / EndCmd+ /
💡 实用技巧不需要选中整行就能删除/移动——光标停在那行上直接按快捷键即可。这比用鼠标拖选快得多。

📐缩进与格式化

缩进

      # 选中代码后:Tab           
# 增加缩进Shift+Tab     
# 减少缩进
# 格式化整个文档:Shift+Alt+F   
# Windows / LinuxShift+Option+F 
# macOS
# 格式化选中部分:Ctrl+K Ctrl+F
    

💾自动保存

不想每次手动 Ctrl+S?开启自动保存:

settings.json

      {  "files.autoSave": "afterDelay",  "files.autoSaveDelay": 1000}
    

三种模式:off(手动)、afterDelay(停顿 1 秒后自动保存)、onFocusChange(切走时保存)。

动手任务

练习:写 5 行代码,用 Alt+↑/↓ 重新排序 不选中直接移动整行
练习:用 Shift+Alt+↓ 快速复制一行 比 Ctrl+C / Ctrl+V 快
开启 afterDelay 自动保存 命令面板搜 Auto Save

🧠小测验

Q 不选中任何文本时,按 Ctrl+Shift+K(macOS: Cmd+Shift+K)会发生什么?
A 什么都不做
B 删除光标所在整行
C 删除一个单词
D 清空文件
Day 04 · 多光标

多光标编辑术

一个操作改十处,批量编辑的核心技能

多光标 用多种方式创建多个光标
列选择 垂直块选编辑对齐文本
选中相同 Ctrl+D 批量选中相同词

多光标:VSCode 最让人上瘾的功能

想象你同时在 10 个位置打字——这就是多光标。改 10 个变量名,原来要 10 次操作,现在 1 次。

🖱️方式一:Alt+点击 添加光标

按住 Alt(macOS Option),在任意位置点击,就会新增一个光标。可以同时在多处输入。

🔤方式二:Ctrl+D 选中下一个相同词

这是重构变量名的神技。选中一个词,反复按 Ctrl+D,把所有相同词加入选区,然后一次性改名。

multi-cursor

      # 选中一个词后:Ctrl+D          
# 选中下一个相同词 (macOS: Cmd+D)Ctrl+Shift+L  
# 一次性选中所有相同词Ctrl+K Ctrl+D  
# 跳过当前,选下一个Ctrl+U          
# 撤销上一个选区 (回退)
    

📊方式三:列(块)选择

按住 Shift+Alt(macOS Shift+Option)拖动鼠标,或在鼠标中键拖动,可以做垂直矩形选区。适合编辑对齐的表格、批量加注释。

列选择快捷键

      Shift+Alt+拖动鼠标   
# 矩形选区Ctrl+Shift+Alt+↓/↑  
# 键盘列选择 (向下/上加光标)
    

🎯实战演示

把这组变量从 camelCase 改成 snake_case:

改造前 → 改造后

      // 操作:选中 userName,按 Ctrl+D 三次选中全部,
// 然后直接输入新名字 user_namelet userName = getUserName();saveUser(userName);
    
💡 退出多光标Esc 退出多光标模式,回到单光标。

动手任务

写 5 行包含相同变量名的代码,用 Ctrl+D 全部选中并改名 体会一次性编辑的爽感
用 Shift+Alt+拖动 做列选择,给多行同时加 // 注释 批量注释对齐文本
用 Ctrl+Shift+L 一键选中所有相同词 比逐个 Ctrl+D 更快

🧠小测验

Q 你想把文件里所有的 "temp" 改成 "data",最快的方式是?
A 逐个用 Ctrl+F 查找替换
B 选中一个 temp,按 Ctrl+Shift+L,然后直接打字
C 用正则替换
D 没法一次完成
Day 05 · 搜索

搜索、替换与全局重构

在一个文件里找,还是在整个项目里找

文件内搜索 Ctrl+F 查找替换
全局搜索 Ctrl+Shift+F 跨文件搜索
正则与筛选 用正则和文件过滤精准定位

🔍文件内搜索

操作快捷键
查找Ctrl+F(macOS Cmd+F
替换Ctrl+H(macOS Cmd+Option+F
下一个匹配EnterF3
上一个匹配Shift+F3
选中下一个匹配Ctrl+D

🌐全局搜索

整个项目里搜某个函数、变量或字符串——这是你读别人代码时最常用的功能。

global search

      Ctrl+Shift+F   
# 全局搜索 (macOS: Cmd+Shift+F)
    

全局搜索面板顶部有三个高级过滤按钮:

  • 区分大小写(Aa):大小写敏感匹配
  • 全字匹配():只匹配完整单词,不匹配子串
  • 正则表达式(.*):使用正则

还有「包含/排除的文件」输入框,可以按文件类型过滤,比如 *.py, *.js-*.min.js

🔬正则搜索实战

正则示例

      # 查找所有 console.log 语句(方便清理调试代码)console.log(.*)
# 查找所有 TODO 注释//s*TODO.*
# 查找手机号(简单版)1[3-9]d{9}
    
⚠️ 替换前先预览全局替换前,VSCode 会显示所有匹配项。务必浏览一遍确认无误,尤其是用正则时——一个错误的正则可能改坏几十个文件。可以利用每个结果旁的「排除此结果」按钮逐个筛选。

🔗符号搜索

跳转到某个函数/类的定义:

符号跳转

      Ctrl+Shift+O   
# 当前文件的符号 (函数/类) 列表Ctrl+T       
# 全工作区符号搜索F12        
# 跳转到光标处符号的定义Alt+F12      
#  peek 窥视定义 (不跳转,弹窗预览)
    

动手任务

在一个文件里用 Ctrl+F 搜索,然后逐个用 Ctrl+D 选中修改 结合搜索和多光标
用 Ctrl+Shift+F 全局搜索 "TODO",看看项目里有哪些待办 练习全局搜索 + 文件过滤
用正则搜索找出所有 console.log 语句 为日后清理调试代码做准备

🧠小测验

Q 你想在整个项目里搜索,应该用哪个快捷键?
A Ctrl+F
B Ctrl+Shift+F
C Ctrl+P
D Ctrl+G
Day 06 · 终端

集成终端

不离开编辑器就能跑命令

打开终端 Ctrl+` 调出集成终端
多终端 开多个终端、分屏
常用命令 编译运行 C/Java/Python

💻集成终端

VSCode 内置终端,不用再开一个 Terminal/iTerm 窗口。写代码、编译、运行、Git 操作——一站式完成。

terminal

      Ctrl+`          
# 打开/关闭终端 (macOS: Ctrl+`)Ctrl+Shift+`   
# 新建一个终端实例
    

🔀多终端与分屏

终端面板右侧有 + 新建终端、拆分 图标分屏。可以在一个跑服务器,另一个跑测试,互不干扰。

操作方式
新建终端+Ctrl+Shift+`
分屏终端点拆分图标,或终端存在时按 Ctrl+Shift+5
切换终端下拉菜单选择,或 Alt+↑/↓
关闭终端点垃圾桶图标
终端/编辑区焦点切换Ctrl+Shift+↑/↓

⚙️编译运行课程作业

C 语言

      # 编译gcc main.c -o main -Wall
# 运行./main
    
Java

      # 编译javac HelloWorld.java
# 运行 (注意不带 .class)java HelloWorld
    
Python

      # 直接运行python3 main.py
# 交互式python3 -i main.py
    
💡 终端技巧终端默认使用系统 shell(macOS 是 zsh)。可以改成 bash、PowerShell 等。命令面板搜 "Terminal: Select Default Profile"。

🎨推荐终端配置

settings.json

      {  "terminal.integrated.fontSize": 14,  "terminal.integrated.scrollback": 10000,  "terminal.integrated.copyOnSelection": true}
    

动手任务

用 Ctrl+` 打开终端,输入 ls 和 pwd 看看当前在哪 确认终端工作目录就是项目文件夹
写一个 hello.c,在终端里 gcc 编译并运行 练习 编译→运行 全流程
分屏开两个终端:一个跑程序,一个看输出 体会多终端并行

🧠小测验

Q VSCode 集成终端的默认打开快捷键是?
A Ctrl+T
B Ctrl+`
C Ctrl+Shift+T
D Alt+T
Day 07 · Git

版本控制:Git 集成

提交、对比、解决冲突,不碰命令行

源代码管理 用界面完成 add/commit/push
差异对比 看懂改动、暂存部分修改
分支管理 创建/切换分支,解决合并冲突

🌿VSCode 的 Git 能力

VSCode 内置 Git 支持,不需要装扩展。左侧活动栏第二个图标(源代码管理)就是它。大部分日常 Git 操作都能用图形界面完成。

📝提交三步曲

  1. 修改文件:编辑后,文件名会变成 黄色(已修改)或 绿色(新增)
  2. 暂存:在源代码管理面板,点文件旁的 + 号暂存(相当于 git add
  3. 提交:在输入框写提交信息,按 Ctrl+Enter 提交(相当于 git commit
💡 暂存 vs 提交暂存区(Staging)让你只提交想提交的那部分改动。双击文件可以查看完整的差异对比。

📊差异对比

点击源代码管理面板里的文件,会打开差异视图:左边是旧版本(红色底纹表示删除),右边是新版本(绿色底纹表示新增)。这是审查自己改动的好习惯。

操作快捷键
查看差异点击文件名
暂存单个文件+Ctrl+Shift+G 后操作
暂存选中代码块在差异视图中右键 → Stage Selected Ranges
撤销改动 图标(危险!会丢弃未提交的修改)

🔀分支与同步

状态栏左下角显示当前分支名,点击它可以创建/切换分支。旁边的 ↑↓ 数字表示领先/落后远程的提交数,点同步图标即可 push/pull。

分支操作

      # 状态栏左下角:  main ↓2 ↑1    
# 落后远程2个提交,领先1个
# 点击分支名 → 创建/切换分支
# 点击同步图标 (↻) → git pull + git push
    

⚔️解决合并冲突

当 pull 时遇到冲突,VSCode 会在冲突处显示四个按钮:

冲突解决选项

      <<<<<<< HEAD你的改动=======远程的改动>>>>>>> branch-name
# VSCode 提供 4 个按钮:Accept Current  
# 只保留你的Accept Incoming 
# 只保留远程的Accept Both     
# 两个都保留Compare         
# 对比两个版本
    

解决后保存,再提交即可。

⚠️ 大二避坑做小组大作业时,每次开始写代码前先 git pull,写完尽快 commit + push。别攒一堆改动最后再传——冲突会要你命。

动手任务

在项目里 git init,创建一个仓库 终端运行 git init,然后用 VSCode 打开
修改文件后在源代码管理面板完成一次 add + commit 不碰命令行,纯界面操作
故意制造一个冲突并解决它 修改同一行后 pull,体验冲突解决流程

🧠小测验

Q 在 VSCode 源代码管理面板中,点文件旁的 "+" 号相当于哪个 Git 命令?
A git commit
B git add
C git push
D git stash
Day 08 · 扩展

扩展生态精选

装对插件,VSCode 才是完整的

安装扩展 从市场搜索安装插件
必装清单 认识大二学生最该装的 10 个扩展
语言包 中文语言包与各语言支持

🧩扩展市场

左侧活动栏最后一个图标(方块形)就是扩展市场。VSCode 之所以强大,因为有数万个扩展。但别贪多——装太多会拖慢编辑器。下面是大二学生的精选清单。

必装扩展 Top 10

🎨

Chinese Language Pack

中文界面包,装完重启即生效

🌈

Prettier

代码格式化工具,支持 JS/HTML/CSS/JSON

🔧

ESLint

JS/TS 代码检查,红线标错

🐍

Python

微软官方 Python 扩展,调试+智能提示

Extension Pack for Java

Java 全家桶,含调试、Maven、测试

⚙️

C/C++

微软官方 C/C++ 支持,含调试

🏷️

GitLens

每行代码显示谁在什么时候改的

🤝

Live Server

前端本地服务器,保存即刷新

⟩⟩⟩

Path Intellisense

文件路径自动补全

📐

indent-rainbow

缩进彩色显示,看清嵌套层级

🔍如何挑选扩展

  • 看安装量:超过百万级的基本靠谱
  • 看最近更新:超过一年没更新的慎装
  • 看评分:低于 3 星的避开
  • 看作者:微软(Microsoft)、各语言官方出的优先

📦语言支持扩展

VSCode 默认只内置 JS/TS 的完整支持。其他语言需要装对应扩展才能获得智能提示、调试等功能:

语言推荐扩展能力
PythonPython (ms-python)智能提示、调试、Jupyter
JavaExtension Pack for Java全套:调试、Maven、重构
C/C++C/C++ (ms-vscode)智能提示、调试(需装编译器)
HTML/CSSLive Server + 内置实时预览、Emmet 缩写
MarkdownMarkdown All in One快捷键、目录、预览
⚠️ 别装太多扩展越多,VSCode 启动越慢。每个扩展都会占内存。装完后如果卡,在扩展列表里禁用不常用的。

🚫禁用与卸载

在扩展列表里,每个扩展右侧可以「禁用」(临时关闭)或「卸载」(彻底删除)。也可以针对某个工作区单独启用/禁用扩展。

动手任务

安装 Chinese Language Pack 并重启 VSCode 界面变成中文
根据你的课程安装对应语言扩展(C/Java/Python) 至少装一个
安装 GitLens,打开一个 Git 项目,把鼠标悬停在代码行上看作者信息 体验 blame 功能

🧠小测验

Q 装了很多扩展后 VSCode 变卡了,最合理的做法是?
A 全部卸载重装
B 禁用不常用的扩展,只保留必要的
C 换一台电脑
D 卸载 VSCode
Day 09 · 调试

调试器入门

别再用 print 调试了,学会打断点

断点 打断点、条件断点
单步执行 Step Over / Into / Out
变量监视 查看变量值、调用栈

🐛为什么用调试器

大二学生最爱用 printf / System.out.println 调试——每次改一行重新编译,效率极低。调试器让你暂停程序、逐行执行、随时查看变量值,是专业开发的基本功。

🔴打断点

在代码行号左侧的空白处点一下,会出现一个红点——这就是断点。程序运行到这行会自动暂停。

断点操作

      # 普通断点:点行号左侧空白
# 条件断点:右键行号空白 → Add Conditional Breakpoint
#   表达式为 true 时才暂停,如: i == 50
# 日志断点:右键 → Add Logpoint
#   不暂停,只打印消息(替代 print 调试)F9   
# 切换当前行断点
    

▶️启动调试

F5 启动调试。第一次会让你选环境(如 Python、C++ (GDB))。VSCode 会生成一个 .vscode/launch.json 配置文件。

操作快捷键说明
开始/继续F5运行到下一个断点
单步跳过F10执行当前行,不进入函数内部
单步进入F11进入函数内部逐行执行
单步跳出Shift+F11执行完当前函数,回到调用处
停止Shift+F5结束调试
重启Ctrl+Shift+F5重新开始调试

👁️调试面板四大区

📊

变量 Variables

当前作用域内所有变量的值,自动更新

👀

监视 Watch

手动添加表达式,持续监控其值

📞

调用栈 Call Stack

显示函数调用链,点哪层跳哪层

🔌

断点 Breakpoints

所有断点列表,可逐个启用/禁用

🐍Python 调试配置示例

.vscode/launch.json

      {  "version": "0.2.0",  "configurations": [    {      "name": "Python: Current File",      "type": "python",      "request": "launch",      "program": "${file}",      "console": "integratedTerminal",      "justMyCode": true    }  ]}
    
💡 条件断点超有用循环跑 1000 次时,想看第 500 次的状态?给断点加条件 i == 500,程序只在第 500 次暂停。比 print 一千次高效得多。

动手任务

写一个有 for 循环的 Python 程序,在循环内打断点 按 F5 启动调试,用 F10 单步执行
给断点加条件 i==5,只在第 5 次循环暂停 体验条件断点的威力
在变量面板查看循环变量值,尝试加入 Watch 监视 理解变量监视机制

🧠小测验

Q 你想逐行执行代码但不进入函数内部,应该按哪个键?
A F5
B F10 (Step Over)
C F11 (Step Into)
D F9
Day 10 · 效率

代码片段与 Emmet

少打字多办事:自定义代码模板

代码片段 创建自定义代码模板
Emmet HTML/CSS 缩写展开
Tab 补全 用 Tab 快速插入代码

✂️代码片段(Snippets)

总有那么几段代码你反复写——main 函数、for 循环、类模板。把它们存成「代码片段」,输入几个字母按 Tab 就展开。这是减少重复打字的利器。

📝创建自定义片段

命令面板搜 "Configure User Snippets",选语言(如 python.json)。语法是 JSON:

python.json — 用户代码片段

      {  "Print debug": {    "prefix": "pdb",    "body": [      "print(f'{$1} = {$1}')",      "$2"    ],    "description": "快速打印变量调试"  },  "For loop": {    "prefix": "ffor",    "body": [      "for ${1:i} in range(${2:10}):",      "    ${3:pass}"    ]  }}
    

输入 pdb 按 Tab,就会展开。其中 $1$2占位符——按 Tab 在占位符之间跳转,省去鼠标移动。

💡 占位符语法$1 是第一个光标位置;${1:默认值} 带默认文本;$0 是最终光标位置。

Emmet:前端缩写神器

写 HTML/CSS 时,VSCode 内置 Emmet。输入缩写按 Tab,自动展开成完整代码。

emmet 缩写 → 展开

      # 输入下面缩写后按 Tab:div.container
 <div class="container"></div>ul>li*3
 <ul>     <li></li>     <li></li>     <li></li>   </ul>button.btn.btn-primary{点击我}
 <button class="btn btn-primary">点击我</button>
# CSS 缩写:m10 → margin: 10px;p20-30 → padding: 20px 30px;d:f → display: flex;
    

🔤Emmet 语法速查

语法含义示例
#iddiv#header
.classp.text-center
>子元素ul>li
+兄弟元素h1+p
*重复 N 次li*5
{}文本内容a{首页}
()分组(div>p)*3

动手任务

创建一个 Python 代码片段:输入 main 展开 if __name__ == "__main__": 减少重复输入
创建一个 C 代码片段:输入 inc 展开 #include <stdio.h> 练习 snippet 占位符
在 HTML 文件里用 Emmet 输入 nav>ul>li*4>a{链接} 按 Tab 体验前端缩写的威力

🧠小测验

Q Emmet 缩写 "ul>li*3" 按 Tab 后会展开成什么?
A 一个 ul 包含 3 个 li
B 三个 ul 各含一个 li
C 三个 ul li 文本
D 报错
Day 11 · 定制

设置、快捷键与自定义

把 VSCode 调成你自己的样子

设置 settings.json 的结构
快捷键 查看和修改快捷键绑定
用户级 vs 工作区级 理解设置的作用域

⚙️两种设置界面

VSCode 的设置有两种打开方式:图形界面(Settings UI)和JSON 文件(settings.json)。新手用 UI,进阶用 JSON——因为 JSON 可以批量修改、注释、版本管理。

打开设置

      Ctrl+,                    
# 打开设置 UICtrl+Shift+P → "Open Settings (JSON)"  
# 打开 JSON
    

🏢设置的作用域

层级文件位置作用范围
用户级 User~/.config/.../settings.json所有项目共享
工作区级 Workspace项目/.vscode/settings.json仅当前项目
文件夹级 Folder多根工作区中每个文件夹仅该文件夹

工作区设置会覆盖用户设置。比如你给某个项目单独设大字号、指定 Python 解释器路径。

📋推荐配置

settings.json 推荐项

      {  
// 编辑器  "editor.fontSize": 15,  "editor.fontFamily": "'JetBrains Mono', Consolas, monospace",  "editor.tabSize": 4,  "editor.formatOnSave": true,  "editor.minimap.enabled": false,  "editor.wordWrap": "on",  
// 文件  "files.autoSave": "afterDelay",  "files.trimTrailingWhitespace": true,  
// 终端  "terminal.integrated.fontSize": 14,  
// 搜索  "search.exclude": {    "**/node_modules": true,    "**/.git": true,    "**/dist": true  }}
    

🎹快捷键

VSCode 所有快捷键都能查看和自定义。命令面板搜 "Keyboard Shortcuts",或按 Ctrl+K 然后 Ctrl+S

快捷键文件

      # 打开快捷键设置Ctrl+K Ctrl+S
# keybindings.json 中自定义示例:[  {    "key": "ctrl+shift+c",    "command": "editor.action.commentLine",    "when": "editorTextFocus"  }]
    

🔌快捷键速查卡(高频)

功能Windows/LinuxmacOS
命令面板Ctrl+Shift+PCmd+Shift+P
快速打开文件Ctrl+PCmd+P
侧边栏开关Ctrl+BCmd+B
终端开关Ctrl+`Ctrl+`
注释切换Ctrl+/Cmd+/
格式化Shift+Alt+FShift+Option+F
查找Ctrl+FCmd+F
分屏Ctrl+\Cmd+\
关闭标签Ctrl+WCmd+W
📌 中键点击标签页用鼠标中键点击编辑器标签页可以直接关闭它,不用去找 × 号。

动手任务

打开 settings.json,添加 formatOnSave: true 保存时自动格式化
关闭右侧缩略图(minimap) "editor.minimap.enabled": false
用 Ctrl+K Ctrl+S 打开快捷键设置,搜索一个你想改的快捷键 尝试修改注释快捷键

🧠小测验

Q 工作区设置和用户设置冲突时,哪个优先?
A 用户设置
B 工作区设置
C 报错
D 随机生效
Day 12 · 工作区

多根工作区与项目配置

一个窗口管多个项目,团队配置共享

多根工作区 同时管理多个项目文件夹
.vscode 目录 理解项目级配置文件
共享配置 团队间统一开发环境

🏢多根工作区

当你同时开发前端和后端,或者做课程大作业要同时看文档和代码——多根工作区让你在一个窗口里管理多个文件夹。

创建多根工作区

      # 方法一:菜单File → Add Folder to Workspace... → 选第二个文件夹File → Save Workspace As... → 保存为 my-project.code-workspace
# 方法二:命令行code folder1 folder2   
# 同时打开多个文件夹
    
my-project.code-workspace

      {  "folders": [    { "path": "frontend" },    { "path": "backend" },    { "path": "docs" }  ],  "settings": {    "editor.fontSize": 15  }}
    

📁.vscode 目录

每个项目文件夹下可以有一个 .vscode 目录,存放项目级配置:

文件作用
settings.json项目设置(字号、语言模式等)
launch.json调试配置
tasks.json自定义任务(编译、运行脚本)
keybindings.json项目级快捷键
extensions.json推荐扩展列表

🔨自定义任务(Tasks)

把常用的编译/运行命令存成「任务」,一键执行。按 Ctrl+Shift+B 运行默认构建任务,或 Ctrl+Shift+P → "Run Task"。

.vscode/tasks.json

      {  "version": "2.0.0",  "tasks": [    {      "label": "build C",      "type": "shell",      "command": "gcc",      "args": ["${file}", "-o", "${fileDirname}/${fileBasenameNoExtension}", "-Wall"],      "group": { "kind": "build", "isDefault": true },      "problemMatcher": ["$gcc"]    }  ]}
    

之后按 Ctrl+Shift+B 就自动编译当前 C 文件,错误还能在「问题」面板里点击跳转。

👥团队共享配置

.vscode 目录提交到 Git,团队成员 clone 后就能获得相同的任务、调试配置和推荐扩展。

.vscode/extensions.json

      {  "recommendations": [    "ms-python.python",    "esbenp.prettier-vscode"  ]}
    

队友打开项目时,VSCode 会提示安装推荐的扩展。

⚠️ 别提交敏感信息如果 settings.json 里有本地路径、密码等,加进 .gitignore。只提交可共享的配置。

动手任务

创建一个多根工作区,包含代码和文档两个文件夹 保存为 .code-workspace 文件
为 C 项目创建 tasks.json,配置一键编译 按 Ctrl+Shift+B 测试
创建 extensions.json,推荐团队必装扩展 模拟团队协作配置共享

🧠小测验

Q .vscode 目录下的 tasks.json 主要用于什么?
A 存放用户密码
B 定义可一键执行的编译/运行任务
C 记录 Git 提交
D 保存主题颜色
Day 13 · 远程

远程开发与 Live Share

在服务器上写代码,或和同学实时协作

Remote-SSH 连接远程服务器开发
Dev Containers 用 Docker 容器统一环境
Live Share 实时多人协作编辑

🌐Remote - SSH

大二做实验经常要连学校服务器,以前靠 SSH + Vim 套餐,体验痛苦。VSCode 的 Remote-SSH 扩展让你用本地 VSCode 界面编辑远程文件——智能提示、调试、终端全部在远程跑。

使用流程

      # 1. 安装扩展:Remote - SSH (ms-vscode-remote.remote-ssh)
# 2. 命令面板 → Remote-SSH: Connect to Host
# 3. 输入 ssh user@hostname
# 4. VSCode 会在远程安装一个 server 组件
# 5. 连上后,File → Open Folder 打开远程目录
    
~/.ssh/config 配置(可选)

      Host school-server  HostName 192.168.1.100  User student  Port 22  IdentityFile ~/.ssh/id_rsa
    

配置好后,连接时直接选 school-server 别名即可。

🐳Dev Containers

「在我电脑上能跑」是经典甩锅。Dev Containers 用 Docker 把整个开发环境(编译器、依赖、工具链)打包成容器,保证所有人环境一致。

📌 大二场景操作系统课、数据库课的实验环境各不相同。老师把环境做成容器镜像,学生 pull 下来就能用,省去配环境的时间。
.devcontainer/devcontainer.json

      {  "name": "C Dev Environment",  "image": "gcc:latest",  "extensions": ["ms-vscode.cpptools"],  "postCreateCommand": "gcc --version"}
    

🤝Live Share:实时协作

Live Share 是 VSCode 的实时多人协作功能——类似 Google Docs 的协作,但是写代码。一个人开「会话」,其他人加入,大家同时编辑同一个文件,还能看到彼此的光标。

Live Share 使用

      # 1. 安装扩展:Live Share (ms-vsliveshare.vsliveshare)
# 2. 点击状态栏/活动栏的 Live Share 图标
# 3. "Share" 生成一个链接,发给同学
# 4. 同学点链接,在浏览器/VSCode 中加入
# 5. 双方实时编辑,可共享终端和服务器调试
    
💡 大作业神器小组做项目时,一个人写代码其他人实时围观指正,或两人结对编程。比共享屏幕流畅得多。

🔗三种远程方式对比

方式场景需要
Remote-SSH连远程服务器开发SSH 访问权限
Dev Containers统一开发环境本地装 Docker
Remote-Containers (WSL)Windows 上跑 LinuxWSL2
Live Share实时多人协作网络 + Live Share 扩展

动手任务

安装 Remote - SSH 扩展,尝试连接一台服务器(或虚拟机) 体验远程开发
安装 Live Share,和一个同学互相分享会话编辑代码 体验实时协作
了解 Dev Containers,如果已装 Docker 可以试着创建一个 为日后统一环境做准备

🧠小测验

Q Live Share 的核心功能是?
A 远程连接服务器
B 多人实时协作编辑同一份代码
C 运行 Docker 容器
D 代码版本对比
Day 14 · 实战

综合实战:搭建一个完整开发流

把前 13 天学的东西串起来,跑通一个真项目

全流程 从建项目到调试的完整链路
配置沉淀 沉淀可复用的配置模板
毕业 拿到通关徽章

🏆终极任务:从零搭建一个 Python 小项目

用这 14 天学到的全部技能,完整走一遍专业开发流程。我们搭一个简单的「待办事项」命令行程序。

1️⃣Step 1:建项目骨架

终端操作

      mkdir todo-cli && cd todo-cligit initcode .   
# 用 VSCode 打开
    

在资源管理器中创建文件结构:

项目结构

      todo-cli/├── .vscode/│   ├── launch.json      
# 调试配置│   ├── tasks.json       
# 运行任务│   └── settings.json    
# 项目设置├── main.py              
# 程序入口├── todo.py              
# 核心逻辑└── README.md            
# 说明文档
    

2️⃣Step 2:写核心代码

todo.py

      class TodoList:    def __init__(self):        self.items = []    def add(self, text):        self.items.append({"text": text, "done": False})        print("f"Added: {text}"")    def complete(self, index):        if 0 len(self.items):            self.items[index]["done"] = True            print("f"Completed: {self.items[index]['text']}"")    def show(self):        for i, item in enumerate(self.items):            mark = "✓" if item["done"] else "○"            print("f"{i}. [{mark}] {item['text']}"")
    

3️⃣Step 3:配置调试器

F5 选 Python,自动生成 launch.json。修改让它接收命令行参数:

.vscode/launch.json

      {  "version": "0.2.0",  "configurations": [{    "name": "Debug Todo",    "type": "python",    "request": "launch",    "program": "${workspaceFolder}/main.py",    "args": ["add", "写完作业"],    "console": "integratedTerminal"  }]}
    

4️⃣Step 4:调试 + Git 全流程

  1. 打断点:在 add 方法第一行打断点
  2. 启动调试:按 F5,程序暂停在断点
  3. 单步执行:用 F10 逐行看变量变化
  4. 查看变量:在变量面板观察 self.items 的变化
  5. 提交代码:源代码管理面板 → 暂存 → 写信息 → 提交
  6. 配置任务:tasks.json 配 python3 main.py 一键运行

5️⃣Step 5:效率检查清单

对照下面这组清单,看看你是否真的把这 14 天融会贯通了:

✅ 用命令面板切换主题、改设置
✅ 多光标批量修改变量名
✅ 全局搜索找到所有 TODO
✅ 集成终端运行程序
✅ 调试器打断点单步执行
✅ Git 提交用界面完成 add+commit
✅ 代码片段自定义快速输入
✅ tasks.json一键运行任务
🎓 恭喜!完成这一关,你已经超过 80% 还在用记事本 + print 调试的同学。VSCode 的深度远不止此——保持好奇心,遇到重复操作就搜「有没有更快的方式」。

🚀下一步方向

  • 深入某语言:针对你的主攻语言(C/Java/Python),钻研对应的调试、测试、LSP 配置
  • AI 辅助编程:安装 GitHub Copilot / Codeium,体验 AI 补全
  • 主题美化:尝试 One Dark Pro、Material Icon Theme 等热门主题
  • Vim 模式:装 Vim 扩展,学习键盘流编辑(进阶)
  • 自定义扩展:用 TypeScript 写一个自己的扩展(高阶)

动手任务

按教程完整搭建 todo-cli 项目,写完代码 真正动手写,别只看
用调试器打断点跑一遍程序,观察变量变化 把调试流程走通
完成 Git 提交,并把 .vscode 配置也提交 沉淀可复用的项目模板
对照效率检查清单,逐项确认你已掌握 查漏补缺

🧠小测验

Q 完成这 14 天后,遇到重复操作最该养成什么习惯?
A 继续手动重复
B 搜「有没有更快的方式」
C 换一个编辑器
D 放弃
🎉

14 天通关完成!

你已经从 VSCode 新手成长为高效开发者。继续保持,工具是杠杆——你越熟练,它越强大。