VS Code 实用快捷键与功能设置完全指南

🗺️ 关闭右侧小地图 (Minimap)

你框出的就是这个 Minimap！

const

contextSlider = document.getElementById('contextSlider');

const

sliderValue = document.getElementById('sliderValue');

function

updateDemo() {
const value = parseInt(contextSlider.value);
}

Minimap

🛠️ 关闭 Minimap 的几种方法：

快捷键方式：
按 Ctrl + Shift + P → 输入 "minimap" → 选择 "切换缩略图"

菜单方式：
文件 → 首选项 → 设置 → 搜索 "editor.minimap.enabled" → 取消勾选

快捷设置：
按 Ctrl + , 打开设置 → 搜索 "minimap" → 关闭相关选项

⌨️ VS Code 实用快捷键大全

Windows / Linux

macOS

✏️ 编辑操作

复制当前行 Ctrl + C

剪切当前行 Ctrl + X

删除当前行 Ctrl + Shift + K

复制行向下 Shift + Alt + ↓

移动行向上 Alt + ↑

多光标选择 Ctrl + Alt + ↓

🔍 查找替换

查找 Ctrl + F

替换 Ctrl + H

全局搜索 Ctrl + Shift + F

查找下一个 F3

选择所有匹配项 Ctrl + Shift + L

📁 文件操作

新建文件 Ctrl + N

打开文件 Ctrl + O

保存文件 Ctrl + S

快速打开文件 Ctrl + P

关闭当前标签 Ctrl + W

🎨 代码格式化

格式化文档 Shift + Alt + F

格式化选择 Ctrl + K, Ctrl + F

代码折叠 Ctrl + Shift + [

代码展开 Ctrl + Shift + ]

注释切换 Ctrl + /

🧭 导航跳转

转到定义 F12

返回上一位置 Alt + ←

转到行 Ctrl + G

切换标签页 Ctrl + Tab

分屏编辑 Ctrl + \

💻 终端调试

打开终端 Ctrl + `

新建终端 Ctrl + Shift + `

运行代码 F5

设置断点 F9

🚀 高级编辑

重命名符号 F2

快速修复 Ctrl + .

触发建议 Ctrl + Space

显示悬停信息 Ctrl + K, Ctrl + I

参数提示 Ctrl + Shift + Space

🎯 选择操作

选择全部 Ctrl + A

选择当前单词 Ctrl + D

选择当前行 Ctrl + L

扩展选择 Shift + Alt + →

收缩选择 Shift + Alt + ←

列选择模式 Shift + Alt + 鼠标

👁️ 视图切换

切换侧边栏 Ctrl + B

切换资源管理器 Ctrl + Shift + E

切换搜索面板 Ctrl + Shift + F

切换Git面板 Ctrl + Shift + G

切换调试面板 Ctrl + Shift + D

切换扩展面板 Ctrl + Shift + X

全屏模式 F11

禅模式 Ctrl + K, Z

🏢 工作区管理

打开文件夹 Ctrl + K, Ctrl + O

新建窗口 Ctrl + Shift + N

关闭窗口 Ctrl + Shift + W

重新加载窗口 Ctrl + R

切换工作区 Ctrl + Alt + P

🌿 Git操作

Git提交 Ctrl + Enter

Git同步 Ctrl + Shift + P → Git: Sync

查看Git历史 Ctrl + Shift + P → Git: View History

Git暂存 Ctrl + Shift + P → Git: Stage

⚙️ 实用功能设置

🎛️ 推荐的VS Code设置优化

自动保存设置：
文件 → 首选项 → 设置 → 搜索 "auto save" → 选择 "afterDelay"

字体设置：
推荐字体：Fira Code, Cascadia Code, JetBrains Mono (支持连字)

主题推荐：
One Dark Pro, Material Theme, Dracula Official, GitHub Theme

格式化设置：
启用 "Format On Save" 和 "Format On Paste"

💡 快速设置技巧

按 Ctrl + , 快速打开设置，或者按 Ctrl + Shift + P 输入 "settings" 来访问各种设置选项。

📝 推荐的 settings.json 配置：

{ "editor.fontSize": 14, "editor.fontFamily": "Fira Code, Consolas, monospace", "editor.fontLigatures": true, "editor.tabSize": 2, "editor.insertSpaces": true, "editor.wordWrap": "on", "editor.minimap.enabled": false, "editor.formatOnSave": true, "editor.formatOnPaste": true, "editor.codeActionsOnSave": { "source.organizeImports": true }, "files.autoSave": "afterDelay", "files.autoSaveDelay": 1000, "workbench.colorTheme": "One Dark Pro", "workbench.iconTheme": "material-icon-theme", "terminal.integrated.fontSize": 13, "explorer.confirmDelete": false, "git.autofetch": true }

🧩 必装扩展推荐

🚀 生产力提升扩展

📦 Auto Rename Tag

自动重命名配对的HTML/XML标签，提高编辑效率

🎨 Prettier - Code formatter

强大的代码格式化工具，支持多种语言

🔍 GitLens

增强Git功能，显示代码作者、提交历史等信息

📁 Path Intellisense

文件路径自动补全，减少输入错误

🌈 Bracket Pair Colorizer

为匹配的括号添加颜色，提高代码可读性

⚡ Live Server

本地开发服务器，实时预览HTML页面

🎯 IntelliSense for CSS class names

CSS类名智能提示，基于工作区中的CSS文件

📊 REST Client

在VS Code中直接测试REST API，无需额外工具

💡 生产力提升技巧

🎯 高效编码技巧

🔥 多光标编辑

按住 Alt 点击多个位置创建多个光标，或使用 Ctrl + D 选择相同单词进行批量编辑。

📝 代码片段 (Snippets)

创建自定义代码片段来快速插入常用代码模板。文件 → 首选项 → 配置用户代码片段。

🔍 命令面板

Ctrl + Shift + P 打开命令面板，快速访问所有VS Code功能，无需记住复杂的菜单路径。

📂 工作区管理

使用工作区功能管理多个相关项目，保存特定的设置和扩展配置。

🎨 Emmet 缩写

使用Emmet快速生成HTML和CSS代码。例如：div.container>ul>li*5 然后按Tab。

🔧 任务自动化

配置tasks.json来自动化构建、测试等任务，使用 Ctrl + Shift + P → "Tasks: Run Task"。

📱 同步设置

启用设置同步功能，在不同设备间同步你的VS Code配置、扩展和快捷键。

📋 快速参考卡片

🔥 最常用的10个快捷键Ctrl + P - 快速打开文件
Ctrl + Shift + P - 命令面板
Ctrl + D - 选择相同单词
Alt + ↑/↓ - 移动行
Shift + Alt + ↓ - 复制行
Ctrl + / - 切换注释
Ctrl + ` - 打开终端
Ctrl + B - 切换侧边栏
F12 - 转到定义
Ctrl + Shift + K - 删除行

⚡ VS Code 实用指南