你可能不知道的10个VS Code隐藏技巧

VS Code 的强大在于提升效率的隐藏技巧：关闭预览模式使标签页常驻，禁用紧凑文件夹恢复目录层级，利用多光标与列选择实现批量编辑，通过命令面板快速执行操作，配置工作区统一项目设置，自动化任务减少重复，自定义代码片段加速常用结构输入，善用 Emmet 缩写高效编写 HTML/CSS。

VS Code 的强大之处不仅在于其基础功能，更在于那些能让你事半功倍的隐藏技巧。掌握这些方法，可以显著提升你的编辑效率和开发体验。

让文件标签页常驻不被替换

默认情况下，点击新文件会用预览模式打开，替换掉旧的标签页，双击才能固定。这在频繁切换文件时非常不便。解决方法是关闭预览模式：进入设置（Ctrl + ,），搜索 Workbench.editor.enablePreview，取消勾选该项。同时确保 Workbench > Editor: Show Tabs 是开启的，这样所有打开的文件都会以独立标签页的形式稳定显示。

禁用紧凑文件夹以恢复清晰目录结构

当一个文件夹下只有一个子文件夹时，VS Code 会默认将它们并列显示，这打乱了原有的层级关系，不利于文件拖拽操作。要恢复正常的嵌套视图，只需在设置中搜索 compact folders，然后取消勾选 Workbench > Tree: Compact Folders。修改后，目录树会立即恢复正常，单个子文件夹将正确地显示在其父文件夹之下。

使用高级选择与多光标进行批量编辑

VS Code 的多光标功能是处理重复性任务的利器。

• 列（框）选择：按住 Alt 键并拖动鼠标，可以创建一个垂直的矩形选区。这对于在多行代码前统一添加文本（如注释或变量前缀）、对齐参数列表等场景极其高效。
• 为每个匹配项添加光标：先选中一段文本，然后按下 Ctrl + Shift + L，编辑器会在当前文档中所有与所选内容相同的实例处都添加一个光标，实现真正的全局同步编辑。
• 快速复制行：将光标置于目标行，使用 Shift + Alt + ↑/↓ 可以在上方或下方快速复制整行，比传统的复制粘贴快得多。

利用命令面板快速执行任何操作

快捷键记不住？没关系。Ctrl + Shift + P 打开的命令面板是 VS Code 的“瑞士军刀”。在这里，你可以通过输入关键词来搜索并执行几乎任何功能，无论是内置命令还是已安装扩展提供的功能。它还会显示对应操作的快捷键，是学习和发现新功能的最佳途径。

配置工作区以管理复杂项目

对于包含多个独立模块的大型项目，可以使用“工作区”功能。通过 文件 > 将文件夹添加到工作区，可以将前端、后端等多个文件夹整合在一个窗口中管理。更重要的是，可以在工作区根目录创建 .vscode/settings.json 文件，为整个项目组定义统一的设置（如缩进、格式化规则），确保团队协作的一致性，而不会影响其他项目的全局设置。

自动化任务以减少重复操作

VS Code 的 Tasks 功能可以将常见的命令行操作自动化。例如，可以配置一个任务，在保存文件时自动运行 ESLint 进行代码检查，或在提交代码前自动执行单元测试。通过编辑 .vscode/tasks.json 文件，你可以定义构建、部署等一系列流程，一键触发，无需手动输入冗长的命令。

自定义代码片段以加速编码

对于经常编写的代码结构（如 React 组件、日志语句或特定函数模板），可以创建自己的代码片段（Snippets）。进入 文件 > 首选项 > 用户代码片段，选择语言或创建全局片段。例如，定义一个前缀为 "clg" 的片段，其内容为 console.log('$1');，之后在 JavaScript 文件中输入 "clg" 并回车，就能自动生成 console.log 语句，并将光标定位在括号内。

善用 Emmet 加速 HTML/CSS 编写

Emmet 是 VS Code 内置的强大工具，尤其适用于前端开发。它允许你使用类似 CSS 选择器的缩写来快速生成 HTML 结构。例如，输入 div.container>ul.list>li.item*3 然后按 Tab 键，就能瞬间生成一个包含三个列表项的完整 HTML 片段，极大地提升了编写静态页面的效率。

以上就是你可能不知道的10个VS Code隐藏技巧的详细内容，更多请关注php中文网其它相关文章！