10 个你可能还不知道 VS Code 使用技巧

经常帮一些同学 One-on-One 地解决问题,在看部分同学使用 VS Code 的时候,有些蹩脚,实际上一些有用的技巧能够提高我们的日常工作效率。

NO.1

一、重构代码

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

将一整段代码提取为函数:选择要提取的源代码片段,然后单击做成槽中的灯泡查看可用的重构操作。代码片段可以被提取到一个新方法中,或者在不同的范围内(当前闭包、当前函数内、当前类中、当前文件内)提取到一个新函数中。在提取重构期间,VS Code 会引导为该函数进行命名。

将表达式提取到常量:为当前选定的表达式创建新的常量。

移动到新的文件:将指定的函数移动到新的文件,VS Code 将自动命名并创建文件,且在当前文件内引入新的文件。

转换导出方式export const name 或者 export default

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

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

NO.2

二、自定义视图布局

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

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

NO.3

三、快速调试代码

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

参考:Debug(https://code.visualstudio.com/docs/editor/debugging)

NO.4

四、查看和更新符号的引用

查看符号的引用、快速修改引用的上下文:例如,快速预览某个函数在哪些地方被调用了及其调用时上下文,还可以在预览视图中更新调用上下文的代码。

重命名符号及其引用:接着上面的例子,如果想更新函数名以及所有调用,怎么实现?按 F2 键,然后键入所需的新名称,再按 Enter 键进行提交。符号的所有引用都将被重命名,该操作还是跨文件的。

参考:Peek(https://code.visualstudio.com/docs/editor/editingevolved#_peek)、Rename Symbol(https://code.visualstudio.com/docs/editor/editingevolved#_rename-symbol)

NO.5

五、符号导航

在查看一个长文件的时候,代码定位会是非常痛苦的事情。一些开发者会使用 VS Code 的小地图,但其实还有更便捷的方法:可以使用 ⇧⌘O 快捷键唤起符号导航面板,在当前编辑的文件中通过符号快速定位代码。在输入框中键入字符可以进行筛选,在列表中通过箭头来进行上下导航。这种方式对于 Markdown 文件也非常友好,可以通过标题来快速导航。

参考:Go to Symbol(https://code.visualstudio.com/docs/editor/editingevolved#_go-to-symbol)

NO.6

六、拆分编辑器

当对内容特别多的文件进行编辑的时候,经常需要在上下文中进行切换,这时候可以通过拆分编辑器来使用两个编辑器更新同一个文件:按下快捷键 ⌘\ 将活动编辑器拆分为两个。

可以继续无尽地拆分编辑器,通过拖拽编辑器组的方式排列编辑器视图。

参考:Side by side editing(https://code.visualstudio.com/docs/getstarted/userinterface#_side-by-side-editing)

NO.7

七、重命名终端

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

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

NO.8

八、Git 操作

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

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

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

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

NO.9

九、搜索结果快照

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

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

NO.10

十、可视化搭建页面

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

参考:Iceworks 可视化搭建(https://ice.work/docs/iceworks/guide/visual-construction)

推荐阅读

我在阿里招前端,我该怎么帮你?(文末有福利)
如何拿下阿里巴巴 P6 的前端 Offer
如何准备阿里P6/P7前端面试--项目经历准备篇
大厂面试官常问的亮点,该如何做出?
如何从初级到专家(P4-P7)打破成长瓶颈和有效突破
若川知乎问答:2年前端经验,做的项目没什么技术含量,怎么办?

末尾

你好,我是若川,江湖人称菜如若川,历时一年只写了一个学习源码整体架构系列~(点击蓝字了解我)

  1. 关注我的公众号若川视野,回复"pdf" 领取前端优质书籍pdf

  2. 我的博客地址:https://lxchuan12.gitee.io 欢迎收藏

  3. 觉得文章不错,可以点个在看呀^_^另外欢迎留言交流~

小提醒:若川视野公众号面试、源码等文章合集在菜单栏中间【源码精选】按钮,欢迎点击阅读

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/276423.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

构建安全的Xml Web Service系列之如何察看SoapMessage

上一篇文章地址:构建安全的Xml Web Service系列一之初探使用Soap头 (5-22 12:53) 要分析Xml Web Service的安全性,首先要解决的问题是我们能了解和清楚Soap消息的格式和内容,如果获得不了SoapMessage,分析如何能构建安全Xml w…

前端高效开发必备的 js 库梳理

之前有很多人问学好前端需要学习哪些 js 库, 主流框架应该学 vue 还是 react ? 针对这些问题, 笔者来说说自己的看法和学习总结.首先我觉得在学习任何知识之前必须要有一个明确的学习目标, 知道自己为什么要学它, 而不是看网上说的一股脑的给你灌输各种知识, 让你学习各种库, …

交叉报表crosstab隐藏列名显示_SAP软件 报表查询之 输出格式设置

SAP不仅是功能强大、逻辑严谨的ERP软件,还提供了强大的报表查询功能。SAP的ALV报表展示功能是SAP的一大特点,实现了类似于EXCEL的功能。使用好ALV报表功能可以方便用户从SAP中取到想要的数据,尤其是财务用户。大家在使用SAP报表时&#xff0c…

seo每日一贴_白杨SEO:我看ZAC的外贸SEO应该怎样做?(策略篇)

前言:这是白杨SEO公众号更新第64篇。本该写写头条SEO啥的,最近在师徒培训讲站内SEO时有旁听同学提到后面讲讲谷歌SEO怎么样,因为谷歌全世界搜索市场占有率,所以外贸SEO最主要还是做谷歌SEO。以白杨特意又去了前辈ZAC的SEO每日一贴…

[转]网页栅格系统研究(2):蛋糕的切法

[出自]http://lifesinger.org/blog/2008/10/grid-system-2/首先澄清一个应用场景问题。研究(1)中指出,对于结构复杂的网站,不少设计师们喜欢采用960固定宽度布局。但要注意的是,960并不是万能钥匙,大部分网…

Vue3响应式原理

关注若川视野,回复"pdf" 领取资料,回复"加群",可加群长期交流学习本文结构- 关于Vue3- Vue2响应式原理回顾- Vue3响应式方案- Vue3响应式原理- 手写mini版Vue3响应式本文共计:2349字2图预计阅读时间&#xff…

找准切入点,调试看源码,事半功倍

关注若川视野,回复"pdf" 领取资料,回复"加群",可加群长期交流学习最近写了很多源码分析相关的文章,React、Vue 都有,想把我阅读源码的一些心得分享给大家。React:React 架构的演变 - 从…

Android布局大全

Android的界面是有布局和组件协同完成的,布局好比是建筑里的框架,而组件则相当于建筑里的砖瓦。组件按照布局的要求依次排列,就组成了用户所看见的界面。 所有的布局方式都可以归类为ViewGroup的5个类别,即ViewGroup的5个直接子类…

java实现加减乘除运算符随机生成十道题并判断对错_2020年Java面试题(3年的工作总结),最全的知识点总结...

这份Java面试题整整花了三个月的时间来整理,都是自己再工作中总结出来,记住多少就写多少,希望这份资料可以帮助你们,文末有其余部分资料的领取方式.Redis12道面试题1.什么是Redis?答:Remote Dictionary Ser…

.NET 中的泛型 101

1.1.1 摘要 图1 C# 泛型介绍 在接触泛型之前,我们编程一般都是使用具体类型(char, int, string等)或自定义类型来定义我们变量,如果我们有一个功能很强的接口,而且我们想把它提取或重构成一个通用的接口,使…

年底了,给想进阶的的前端朋友一些福利

2020 年,很多朋友都经历了一段比较艰难的求职季。年末,“就业寒冬”迎来了一丝暖阳,很多中大型互联网公司扩大了未来一年的招聘需求。前不久,字节跳动放出了年末要招 1 万人的消息,腾讯校招规模也将扩张至 5000 人&…

Vue Router 4.0 正式发布!焕然一新。

关注若川视野,回复"pdf" 领取资料,回复"加群",可加群长期交流学习12月8日,Vue Router 4 正式发布稳定版本。在经历了 14 个 Alpha,13 个 Beta 和 6 个 RC 版本之后,Vue Router v4 闪亮…

实战Nginx与PHP(FastCGI)的安装、配置与优化

转载链接:http://ixdba.blog.51cto.com/2895551/806622 一、什么是 FastCGI FastCGI是一个可伸缩地、高速地在HTTP server和动态脚本语言间通信的接口。多数流行的HTTP server都支持FastCGI,包括Apache、Nginx和lighttpd等,同时,…

10个前端8个用Vue的,怎么才能在面试中出彩?

大家好,我是若川。现在但凡出去面试,面试官几乎必问 Vue3.0 。不仅会问一些核心特性,还会问原理层面的问题。比如:▶框架层面问题:Vue3.0 新特性 Composition API 与 React.js 中 Hooks 的异同点?▶源码、原…

故乡 | 登高望远,夜幕降临

欢迎星标我的公众号若川视野,回复加群,长期交流学习上周末看了几集豆瓣评分8.5分刘同同名小说的青春剧《我在未来等你》,让我回想起自己的高中生活。也想起小时候经常爬到故乡附近的小山,看夕阳西下。时常和同事开玩笑说&#xff…

CentOS5安装Nginx1.4+PHP5.5 FastCGI

转载链接:http://blog.csdn.net/staricqxyz/article/details/17012329 yum -y install gcc gcc-c autoconf libjpeg libjpeg-devel libpng libpng-devel freetype freetype-devel libxml2 libxml2-devel zlib zlib-devel glibc glibc-devel glib2 glib2-devel bzip2…

一份热乎乎的滴滴前端面经

关注若川视野,回复"pdf" 领取资料,回复"加群",可加群长期交流学习滴滴前端实习面经滴滴是我投简历之后第二家面试的公司, 国庆节前两三天投的简历, 国庆后复工第一天就给我打了电话约一面。那时候…

用webBrowser取源文件取不到的点击数--选秀榜selectop.com网站内容管理系统之六

用idhttp可以取到源文件,但网站用脚本代码,源文件是看不到,并且代码的结果也取不出。webBrowser可以多次返回下载到的内容,不包括任何html语法,这个当中就有文章的点击数。在WebBrowser1DownloadComplete事件中处理&am…

真诚推荐几个最值得关注的前端公众号

前端技术日新月异,发展迅速,作为一个与时俱进的前端工程师,需要不断的学习。这里强烈推荐几个前端开发工程师必备的优质公众号,希望对你有所帮助。大家可以像我一样,利用碎片时间阅读这些公众号的文章。code秘密花园一…

Silverlight Unit Test Framework

微软在08年的时候推出了一个Silverlight的单元测试框架,该框架在Mix 08的时候与Silverlight controls同时推出的,微软工程师Jeff Wilcox一直参与维护该单元测试框架。Scott Gu对这个框架的介绍Jeff Wilcox提供的视频介绍该框架的源代码已经包括在Silverl…