今天你就是VS Code之神！15个隐藏技巧让代码效率翻倍

无需复杂配置，跟着步骤操作，新手也能快速上手；老用户能发现隐藏功能，彻底摆脱 "鼠标点点点" 的低效模式，让写代码更流畅、更省心！

PS：已经会了？看看目录👉，查缺补漏~

1. 点开新文件的时候会替换掉原来的文件Tabs

VSCode每次点开一个新的文件，都会替换掉原来点开的文件Tabs，双击该Tabs才会常驻。 修改为始终常驻的方法如下。

步骤：

1. 点击左下角的设置按钮打开设置页面（快捷键ctrl+，），搜索show tabs，找到Workbench > Editor:Show Tabs，勾选该项
2. 搜索Workbench.editor.enablePreview，取消勾选该项

2. 目录仅有一个下级文件时与上级并列显示了

VSCode当目录里仅有一个下级文件夹时，点击查看，子文件夹和父文件夹并列了，不利于拖动粘贴。

步骤：

1. 打开设置页面（快捷键 Ctrl + , ），在搜索框中输入 compact folders。
2. 找到 Workbench > Tree: Compact Folders 这一项，取消勾选该选项。
3. 设置完成后无需重启，文件目录会立即恢复正常层级，单层子目录会嵌套在父目录下，可直接进行拖动、粘贴等操作。

3. 快速定位并打开文件

在项目文件较多时，手动逐层找文件效率低，可通过快捷键快速搜索并打开目标文件。

搜索文件

1. 按下快捷键 Ctrl + P，调出"快速打开"搜索框。
2. 在搜索框中输入文件名（无需完整输入，支持模糊匹配）。
3. 从搜索结果中选中目标文件，按回车键即可直接打开，无需手动导航目录。

最近打开过的文件

1. 按下快捷键 Ctrl + R，调出列表框。
2. 从搜索结果中选中目标文件，按回车键即可直接打开

4. 代码自动保存

VSCode默认需要手动按Ctrl+S保存代码，忘记保存时关闭文件或软件会丢失内容。设置自动保存可解决该问题。

步骤：

1. 打开设置页面（快捷键 Ctrl + , ），搜索 Auto Save。
2. 在 Workbench > Editor: Auto Save 下拉菜单中选择保存方式，推荐以下两种：
   • afterDelay：编辑停止后延迟1-3秒自动保存，平衡实时性和性能。
   • onFocusChange：切换到其他窗口或文件时自动保存，适合频繁切换操作的场景。
3. 若选择afterDelay，可继续搜索 Auto Save Delay，设置延迟时间（默认1000毫秒，即1秒，可按需调整）。

5. 复制移动与选中代码行

向上/下复制当前行

无需选中整行，直接复制当前行内容到相邻位置，适合快速复用代码：

• 向上复制 ：光标定位到目标行，按下快捷键 Shift + Alt + ↑（上箭头），当前行会复制并插入到上方。
• 向下复制 ：按下 Shift + Alt + ↓（下箭头），当前行会复制并插入到下方。

向上/下移动当前行

调整代码顺序时，无需剪切粘贴，直接移动整行：

• 向上移动 ：光标定位到目标行，按下 Alt + ↑，当前行会整体移至上方一行。
• 向下移动 ：按下 Alt + ↓，当前行会整体移至下方一行。

快速选中当前行

无需拖动鼠标选中整行，一键选中提高效率：

• 光标定位到目标行任意位置，按下 Ctrl + L，即可选中当前整行；连续按 Ctrl + L 可继续选中下一行。

6. 查找函数/变量的所有引用

想知道一个函数或变量在哪些地方被调用？无需全局搜索，用"查找所有引用"精准定位：

步骤：

1. 光标点击目标函数名、变量名或类名（确保光标在名称上，无需选中）。
2. 按下快捷键 Shift + F12，或右键选择"查找所有引用"。
3. 左侧会弹出引用列表面板，显示所有引用位置（包括文件名和行号），点击列表项可直接跳转到对应位置。
4. 若需在当前文件内快速查看引用，面板中会用颜色标记出当前文件的引用位置，一目了然。

7. 函数跳转后的前进与后退导航

点击函数/变量进入定义后，想返回原位置？用"前进/后退"功能快速切换：

步骤：

1. 跳转到定义 ：按住 Ctrl 键并点击函数名/变量名（或按下 F12），会跳转到其定义位置。
2. 后退到上一位置 ：跳转后，按下 Alt + ←（左箭头），可返回到跳转前的光标位置。
3. 前进到下一位置 ：若后退后想再次跳转到定义位置，按下 Alt + →（右箭头）即可。
4. 进阶：按 Ctrl + Shift + O 可调出当前文件的符号列表（函数、变量等），快速定位并跳转，配合前进/后退更高效。

8. 快速批量重命名变量和函数

开发中修改变量或函数名时，手动逐个修改容易遗漏。VSCode自带的"重命名符号"功能可实现批量精准修改。

步骤：

1. 选中需要重命名的变量、函数或类名（点击该名称即可）。
2. 按下快捷键 F2，或右键选择"重命名符号"。
3. 输入新名称后按回车键，所有引用该符号的位置会自动同步修改，包括当前文件和关联的其他文件。

9. 隐藏node_modules等冗余目录

项目中的node_modules、dist等目录文件多且无需频繁查看，隐藏它们可让目录结构更简洁。

步骤：

1. 在文件目录面板（左侧）点击右上角的 设置图标（或右键点击任意目录），选择"文件夹设置"。
2. 在弹出的settings.json文件中，添加files.exclude配置，示例如下：

   {
     "files.exclude": {
       "**/node_modules": true,  // 隐藏node_modules目录
       "**/dist": true,          // 隐藏dist打包目录
       "**/.git": true,          // 隐藏.git版本控制目录
       "**/.DS_Store": true      // 隐藏Mac系统的DS_Store文件
     }
   }

3. 保存文件后，配置的目录会立即在面板中隐藏，如需恢复，将对应值改为false即可。

10. 自定义代码片段，快速生成重复代码

写重复代码（如HTML模板、函数结构）时，可通过自定义代码片段一键生成，无需反复手写。

步骤：

1. 打开代码片段设置：按下 Ctrl + Shift + P ，在命令面板中输入 Configure User Snippets 并选择。
2. 选择代码片段适用范围：可选择"全局"（所有文件可用）或特定语言（如html.json仅HTML文件可用）。
3. 按模板格式编写片段：以Vue 2的模板为例，输入如下代码，保存后即可使用。

{
	// 片段名称
	"vue2Fragment": {
		// 生效的文件类型
		"scope": "javascript,typescript,vue",
		// 触发关键词（输入该词后按Tab）
		"prefix": "vue2",
		"body": [
			"<template>",
			"\t<div>v2</div>",
			"</template>\n",
			"<script>",
			"\texport default {",
			"\t\tname:'',",
			"\t\tprops:[],",
			"\t\tcomponents:{},",
			"\t\tdata(){return {}},",
			"\t\tcomputed: {},",
			"\t\tcreated() {},",
			"\t\tmounted() {},",
			"\t\tmethods: {}",
			"\t}",
			"</script>\n",
			"<style lang='scss' scoped></style>"
		],
		// 片段描述
		"description": "vue2代码片段"
	}
}

4. 使用片段：在对应类型文件中输入prefix（如vue2），按 Tab 键即可生成预设代码。

11. 多窗口分屏编辑，对比/同步查看文件

需要同时查看或编辑多个文件（如对比代码、参考接口文档写逻辑）时，分屏功能能大幅提升效率。

步骤：

1. 基础分屏操作：
   • 右键点击目标文件的Tab标签，选择"垂直拆分"（左右分屏）或"水平拆分"（上下分屏）。
   • 快捷键操作：选中文件后，按下 **Ctrl + **（反斜杠）可快速垂直分屏；分屏后按 Ctrl + 1/2/3 可切换不同分屏窗口。
2. 分屏后文件拖动：直接将一个文件的Tab标签拖动到分屏区域，即可在对应窗口打开该文件。
3. 取消分屏：点击分屏窗口右上角的"×"关闭该窗口，或右键点击Tab标签选择"关闭拆分"。

12. 自定义快捷键，适配个人操作习惯

VSCode默认快捷键若不符合个人习惯，可自定义修改，比如将"格式化代码"改为更顺手的组合键。

步骤：

1. 打开快捷键设置：按下 Ctrl + K + Ctrl + S（先按Ctrl+K，再按Ctrl+S），或通过"文件 > 首选项 > 键盘快捷方式"打开。
2. 搜索目标功能：在搜索框中输入功能名称（如"格式化文档"），找到对应快捷键条目。
3. 修改快捷键：
   • 点击目标条目的铅笔图标（编辑按钮），按下想要设置的新快捷键组合（如Ctrl + Alt + L）。
   • 若出现"快捷键已被占用"提示，可选择"更改按键绑定"替换原有设置，或重新选择未占用的组合键。
4. 保存设置：修改后无需手动保存，关闭窗口即可生效；如需恢复默认，右键点击对应条目选择"重置按键绑定"。

---

13. 快速修复代码错误

编写代码时出现语法错误（如变量未定义、括号不匹配），VSCode可提供自动修复建议，无需手动排查。

步骤：

1. 识别错误：代码中出现红色波浪线（语法错误）或黄色波浪线（警告）时，将光标定位到错误位置。
2. 调出修复建议：
   • 按下 Ctrl + .（Ctrl加句号），会弹出修复选项菜单。
   • 或点击错误位置左侧的"灯泡"图标，直接查看建议。
3. 选择修复方案：从菜单中选择合适的修复选项（如"导入缺失的模块""添加缺失的分号""重命名未定义的变量"），VSCode会自动修改代码。
4. 适用场景：该功能需配合对应语言的插件（如JavaScript用ESLint、Python用Pylance），插件越完善，修复建议越精准。

14. 快速折叠or展开代码块

面对长文件时，折叠无关代码块可聚焦当前编辑内容，提升可读性。

单个代码块操作

• 折叠：将光标定位到代码块（如函数、循环、HTML 标签）的行首，点击左侧的 "-" 图标，或按 Ctrl + Shift + [。
• 展开：点击左侧的 "+" 图标，或按 Ctrl + Shift + ]。

全局折叠or展开

• 折叠所有代码块：按 Ctrl + K + Ctrl + 0（零）。
• 展开所有代码块：按 Ctrl + K + Ctrl + J。
• 按层级折叠：按 Ctrl + K + Ctrl + 1~9（数字 1-9），可折叠到对应层级（如 1 级折叠所有顶级代码块）。

15. 集成终端高效操作

VSCode 内置终端可直接执行命令（如npm run dev、git commit），避免在编辑器和外部终端间频繁切换。

打开终端

• 快捷键 Ctrl + `（反引号，位于键盘左上角）快速调出 / 隐藏终端。
• 菜单路径："终端> 新建终端"，可选择默认终端类型（CMD、PowerShell、bash 等）。

多终端管理

• 点击终端面板右上角的 "+" 号新建终端，支持同时打开多个终端（如一个运行服务，一个执行 Git 命令）。
• 按 Ctrl + Shift + 5 可将终端垂直 / 水平拆分，方便对比输出内容。

终端与编辑器联动

在终端中右键点击文件路径，选择 "在编辑器中打开" 可直接跳转至对应文件。

---

本次分享就到这儿啦，我是鹏多多，深耕前端的技术创作者，如果您看了觉得有帮助，欢迎评论，关注，点赞，转发，我们下次见~

PS：在本页按F12，在console中输入document.getElementsByClassName('panel-btn')[0].click();有惊喜哦~

往期文章

• React无限滚动插件react-infinite-scroll-component的配置+优化+避坑指南
• 前端音频兼容解决：音频神器howler.js从基础到进阶完整使用指南
• 使用React-OAuth进行Google/GitHub登录的教程和案例
• 纯前端人脸识别利器：face-api.js手把手深入解析教学
• 关于React父组件调用子组件方法forwardRef的详解和案例
• React跨组件数据共享useContext详解和案例
• Web图像编辑神器tui.image-editor从基础到进阶的实战指南
• 开发个人微信小程序类目选择/盈利方式/成本控制与服务器接入指南
• 前端图片裁剪Cropper.js核心功能与实战技巧详解
• 编辑器也有邪修？盘点VS Code邪门/有趣的扩展
• js使用IntersectionObserver实现目标元素可见度的交互
• Web前端页面开发阿拉伯语种适配指南
• 让网页拥有App体验？PWA 将网页变为桌面应用的保姆级教程PWA
• 使用nvm管理node.js版本以及更换npm淘宝镜像源
• 手把手教你搭建规范的团队vue项目，包含commitlint，eslint，prettier，husky，commitizen等等