大家好，今天来为大家解答使用VS Code 的10 个技巧这个问题的一些问题点，包括也一样很多人还不知道，因此呢，今天就来为大家分析分析，现在让我们一起来看看吧！如果解决了您的问题，还望您关注下本站哦，谢谢~

重构代码

VS Code 提供了一些快速重构代码的操作，例如：

将整段代码提取到函数中：选择要提取的源代码片段，然后单击“Make”槽中的灯泡以查看可用的重构操作。代码片段可以提取到一个新方法中，或者提取到不同范围内的新函数中（当前闭包、当前函数内、当前类内、当前文件内）。在提取重构过程中，VS Code 将指导您命名函数。

将表达式提取为常量：为当前选定的表达式创建一个新常量。

移动到新文件：将指定函数移动到新文件，VS Code 会自动命名并创建该文件，并将新文件引入到当前文件中。

转换导出模式：导出const name或导出default。

合并参数：将函数的多个参数合并为单个对象参数：

参考：重构操作（https://code.visualstudio.com/docs/editor/refactoring）、JS/TS重构操作（https://code.visualstudio.com/Docs/languages/typescript#_refactoring）

自定义视图布局

VS Code 的布局系统非常灵活，可以在工作台上的活动栏和面板中移动视图。

参考：重新排列视图(https://code.visualstudio.com/updates/v1_45?ref=codebldr#_dynamic-view-icons-and-titles)

快速调试代码

在VS Code 中调试JS/TS 代码非常简单，只需使用Debug: Open Link 命令即可。这在调试前端或Node 项目时非常有用。此类项目通常会启动本地服务。此时只需将本地服务地址填入Debug: Open Link输入框即可。

参考：调试(https://code.visualstudio.com/docs/editor/debugging)

查看和更新符号的引用

查看符号的引用并快速修改引用的上下文：例如，快速预览函数的调用位置及其调用上下文，还可以在预览视图中更新调用上下文的代码。

重命名符号及其引用：按照上面的示例，如果要更新函数名称和所有调用，如何实现？按F2，输入所需的新名称，然后按Enter 提交。所有对该符号的引用都将被重命名，此操作也是跨文件的。

参考：Peek(https://code.visualstudio.com/docs/editor/editingevolved#_peek)、重命名符号(https://code.visualstudio.com/docs/editor/editingevolved#_rename-symbol)

符号导航

查看长文件时，代码定位可能会非常痛苦。有些开发者会使用VS Code的小图，但其实还有更方便的方法：可以使用O快捷键唤出符号导航面板，通过当前编辑文件中的符号快速定位到代码。在输入框中键入字符进行过滤，并使用箭头在列表中上下导航。这种方法对Markdown 文件也非常友好，可以通过标题快速导航。

参考：转到符号(https://code.visualstudio.com/docs/editor/editingevolved#_go-to-symbol)

拆分编辑器

编辑内容较多的文件时，经常需要在上下文中进行切换。这时，你可以使用两个编辑器来更新同一个文件，方法是分割编辑器：按快捷键\ 更改Activity 编辑器被分割成两个。

您可以继续无限地分割编辑器，并通过拖动编辑器组来排列编辑器视图。

参考：并排编辑(https://code.visualstudio.com/docs/getstarted/userinterface#_side-by-side-editing)

重命名终端

VS Code 提供了集成终端，可以很方便地快速执行命令行任务。用得多了经常会打开多个终端，这时候给终端命名可以提高终端定位的效率。

参考：Rename terminal sessions(https://code.visualstudio.com/docs/editor/integrated-terminal#_rename-terminal-sessions)

Git 操作

VS Code 内置了Git 源代码管理功能，提供了一些便捷的Git 操作方式。例如：

解决冲突：VS Code 会识别合并冲突，冲突的差异会被突出显示，并且提供了内联的操作来解决冲突。

暂存或撤销选择的代码行：在编辑器内可以针对选择的行来撤销修改、暂存修改、撤销暂存。

参考：Using Version Control in VS Code(https://code.visualstudio.com/docs/editor/versioncontrol)

搜索结果快照

VS Code 提供了跨文件搜索功能，搜索结果快照可以提供更多的搜索结果的信息，例如代码所在行码、搜索关键字的上下文，并且可以对搜索结果进行编辑和保存。

参考：Search Editors(https://code.visualstudio.com/updates/v143#search-editors)

可视化搭建页面

在VS Code 中可以通过可视化搭建的方式生成Web 页面，这是通过安装VS Code 的Iceworks(https://marketplace.visualstudio.com/items?itemName=iceworks-team.iceworks) 插件实现的。安装插件后，通过P 唤起命名面板，在命令面板中输入『可视化搭建』即可唤起可视化搭建界面，在界面内通过选择网页元素、进行拖拽布局、设置元素样式和属性来搭建页面，最后点击『生成代码』就可以生成React 代码。