VScode插件推荐

VS Code 是一个开源的跨平台开发工具,是我目前用的最顺手的编辑器。本文介绍了一些常用的插件和快捷键,帮你大大提高软件开发的效率。

基本插件

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

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

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

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

Live S�的文件类型生成对应的图标,这样我们在侧边栏查看文件列表的时候直接通过图标就可以区分文件类型。

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 提供了很好的语言支持。

WakaTime 计算代码工作量

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

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。

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

在 vscode 中安装 Settings Sync 插件,输入 Ctrl+Shift+p 输入 Sync,选择更新/上传配置,将 GitHub 中生成的 token 输入,点击回车
在控制台中自动生成一串 id,之后便可以通过 token 和 id 进行配置同步。
输入 Ctrl+Shift+p 输入 Sync,选择下载配置,输入 token 和 id 即可同步下载。