重构代码
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 提供集成终端,可以轻松快速地执行命令行任务。如果你经常使用它,你经常会打开多个终端。此时,对终端进行命名可以提高终端定位的效率。
参考:重命名终端会话(https://code.visualstudio.com/docs/editor/integrated-terminal#_rename-terminal-sessions)
Git 操作
VS Code内置了Git源代码管理功能,并提供了一些方便的Git操作方法。例如:
解决冲突:VS Code 将识别合并冲突,突出显示冲突的差异,并提供内联操作来解决冲突。
临时或未选定的代码行:在编辑器中,您可以撤消修改、临时保存修改以及撤消对选定行的临时更改。
参考:在VS Code 中使用版本控制(https://code.visualstudio.com/docs/editor/versioncontrol)
搜索结果快照
VS Code 提供跨文件搜索功能。搜索结果快照可以提供搜索结果的更多信息,例如代码所在行代码、搜索关键字的上下文,并且可以编辑和保存搜索结果。
参考:搜索编辑器(https://code.visualstudio.com/updates/v143#search-editors)
可视化搭建页面
可以通过VS Code中的可视化构建生成网页。这是通过安装VS Code 的Iceworks (https://marketplace.visualstudio.com/items?itemName=iceworks-team.iceworks) 插件来实现的。安装插件后,使用P调用命名面板,在命令面板中输入“可视化构造”即可调用可视化构造界面。在界面中,您可以通过选择网页元素、拖放布局、设置元素样式和属性来构建页面。最后点击“Generate Code”生成React代码。
用户评论
煮酒
VS Code 真的太强大了,用了10个技巧,代码效率提升不止一个档次!特别是那个快捷键的介绍,太实用了。
有6位网友表示赞同!
雨后彩虹
刚入手VS Code,看了这10个技巧,感觉又打开了新世界的大门,每个技巧都很实用,必须收藏!
有15位网友表示赞同!
眉黛如画
VS Code 的10个技巧里,我觉得代码折叠那个功能最赞,写大项目的时候真的能省不少时间。
有14位网友表示赞同!
涐们的幸福像流星丶
这个技巧分享真的太及时了,我之前一直不知道有智能提示这个功能,现在写代码轻松多了。
有14位网友表示赞同!
温柔腔
VS Code 的10个技巧里,我特别想试试那个代码格式化工具,之前总是手动格式化,太费劲了。
有5位网友表示赞同!
迷路的男人
10个技巧里我最喜欢的就是自定义快捷键那部分,我现在几乎所有的编辑器都在用自定义快捷键。
有6位网友表示赞同!
墨染天下
VS Code 的10个技巧真的很有用,但是我觉得排版和布局的技巧可以更详细一些。
有19位网友表示赞同!
神经兮兮°
看了这10个技巧,感觉自己之前的VS Code用法太原始了,得赶紧学起来。
有15位网友表示赞同!
夏以乔木
VS Code 的智能提示功能太强大了,之前一直不知道,现在写代码感觉都顺眼多了。
有8位网友表示赞同!
不识爱人心
这个技巧分享太棒了,尤其是那个代码搜索和替换的技巧,我现在几乎每天都在用。
有7位网友表示赞同!
孤街浪途
VS Code 的10个技巧里,我最想试试那个代码调试的技巧,之前调试代码总是很麻烦。
有6位网友表示赞同!
还未走i
这个技巧分享真的很实用,我之前一直觉得VS Code的代码补全不够智能,现在看来是我打开方式不对。
有14位网友表示赞同!
封锁感觉
VS Code 的10个技巧里,我觉得代码审查和版本控制的那部分可以更深入讲解一下。
有8位网友表示赞同!
有恃无恐
这个技巧分享真的让我对VS Code有了全新的认识,之前总觉得它不如其他编辑器。
有13位网友表示赞同!
志平
VS Code 的10个技巧让我意识到,原来编辑器还可以这样用,太惊喜了!
有17位网友表示赞同!
笑叹★尘世美
这个技巧分享让我对VS Code的爱又深了一层,真的太感谢了!
有17位网友表示赞同!
裸睡の鱼
看了这10个技巧,感觉自己的VS Code水平又上升了一个层次,以后写代码更得心应手了。
有20位网友表示赞同!
巷口酒肆
VS Code 的10个技巧真的很有用,但是我觉得可以增加一些针对不同编程语言的特定技巧。
有14位网友表示赞同!
傲世九天
这个技巧分享让我对VS Code的潜力有了更深的认识,真的太有帮助了!
有6位网友表示赞同!