十个极大提高开发效率的 VS Code 技巧！ _VS

本文来分享 10 个极大提高开发效率的 VS Code 技巧！在VS Code中，可以在设置中搜索" Editor: Wrap Tabs"来实现选项卡换行的功能。

文章插图
本文来分享 10 个极大提高开发效率的 VS Code 技巧！
标签换行在VS Code中，可以在设置中搜索" Editor: Wrap Tabs"来实现选项卡换行的功能。

文章插图
这样，在大型项目中工作时，就不需要像在浏览器中一样滚动来查找选项卡，而是可以让选项卡自动换行，更方便地跟踪模板和组件。

文章插图
Timeline 视图：本地源代码控制Git等代码控制工具能够轻松跟踪文件的变更，并且在需要时还原到之前的状态。为了提供更好的版本控制和代码历史的可视化，VS Code提供了Timeline视图。
Timeline视图是一个自动更新的面板，它显示与文件相关的重要事件，如Git提交、文件保存和测试运行等。通过Timeline视图，你可以更直观地浏览代码的演变过程，追踪各种操作对文件的影响。

文章插图
展开此视图可查看与当前文件相关的事件快照列表。这里是文件保存，也是 Git 提交文件暂存的地方。

文章插图
将鼠标悬停在快照项上可查看 VS Code 制作快照的日期和时间。

文章插图
选择快照项可查看差异视图，显示快照时的文件与当前文件之间的更改。

文章插图
自定义布局VS Code 界面的左侧选项卡通常包括资源管理器、搜索、源代码控制、项目管理等功能。而终端中会显示诸如 “problems”, “output”, “terminal”和“debug console”等工具栏。
VS Code 支持自由地拖放这些选项卡，按照喜好来重新排列界面，让它更适合你的使用习惯。
通过简单的拖拽操作，可以改变它们的位置。比如，可以将资源管理器移到右侧，将搜索放在顶部，或者将终端移动到左侧。只需点击选项卡的标题栏，并将其拖动到你想要的位置。释放鼠标按钮后，选项卡将会被放置在你选择的位置上，可以更方便地访问和管理这些功能。

文章插图
自动保存在编辑文件时，默认情况下需要手动保存文件，比如按下Ctrl + S快捷键。这个过程可能很麻烦，特别是当频繁修改文件时。为了减轻这种繁琐的操作，VS Code 引入了自动保存功能。
自动保存功能会在我们进行文件编辑时自动保存文件的更改，而无需手动按下保存快捷键。这意味着我们可以专注于写代码而不用担心保存文件，节省了不少时间和精力。此外，自动保存还确保我们始终使用的是最新的文件版本，避免了由于未及时保存而丢失修改的情况。

文章插图
使用“文件”>“自动保存”可以轻松启用该功能。

文章插图
然而，自动保存功能并非完美无缺。有些人可能喜欢手动控制保存的时机，以便在修改完成之前进行检查和确认。自动保存也可能导致一些意外情况，比如误操作或者意外修改了文件内容，因为一旦保存，修改就会立即生效。
是否启用自动保存功能取决于个人偏好和实际需求。权衡利弊，根据自己的习惯和工作流程来决定是否使用自动保存功能。
使用命令面板执行操作在 VS Code 中，除了输入文本之外，几乎任何操作都可以通过命令面板完成。命令面板允许我们在编辑器中执行各种任务，包括与文件相关的命令、导航命令、编辑命令和终端命令，每个命令都被优化设计以提升编辑体验。通过命令面板，可以简单地搜索所需的命令，并选择执行相应的操作。
打开命令面板的方式如下：

windows/linux: 使用快捷键 Ctrl + Shift + P
mac: 使用快捷键 Shift + Command + P