vs code常用配置推荐

1,990 阅读6分钟

vscode是微软开发的的一款代码编辑器,就如官网上说的一样,vscode重新定义(redefined)了代码编辑器。当前市面上常用的轻型代码编辑器主要是:sublime,notepad++,editplus,atom这几种。

比起notepad++、editplus,vscode集成了许多IDE才具有的功能,比起它们更像一个代码编辑器;比起sublime,vscode颜值更高,安装配置插件更为方便;比起atom,vscode启动速度更快,打开各种大文件不卡。可以说,vscode既拥有高自由度、又拥有高性能和高颜值,最关键的是,vscode还是一款免费并且有团队持续快速更新的代码编辑器。可以说,vscode是代码编辑器的首选。个人推荐编写前端代码时,代码编辑器选择vscode,IDE选择WebStorm。

vscode安装插件只需要点击图片所示按钮,即可进入拓展,在搜索框中输入插件名点击安装后,等待安装好即可点击重新加载重启vscode使得插件生效。

当你不需要某个插件时只需要进入扩展,点击对应插件右下角的齿轮按钮即可选择禁用或卸载该插件。  

好了话不多说,我们开始推荐吧!

初识VS Code

先放上它的官网:

code.visualstudio.com/

Chinese(Simplified) Language Pack for Visual Stidio Code 中文汉化包

对于一些英文不太好的小伙伴,上来第一件事肯定是要切换成中文语言环境,安装汉化包插件之后,按快捷键Ctrl+Shift+P调出命令面板,输入Configure Display Language,选择zh-ch,然后重启vs code即可。

open-in-browser 在浏览器中查看

VS Code没有提供直接在浏览器中运行程序的内置功能,所以我们需要安装此插件,在浏览器中查看我们的程序运行效果。

Live Server 实时预览

安装这个插件之后,我们在编辑器中修改代码,按Ctrl+S保存,修改效果就会实时同步,显示在浏览器中,再不用手动刷新。

Auto Close Tag 自动闭合标签

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

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

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


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

对配对的括号进行着色,方便区分,未安装该插件之前括号统一都是白色的。


Highlight Matching Tag 高亮显示匹配标签

这个插件自动帮我们将选中的匹配标签高亮显示,再也不用费劲查找了。

Vscode-icons VSCode 文件图标

此插件可以帮助我们根据不同的文件类型生成对应的图标,这样我们在侧边栏查看文件列表的时候直接通过图标就可以区分文件类型。

使用mac的小伙伴可以选择下载Vscode-icons-mac,基本图标与Vscode-icons类似,就是文件夹采用的是mac风格。

TODO Highlight 高亮

如果我们在编写代码时想在某个地方做一个标记,后续再来完善或者修改里面的内容,可以利用此插件高亮显示,之后可以帮助我们快速定位到需要修改的代码行。


Code Spell Checker 单词拼写检查

我们在编写代码的时候经常会不小心拼写错误造成软件运行失败,安装这个插件后会自动帮我们识别单词拼写错误并且给出修改建议,大大帮我们减轻了排除bug的压力。


Code Runner 运行选中代码段

如果你需要学习或者接触各种各样的开发语言,那么 Code Runner 插件可以让你不用搭建各种语言的开发环境,直接通过此插件就可以直接运行对应语言的代码,非常适合学习或测试各种开发语言,使用方式直接右键选择Run Code,支持大量语言,包括Node。

Improt Cost 成本提示

这个插件可以在你导入工具包的时候提示这个包的体积,如果体积过大就需要考虑压缩包,为后期上线优化做准备。


GitLens 查看Git信息

将光标移到代码行上,即可显示当前行最近的commit信息和作者,多人开发的时候十分有用,责任到人,防止甩锅。


Bookmarks 书签

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

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

拓展插件

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

Vscode-element-helper

使用element-ui库的可以安装这个插件,编写标签时自动提示element标签名称。


Version Lens 工具包版本信息

在package.json中显示你下载安装的npm工具包的版本信息,同时会告诉你当前包的最新版本。


Vetur VUE语言包

VUE是时下最流行的js框架之一,很多公司都会选择基于VUE来构建产品,Vetur对VUE提供了很好的语言支持。

没有安装该插件之前之前编写后缀名为.vue的文件时代码是白色的

安装插件后编写vue文件输入s,按Tab键就可以自动补全模版。

WakaTime 计算代码工作量

这是一款时间记录工具,它可以帮助你在vs code中记录有效的编程的时间。

并且将数据用折线图的形式展示出来,为你呈现一周内的工作趋势,曾经编写项目的时候最多一天编程将近12个小时,你的付出和努力wakatime都知道。

同时在他的官网中,也会显示用扇形图的形式显示你编写各个语言所占用的时间比例,以及你在各个项目中所用的时间占比,是一个非常好的数据报告,项目结束的时候你可以在它的Dashboard中清晰地看出自己的时间都是如何分配的。

Settings Sync VSCode设置同步到Gist

有时候我们到了新公司或者换了新电脑需要配置新的开发环境,这时候一个一个下载插件,再重新配置vs code就非常麻烦而且你还不一定记得那么全面,通过这个插件我们可以将当前vs code中的配置上传到Gist,之后再通过Gist下载,就可以将所有配置同步到新环境中了。

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

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

选择Personal access tokens,点击右侧Generate new token。

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


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


在vscode中安装Settings Sync插件,输入Ctrl+Shift+p输入Sync,选择更新/上传配置。

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

在控制台中自动生成一串id,之后便可以通过token和id进行配置同步。

输入Ctrl+Shift+p输入Sync,选择下载配置,输入token和id即可同步下载。