提升 JavaScript 开发效率的高级 VSCode 扩展之二！

阿里云最近在作活动，低至2折，有兴趣能够看看：
https://promotion.aliyun.com/...

---

为了保证的可读性，本文采用意译而非直译。
本系列的第一篇能够在这里看到：

提升 JavaScript 开发效率的高级 VSCode 扩展！

想阅读更多优质文章请猛戳GitHub博客,一年百来篇优质文章等着你！

做为一名业余爱好者、专业人员，甚至是每个月只有一次编程的开发人员，你必须知道，对于任何愿意在工做中投入最大生产时间的人来讲，拥有智能和敏捷的工具是相当重要的，废话很少说，介绍插件比较重要。

1. Material Theme & Icons

这是 VS Code 主题中的重要角色。 做者认为重要的主题是在编辑器中用笔和纸书写最接近的东西（特别是在使用无对比变体主题时）。 从集成的工具到文本编辑器，你的编辑器看起来几乎是平的和无缝的。

想象一个史诗般的主题加上史诗般的图标。 Material Theme Icons 是替换默认 VSCode 图标的绝佳选择。设计的大型图标目录与主题融为一体，使其更加美观，这有助于你在资源管理器中轻松找到你的文件。

2. 具备居中布局的禅模式或者勿扰模式 (Zen Mode)

为了让广大苦逼码农可以在 coding/docing 时有清晰的思路，表明最广大码农利益的 VSCode 也加入了“禅模式”。该模式能够在你在页面编辑文件时启用，效果是全屏化你的编辑框，而后带有若隐若现的云雾效果。

打开方式：文件 > 首选项 > 设置 > 用户设置 > 工做台 > 禅模式

3. 具备连字的字体

文字的风格使阅读变得简单方便，你可使用好看连字的字体使编辑器看起来更友好。 这里是支持连字的6种最佳字体 (根据www.slant.co)

你能够尝试 Fira Code，它很是棒并且是开源的。 如下是引入 Fira Code 后在 VSCode 辊更改该字体的方法。

"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true

具体使用方法能够参考：

vscode中修改字体,使用 Fira Code

提升visual studio使用逼格的连体字(Fira code)以及多行编辑(MixEdit)

4.彩虹缩进 （indent-rainbow）

缩进风格，这个扩展为文本前面的缩进着色，在每一个步骤中交替使用四种不一样的颜色。

固然若是须要自定义本身喜欢的颜色，请将如下代码段复制并粘贴到 settings.json 中

"indentRainbow.colors": [
"rgba(16,16,16,0.1)",
"rgba(16,16,16,0.2)",
"rgba(16,16,16,0.3)",
"rgba(16,16,16,0.4)",
"rgba(16,16,16,0.5)",
"rgba(16,16,16,0.6)",
"rgba(16,16,16,0.7)",
"rgba(16,16,16,0.8)",
"rgba(16,16,16,0.9)",
"rgba(16,16,16,1.0)"
],

5. 自定义标题栏

这是一个很棒的视觉调整，改变了不一样项目的标题栏颜色，以便轻松识别它们。 若是你处理可能具备相同代码或文件名的应用程序（例如react-native 应用程序和 React Web应用程序），这很是有用。

设置方式：打开方式：文件 > 首选项 > 设置 > 工做区设置

6. Tag Wrapping

若是你不认识 Emmet，那么你多是一个喜欢打字的人。Emmet 容许你写入缩写代码并返回的相应标记，目前 VSCode 已经内置，因此不用配置了。

若是你想了解更多的 Emmet 的简写，能够查看 Emmet Cheatsheet

7. 内外平衡

这条建议来自 https://vscodecandothat.com/，做者很是推荐它。

你可使用 balance inward 和 balance outward 的 Emmet 命令在 VS 代码中选择整个标记。 将这些命令绑定到键盘快捷键是有帮助的，例如 Ctrl + Shift + 向上箭头用于平衡向外，而 Ctrl + Shift +向下箭头 用于平衡向内。

8. Turbo Console.log()

没有人喜欢输入很是长的语句，好比 console.log()。这真的很烦人，尤为是当你只想快速输出一些东西，查看它的值，而后继续编码的时候。若是我告诉你，你能够像 Lucky Luke同样快速地控制台记录任何东西呢?

这是经过名为 Turbo Console Log 的扩展来完成的。它支持对下面一行中的任何变量进行日志记录，并在代码结构以后自动添加前缀。你还能够 取消注释/注释 alt+shift+u / alt+shift+c 为全部由这个扩展添加的 console.log()。

此外，你也能够经过 alt+shift+d 删除全部：

9. Live server

这是一个很是棒的扩展，能够帮助你启动一个本地开发服务器，为静态和动态页面提供实时从新加载功能，它对 HTTPS、CORS、自定义本地主机地址和端口等主要特性提供了强大的支持。

若是与 VSCode LiveShare 一块儿使用，它甚至可让你共享本地主机。

10. 使用多个游标 复制/粘贴

当在不一样的行上添加游标来编辑多行代码时，发现这个特性很是有用。你能够复制和粘贴这些游标选择的内容，它们将按照复制的顺序进行粘贴。

Mac: opt+cmd+up or opt+cmd+down

Windows: ctrl+alt+up or ctrl+alt+down

Linux: alt+shift+up or alt+shift+down

11. Breadcrumbs（面包屑）

编辑器的内容上方如今有一个被称为 Breadcrumbs 的导航栏，它显示你的当前位置，并容许在符号和文件之间快速导航。要使用该功能，可以使用 View > Toggle Breadcrumbs 命令或经过 breadcrumbs.enabled 设置启用。要与其交互，请使用 Focus Breadcrumbs 命令或按 Ctrl + Shift + 。

12. Code CLI

VS代码有一个强大的命令行界面，容许你控制如何启动编辑器。你能够经过命令行选项打开文件、安装扩展名、更改显示语言和输出诊断信息。

想象一下，你经过 git clone <repo-url> 克隆一个远程库，你想要替换你正在使用的当前 VS Code实例。 经过命令 code . -r 将在没必要离开 CLI 界面的状况下完成这一操做 (在此处了解更多信息)。

12. Polacode

你常常会看到带有定制字体和主题的代码截屏，以下所示。这是在VS代码与 x 扩展

我知道 Carbon 也是一种更好，更可定制的替代品。 可是，Polacode 容许你保留在代码编辑器中并使用你可能已购买的任何专用字体，这些字体在 Carbon 中没法使用。

14. Quokka (JS/TS ScratchPad)

Quokka 是J avaScript 和 TypeScript 的快速原型开发平台。在你输入代码时，它将当即运行你的代码，并在代码编辑器中显示各类执行结果。

Quokka 的一个很棒的扩展插件，当你准备技术面试时，你能够输出每一个步骤，而没必要在调试器中设置断点。它还能够帮助您在实际使用以前研究库的函数，如 Lodash 或 MomentJS，它甚至能够用于异步调用。

15. WakaTime

若是你想记录天天编程所花的时间，WakaTime 是一个扩展，它能够帮助记录和存储有关编程活动的指标和分析。

原文：

https://medium.freecodecamp.o...

代码部署后可能存在的BUG无法实时知道，过后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给你们推荐一个好用的BUG监控工具 Fundebug。

你的点赞是我持续分享好东西的动力，欢迎点赞！

交流

干货系列文章汇总以下，以为不错点个Star，欢迎 加群 互相学习。

https://github.com/qq44924588...

我是小智，公众号「大迁世界」做者，对前端技术保持学习爱好者。我会常常分享本身所学所看的干货，在进阶的路上，共勉！

关注公众号，后台回复福利，便可看到福利，你懂的。