你好,欢迎进入江苏优软数字科技有限公司官网!

诚信、勤奋、创新、卓越

友好定价、专业客服支持、正版软件一站式服务提供

13262879759

工作日:9:00-22:00

VS Code常用插件和快捷键 开发效率提升指南

发布时间:2026-02-23

浏览次数:0

一款开源的跨平台开发工具,名为VS Code,它是当下我使用起来最为顺手的编辑器。在本文当中,介绍了某些常用的插件以及快捷键,借助这些能帮你大幅度提升软件开发的效率,进而使你拥有更多时间去进行撸铁以及与妹子交往。

初识VS Code

先放上它的官网:

https://code..com/

全称是Code,单从名字瞧一瞧,起初说不定有人会把它和另一个弄混,这俩都归微软爸爸公司旗下,而后一个早就声名远扬,长久处于程序员最青睐编辑器首位,为使得新推出的这个能沾沾热度,故而取个相近的名字,恰似某种情况对照着Java。

称其为新生儿,这种说法毫无不妥之处,自它问世到如今,仅仅经历了4年光阴,同那些历史久远的各类编辑器相较,它简直就是个晚辈。然而就在最近的这一至两年间,它加快步伐成长,市场占有率开始急剧上扬,大幅超越了其他的编辑器,Text急剧下滑 ,Atom表现平缓,因收费缘故在国内的使用频率一直不高,Vim因学习难度太大也逐渐告别历史舞台。若你正好自别的编辑器转向VS Code,也全然不必忧心,它备有对应的插件,能够把你的键盘设置迁移过来,助你迅速上手操作,而无需再度耗费时间去适应快捷键。

并且,它针对每一种语言,均给予了相当不错的支持,把开发期间会用到的进行整理,打包成一个集合,大体在开发之际,下载与之对应的,便能够获取颇为良好的支持。

微软所给出的定义是这样的:免费,开源,跨平台。对代码编辑器进行重新定义。再加之去年微软实施的收购行为,这些均表明微软于开源领域有着越来越多的尝试。

对于一款产品的长久持续发展而言,开源占据着极其关键的重要地位。在四款编辑器里头,存在一款是处于闭源状态的,VS Code、Vim以及Atom均属于开源性质的。并且,VS Code能够说是在开源方面表现最为出色的。

VS Code 并非仅仅是将代码公开提供出来,而是把整个产品的开发进程构建并依托于开源的基础之上,深入地同整个社群展开合作,聆听用户在相关方面所给出的反馈,从而让 VS Code 能够不断发展进步,变得越来越好。

每一年,VS Code团队都会于Wiki进行发布,将其所呈现,表现为列出一整年的规划图这样的形式。

就在每个之初的月份,于处于产品设计的这个阶段之时,VS Code团队会在Issue之上发布Plan,将这一个月之内会去搞的每一项功能都罗列出来,每一项功能基本上能够对应一个Issue。在此,你能够瞅见详尽的设计,并且还能够把你自身的见解给提出来。

每逢每个月的月末时分,当临近产品将进行发布情况时,你能够在特定之处看到,且能够从中了解到VS Code针对产品测试以及进行发布这一过程具体是怎样开展进行的。

并且代码是开源的,VS Code 总的产品规划,设计还有发布管理都是“开源”的:每一个时期对每一名用户是充分公开透明展现的,你不仅仅能够创建 Issue,提交PR,你甚至也都能够参与到任何功能的设计跟热烈讨论当中去!

关于业界,一直存在着一个争议sublime text 3汉化包,那就是它究竟是不是一个IDE。微软直接就把它定义成同类里最好用的IDE。对于另一种情况,微软直到现在还只是将它定义为一个Code。

Code is a but code

我们要解决这个问题,首先得弄明白一种概念。这个概念是什么?就是IDE。它的全称是啥?字面意思是集成开发环境。啥叫集成开发环境?就是把开发过程里一些主要活动以及用到的工具,都整合成一个开发环境。如此一来,我们就能在一个程序当中,开展诸如编写代码、调试代码、施行命令行、进行版本控制等开发过程。

当下具备强大的API予以支持,已然基本上能够达成IDE。我们借助其来撰写代码,借助内置的终端火速地运行命令行,下载Debug插件,设定断点,顺遂地调试代码。运用内置的Git实施版本控制,从容地管理源代码。不管是何种语言均能够下载到对应的插件合集sublime text 3汉化包,一次性打包实施安装,整个开发进程均可在这一个工具里予以完成,它切实做到了重新定义代码编辑器,于Stack的2018 年开发者调查里,VS Code成为了最受青睐的开发工具。

基本插件

这个部分介绍一些必装的开发插件,帮你大大提升代码编辑效率。

现而今,VS Code 拥有着数目繁多且处于快速拓展态势的插件生态,截至当下,已然存在着超过一万个插件。其不但具备着中心化的插件市场,并且于 VS Code 编辑器当中也能够便利地搜索插件,进而直接加以安装以及管理。与此相较,仅有那种不到5000的插件,并且于编辑器之中没办法很便利地搜索管理此类插件;Vim插件数量众多,然而因不存在一个中心化的插件市场,查找插件极为麻烦;Atom拥有八千多的插件,比VS Code少一点,虽说在编辑器内同样能够查找插件,不过VS Code的搜索以及浏览功能做得比Atom更为出色。

() Pack for Code 中文汉化包

有的小伙伴英文不太强,上来头一件事必然是切换成可使用中文的语言环境状态,在装上汉化包插件以后,凭借快捷键Ctrl加Shift加P把命令面板给调出来,在里面输入 ,挑选zh-ch,之后重启vs code才行。

open-in- 在浏览器中查看

VS Code没给出能直接于浏览器里运行程序的内置功能,因而我们得去安装此插件,于浏览器当中查看我们程序的运行效果。

Live 实时预览

于使用该插件后,于编者器里将代码予以修改,依Ctrl + S实施保存。而后修改之效果便会实时予以同步,于浏览器里呈现,无需再手动去进行刷新。

Auto Close Tag 自动闭合标签

输入标签名称的时候自动生成闭合标签,特别方便。

Auto Tag 尾部闭合标签同步修改

自动检测配对标签,同步修改。

Pair 用不同颜色高亮显示匹配的括号

着颜色于配对的括号,以利于区分,存在一种情况,就是还没有把该插件安装的时候,那些括号通通都是白色的。

Tag 高亮显示匹配标签

这个插件,会自动帮我们,把选中的匹配标签,进行高亮显示,如此一来,就再也不用费尽周折去查找了。

-icons 文件图标

这个插件能够协助咱们依照不一样的文件类别去生成相应的图标,如此一来,在我们于侧边栏查看文件清单的时刻,借助图标就能够分辨文件类别。

用mac的小伙伴们,能够去选择下载-icons-mac这儿,基本图标跟-icons似的,只是其中那文件夹采取的是mac风格。

TODO 高亮

若当我们开展编写代码这一行为之际,期望于某个特定之处去进行一个标记,随后再去完成完善或者做出修改其中内容的操作,那么能够借助此插件达成高亮显示的效果,在此之后便能够助力我们以快速的方式定位到需要做出修改的代码行那儿。

Code Spell 单词拼写检查

在编写代码之际,我们老是不经意间因拼写有误致使软件运行失败,安装此插件后,它会自行帮我们辨认单词的拼写差错,且给出需修改的建议,极大地帮我们缓解了排除程序故障的压力。

Code 运行选中代码段

如若你有学习或者接触形形色色开发语言之需求,那么靠 Code 插件能使你无需去搭建各类语言的开发环 境,仅凭借这插件便可直接运行相应语言的代码,极为适配于学习或测试种种开发语言,其使用方式是直接右键选取 Run Code,它支持诸多语言,涵盖 Node。

Cost 成本提示

当你导入工具包之时,此插件能够提示该包的体积,要是体积过大,那么便需考量压缩包,以此为后期上线优化做好准备。

查看Git信息

使得光标朝着代码行那儿移动,如此一来就能够显示出当前行最近时段的信息以及作者,在多人展开开发这个时候是相当有用处的,能够将责任具体到个人,进而防止出现把责任推卸给他人这种情况。

书签

对代码进行书签标记,通过快捷键实现快速跳转到书签位置。

具体的快捷键可以在键盘快捷方式中自定义设置:

拓展插件

这部分主要介绍一些针对特定开发环境的插件

--

使用-ui库的人士能够安装这个插件,当进行编写标签操作时会自动提示标签名称。

Lens 工具包版本信息

输出.json里,呈现你所下载安装的npm工具包的版本信息,与此同时还会告知你当下此包的最新版本。

Vetur VUE语言包

时下,VUE属于极为流行的js框架当中的一个类别 ,不少 企业 会认定 基于VUE去搭建 产品 ,Vetur针对VUE给予 了相当杰出的语言支撑效果。

在未安装该插件以前,编写后缀名为.vue的文件时,代码呈现为白色。

对插件进行安装之后,针对vue文件开展编写,若输入s,接着按压Tab键,便能够实现自动补全模版。

计算代码工作量

有一款时间记录工具,此工具能够协助你于vs code里记录具备有效性的编程时间。

其一,把数据以折线图的样式展示出,其二,为你呈现一周里的工作趋向,其三,曾经在编写项目之际,最多一天编程差不多12个小时,其四,你的付出以及努力都是被知晓的。

他的官网呢,会以扇形图形式显示,你编写各个语言所占用的时间的比例,还会显示,你在各个项目中所用时间的占比,这是个相当不错的数据报告,项目结束时,你能在其中清楚地看出,自己的时间究竟怎样分配的。

Sync 设置同步到Gist

时有这般情形,我们身处新公司,或者已然更换新电脑,以此待需求配置新开发环境,此际逐个下载插件,复又重新配置vs code,这般相当麻烦,并且你未必全然尽皆记得,借助此插件,我们能够把当前vs code里的配置上传至Gist,而后经由Gist下载,如此便能将全部配置同步于新环境之内了。

在首页点击头像,选择进入设置页面。

点击左侧侧边栏 ,进入开发者设置。

选择 ,点击右侧 new token。

填写token名称,在下方勾选gist。

点击下方的 token按钮生成一个新的token。

将生成的新的token保存下来。

于其中安装Sync插件,键入Ctrl + Shift + p,输入Sync,随后选择更新,或者上传配置。

将中生成的token输入,点击回车。

于控制台里自行生成一连串id,随后借着token以及id来完成配置同步。

按下Ctrl键与Shift键,再按下字母p,输入名为Sync的内容,从中去选择下载配置,输入token以及id,这样就能进行同步下载了。

这篇文章里头所介绍的, vs code 的配置,已然全都同步到 Gist 了,有需求的小伙伴,能去下载一回。

token:b3c5f29c0e6f9f49b23b44ce89467226cd91c9c6
Id:338d5dfb6b7784c980250cffe8365899

可以在配置文件中选择是否自动上传和下载

"sync.removeExtensions": true,      "sync.syncExtensions": true,      "sync.autoDownload": true,      "sync.autoUpload": true,      "sync.gist": "338d5dfb6b7784c980250cffe8365899"

颜色主题

身为一名程序员,每日大部分时间都是坐在电脑跟前敲代码,需长时间与编辑器进行打交道,给我们挑选一款好看的颜色主题,能够极大程度地提升写代码进程当中的愉悦感,为了保护眼睛,在此推荐一个深色主题安装包,其里面包含了如下几款皮肤。

私心里最为钟意的,乃是下面两款深色主题,主题这一事物,通常习惯使用之后便不会反复更换,故而挑选一款令自身使用起来惬意的便足矣。

吸血鬼主题(本人目前使用的一款)

One Dark Pro

常用快捷键

编辑器与窗口管理

Ctrl+Shift+P: 打开命令面板。

Ctrl+Shift+N: 新建窗口。

Ctrl+Shift+W: 关闭窗口。

切分窗口:Ctrl+1/Ctrl+3/Ctrl+3

Ctrl+H:最小化窗口

Ctrl+B:显示/隐藏侧边栏

Ctrl+"+/-":放大/缩小界面

文件操作

Ctrl+N:新建文件

Ctrl+W:关闭文件

Ctrl+Tab:文件切换

格式调整

Ctrl+C/Ctrl+V:复制或剪切当前行/当前选中内容

Alt+Up/Down:向上/下移动一行

Shift+Alt+Up//Down:向上/下复制一行

Ctrl+:删除当前行

按下Shift键、Alt键同时,再按向左键或者向右键,如此这般,是从光标所在之处开始,朝着左边或者右边的方向去选择部分内容哦。

代码编辑

Ctrl+D:选中下一个相同内容

Ctrl+Shift+L:选中所有相同内容

Ctrl+F:查找内容

Ctrl+Shit+F:在整个文件夹中查找内容

常用设置

我们能够于.json里,以手动的方式来开展某些设置,进而使得我们的编辑器更加好用些。

关闭标签介绍信息

于编写代码之际,当鼠标移至某标签处,屡见出现些介绍讯息而自动弹出,将部分代码予以遮挡,给阅读造就极大难度,却始终未曾觅得关闭之法,当前利用置设时间时延暂能达成此番效应,我所设置的是5000毫秒,你可设置得再大点儿,大体上其便不会弹出来了。

"editor.hover.delay": 5000

自动折行

设置代码根据编辑器窗口大小自动折行

"editor.wordWrap": "on"

字体设置

            // 一款适合代码显示的字体包(需要将字体包下载到本地)      "editor.fontFamily": "Source Code Pro, 'Source Code Pro'",      // 设置代码字体大小      "editor.fontSize": 15,

自动保存

目前有四个选项:

•off:关/于自动保存的操作使之停止。•:当文件被修改之后的时间超过了在"Files:Auto Save Delay"里配/置设定完成的那个值时,就会自动地开启进行保存的动作。•:编辑器丧失掉焦点情况发生的时候,自动保存已经更新了得出的文件。•:窗口失去了焦点这种状况出现之际,自动保存已经更新了之后的文件。

"files.autoSave": "off"

关闭代码提示

"editor.quickSuggestions": { "other": false, "comments": false, "strings": false }

如有侵权请联系删除!

13262879759

微信二维码