跳到主要内容

3、插件

VS Code 插件推荐​

VS Code 有一个很强大的功能就是支持插件扩展，让你的编辑器仿佛拥有了三头六臂。

image-20210808103011188

上图中，点击红框部分，即可在输入框里，查找你想要的插件名，然后进行安装。

我来列举几个常见的插件，这些插件都很实用。注意：顺序越靠前，越实用。

1、GitLens 【荐】​

我强烈建议你安装插件GitLens，它是 VS Code 中我最推荐的一个插件，简直是 Git 神器，码农必备。如果你不知道，那真是 out 了。

GitLens 在 Git 管理上有很多强大的功能，比如：

  • 将光标放置在代码的当前行，可以看到这样代码的提交者是谁，以及提交时间。这一点，是 GitLens 最便捷的功能。
  • 查看某个 commit 的代码改动记录
  • 查看不同的分支
  • 可以将两个 commit 进行代码对比
  • 甚至可以将两个 branch 分支进行整体的代码对比。这一点，简直是 GitLens 最强大的功能。当我们在不同分支 review 代码的时候，就可以用到这一招。

1.1、vscode源代码管理​

2、Git History​

有些同学习惯使用编辑器中的 Git 管理工具，而不太喜欢要打开另外一个 Git UI 工具的同学，这一款插件满足你查询所有 Git 记录的需求。

3、Live Server 【荐】​

在本地启动一个服务器，代码写完后可以实现「热更新」，实时地在网页中看到运行效果。就不需要每次都得手动刷新页面了。

使用方式：安装插件后，开始写代码；代码写完后，右键选择「Open with Live Server」。

4、Chinese (Simplified) Language Pack for Visual Studio Code​

让软件显示为简体中文语言。

5、Bracket Pair Colorizer 2：突出显示成对的括号【荐】​

Bracket Pair Colorizer 2插件：以不同颜色显示成对的括号，并用连线标注括号范围。简称彩虹括号。

另外，还有个Rainbow Brackets插件，也可以突出显示成对的括号。

6、sftp：文件传输 【荐】​

如果你需要将本地文件通过 ftp 的形式上传到局域网的服务器，可以安装sftp这个插件，很好用。在公司会经常用到。

详细配置已经在上面讲过。

7、open in browser​

安装open in browser插件后，在 HTML 文件中「右键选择 --> Open in Default Browser」，即可在浏览器中预览网页。

8、highlight-icemode：选中相同的代码时，让高亮显示更加明显【荐】​

VSCode 自带的高亮显示，实在是不够显眼。用插件支持一下吧。

所用了这个插件之后，VS Code 自带的高亮就可以关掉了：

在用户设置里添加"editor.selectionHighlight": false即可。

参考链接：vscode 选中后相同内容高亮插件推荐

9、vscode-icons​

vscode-icons 会根据文件的后缀名来显示不同的图标，让你更直观地知道每种文件是什么类型的。

image-20220522161137354

10、Project Manager​

工作中，我们经常会来回切换多个项目，每次都要找到对应项目的目录再打开，比较麻烦。Project Manager 插件可以解决这样的烦恼，它提供了专门的视图来展示你的项目，我们可以把常用的项目保存在这里，需要时一键切换，十分方便。

11、TODO Highlight​

写代码过程中，突然发现一个 Bug，但是又不想停下来手中的活，以免打断思路，怎么办？按照代码规范，我们一般是在代码中加个 TODO 注释。比如：（注意，一定要写成大写TODO，而不是小写的todo）

//TODO:这里有个bug，我一会儿再收拾你

或者：

//FIXME:我也不知道为啥， but it works only that way.

安装了插件 TODO Highlight之后，按住「Cmd + Shift + P」打开命令面板，输入「Todohighlist」，选择相关的命令，我们就可以看到一个 todoList 的清单。

12、WakaTime 【荐】​

统计在 VS Code 里写代码的时间。统计效果如下：

image-20210808104239952

image-20210808104250455

13、Code Time​

Code Time插件：记录编程时间，统计代码行数。

安装该插件后，VS Code 底部的状态栏右下角可以看到时间统计。点击那个位置之后，选择「Code Time Dashboard」，即可查看统计结果。

备注：团长试了一下这个 code time 插件，发现统计结果不是很准。

16、Settings Sync【荐】​

同步的详细操作已在上面讲过。

17、vscode-syncing​

18、Vetur​

Vue 多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。VS Code 官方钦定 Vue 插件，Vue 开发者必备。

19、ES7 React/Redux/GraphQL/React-Native snippets​

React/Redux/react-router 的语法智能提示。

20、minapp：小程序支持​

小程序开发必备插件。

21、Prettier：代码格式化​

Prettier 是一个代码格式化工具，只关注格式化，但不具备校验功能。在一个多人协同开发的团队中，统一的代码编写规范非常重要。一套规范可以让我们编写的代码达到一致的风格，提高代码的可读性和统一性。自然维护性也会有所提高。

22、ESLint：代码格式校验​

日常开发中，建议用可以用 Prettier 做代码格式化，然后用 eslint 做校验。

23、Beautify​

代码格式化工具。

备注：相比之下，Prettier 是当前最流行的代码格式化工具，比 Beautify 用得更多。

24、JavaScript(ES6) code snippets​

ES6 语法智能提示，支持快速输入。

25、Search node_modules 【荐】​

node_modules模块里面的文件夹和模块实在是太多了，根本不好找。好在安装 Search node_modules 这个插件后，输入快捷键「Cmd + Shift + P」，然后输入 node_modules，在弹出的选项中选择 Search node_modules，即可搜索 node_modules 里的模块。

image-20210808105115152

26、indent-rainbow：突出显示代码缩进​

indent-rainbow插件：突出显示代码缩进。

安装完成后，效果如下图所示：

image-20210808105206751

27、javascript console utils：快速打印 log 日志【荐】​

安装这个插件后，当我们按住快捷键「Cmd + Shift + L」后，即可自动出现日志 console.log()。简直是日志党福音。

当我们选中某个变量 name，然后按住快捷键「Cmd + Shift + L」，即可自动出现这个变量的日志 console.log(name)。

其他的同类插件还有：Turbo Console Log。

不过，生产环境的代码，还是尽量少打日志比较好，避免出现一些异常。

编程有三等境界：

  • 第三等境界是打日志，这是最简单、便捷的方式，略显低级，一般新手或资深程序员偷懒时会用。
  • 第二等境界是断点调试，在前端、Java、PHP、iOS 开发时非常常用，通过断点调试可以很直观地跟踪代码执行逻辑、调用栈、变量等，是非常实用的技巧。
  • 第一等境界是测试驱动开发，在写代码之前先写测试。与第二等的断点调试刚好相反，大部分人不是很习惯这种方式，但在国外开发者或者敏捷爱好者看来，这是最高效的开发方式，在保证代码质量、重构等方面非常有帮助，是现代编程开发必不可少的一部分。

28、Code Spell Checker：单词拼写错误检查​

这个拼写检查程序的目标是帮助捕获常见的单词拼写错误，可以检测驼峰命名。从此告别 Chinglish.

29、Local History 【荐】​

维护文件的本地历史记录，强烈建议安装。代码意外丢失时，有时可以救命。

image-20210808105429148

30、Polacode-2020：生成代码截图 【荐】​

可以把代码片段保存成美观的图片，主题不同，代码的配色方案也不同，也也可以自定义设置图片的边框颜色、大小、阴影。

尤其是在我们做 PPT 分享时需要用到代码片段时，或者需要在网络上优雅地分享代码片段时，这一招很有用。

生成的效果如下：

image-20210808105515319

其他同类插件：CodeSnap。我们也可以通过 https://carbon.now.sh/这个网站生成代码图片

有人可能会说：直接用 QQ 截图不行吗？可以是可以，但不够美观、不够干净。

31、Image Preview 【荐】​

图片预览。鼠标移动到图片 url 上的时候，会自动显示图片的预览和图片尺寸。

32、Auto Close Tag、Auto Rename Tag​

自动闭合标签、自动对标签重命名。

33、Better Comments​

为注释添加更醒目、带分类的色彩。

34、CSS Peek​

增强 HTML 和 CSS 之间的关联，快速查看该元素上的 CSS 样式。

35、Vue CSS Peek​

CSS Peek 对 Vue 没有支持，该插件提供了对 Vue 文件的支持。

36、Color Info​

这个便捷的插件，将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了。

37、RemoteHub​

不要惊讶，RemoteHub 和 GitLens 是同一个作者开发出来的。

RemoteHub插件的作用是：可以在本地查看 GitHub 网站上的代码，而不需要将代码下载到本地。

image-20210808105810480

这个插件目前使用的人还不多，赶紧安装起来尝尝鲜吧。

38、Live Share：实时编码分享​

Live Share这个神奇的插件是由微软官方出品，它的作用是：实时编码分享。也就是说，它可以实现你和你的同伴一起写代码。这绝对就是结对编程的神器啊。

安装方式：

打开插件管理，搜索“live share”，安装。安装后重启 VS Code，在左侧会多出一个按钮：

image-20210808105839032

39、Import Cost​

在项目开发过程中，我们会引入很多 npm 包，有时候可能只用到了某个包里的一个方法，却引入了整个包，导致代码体积增大很多。Import Cost插件可以在代码中友好的提示我们，当前引入的包会增加多少体积，这很有助于帮我们优化代码的体积。

40.Paste JSON as Code​

此插件可以将剪贴板中的 JSON 字符串转换成工作代码。支持多种语言。

41.Vim创建【荐】(已成功安装-20210510)​

  • 安装方法

在插件搜索框里查找vim，安装星最多的那个就好：

image-20210414110050917

  • 使用过程发现的问题

整体使用vim，还是不错的；

但是：复制代码直接用ctrl a没有效果（但sublime text3有效果），但删除时直接按delete即可。

  • 因此这里还需要做一些其他配置

解决VscodeVim插件不能使复制粘贴剪切快捷键功能-已测试成功-csdn输出-20210420

1、问题现象

​ 总觉的Vscode的vin功能不是很好用，粘贴，赋值，剪切快捷键有问题。。。。（相比较sublime text3而言，sublime text3就很智能了，默认安装vim插件后，就可以灵活使用剪切、赋值等功能）

image-20210420154455344

image-20210420154804307

2、解决办法

​ 因为vim和系统采用的不是相同的剪切板，所以不能直接利用ctrl+c和ctrl+v。需要进一步进行设置。在Vscode下面，我们只需要对vim的相关配置进行设置就行。具体如下：

image-20210420155307840

image-20210420155403317

通过上述配置即可实现在VScode的vim环境下方面使用ctrl c/x/v快捷键了，很实用！

image-20210420155457229

参考文章：https://jingyan.baidu.com/article/49711c61c3e6c7fa441b7c38.html

3、总结

Vscode的vim插件+常用的ctrl c/x/v+女神壁纸组合的编辑器环境，用起来相当舒服，good，哈哈。

42.markmap插件：将多级标题转化为思维导图​

我一般都是用思维导图的形式来呈现文章的大纲，VS Code 有专门的插件（markmap[5]）可以帮助我们将文章的多级标题转化为思维导图的形式。

image-20220416131631717

image-20220416200947287

Excalidraw-cj插件​

image-20240320174952014

0%