进步 JavaScript 开辟效力的高等 VSCode 扩大之二!

本系列的第一篇可以在这里看到:

进步 JavaScript 开辟效力的高等 VSCode 扩大!

《进步 JavaScript 开辟效力的高等 VSCode 扩大之二!》

想浏览更多优良文章请猛戳GitHub博客,一年百来篇优良文章等着你!

作为一位业余爱好者、专业人员,以至是每一个月只要一次编程的开辟人员,你必需晓得,关于任何情愿在事情中投入最大临盆时刻的人来讲,具有智能和迅速的东西是至关重要的,空话不多说,引见插件比较重要。

1. Material Theme & Icons

这是 VS Code 主题中的重要角色。 作者以为重要的主题是在编辑器中用笔和纸誊写最接近的东西(特别是在运用无对照变体主题时)。 从集成的东西到文本编辑器,你的编辑器看起来几乎是平的和无缝的。

设想一个史诗般的主题加上史诗般的图标。 Material Theme Icons 是替代默许 VSCode 图标的绝佳挑选。设想的大型图标目次与主题融为一体,使其越发雅观,这有助于你在资源管理器中轻松找到你的文件。

《进步 JavaScript 开辟效力的高等 VSCode 扩大之二!》

2. 具有居中规划的禅形式或许勿扰形式 (Zen Mode)

为了让宽大苦逼码农可以在 coding/docing 时有清楚的思绪,代表最宽大码农好处的 VSCode 也加入了“禅形式”。该形式可以在你在页面编辑文件时启用,效果是全屏化你的编辑框,然后带有若隐若现的云雾效果。

翻开体式格局:文件 > 首选项 > 设置 > 用户设置 > 事情台 > 禅形式

《进步 JavaScript 开辟效力的高等 VSCode 扩大之二!》

《进步 JavaScript 开辟效力的高等 VSCode 扩大之二!》

3. 具有连字的字体

笔墨的作风使浏览变得简朴轻易,你可以运用悦目连字的字体使编辑器看起来更友爱。 这里是支撑连字的6种最好字体 (依据www.slant.co)

《进步 JavaScript 开辟效力的高等 VSCode 扩大之二!》

你可以尝试 Fira Code,它异常棒而且是开源的。 以下是引入 Fira Code 后在 VSCode 辊变动该字体的要领。

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

《进步 JavaScript 开辟效力的高等 VSCode 扩大之二!》

详细运用要领可以参考:

vscode中修正字体,运用 Fira Code

进步visual studio运用逼格的连体字(Fira code)以及多行编辑(MixEdit)

4.彩虹缩进 (indent-rainbow)

缩进作风,这个扩大为文本前面的缩进着色,在每一个步骤中交替运用四种差别的色彩。

《进步 JavaScript 开辟效力的高等 VSCode 扩大之二!》

固然假如须要自定义本身喜好的色彩,请将以下代码段复制并粘贴到 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应用程序),这异常有效。

《进步 JavaScript 开辟效力的高等 VSCode 扩大之二!》

设置体式格局:翻开体式格局:文件 > 首选项 > 设置 > 事情区设置

《进步 JavaScript 开辟效力的高等 VSCode 扩大之二!》

6. Tag Wrapping

假如你不认识 Emmet,那末你多是一个喜好打字的人。Emmet 许可你写入缩写代码并返回的响应标记,如今 VSCode 已内置,所以没必要设置了。

《进步 JavaScript 开辟效力的高等 VSCode 扩大之二!》

假如你想相识更多的 Emmet 的简写,可以检察 Emmet Cheatsheet

7. 表里均衡

这条发起来自 https://vscodecandothat.com/,作者异常引荐它。

你可以运用 balance inwardbalance outward 的 Emmet 敕令在 VS 代码中挑选全部标记。 将这些敕令绑定到键盘快捷键是有协助的,比方 Ctrl + Shift + 向上箭头用于均衡向外,而 Ctrl + Shift +向下箭头 用于均衡向内。

《进步 JavaScript 开辟效力的高等 VSCode 扩大之二!》

8. Turbo Console.log()

没有人喜好输入异常长的语句,比方 console.log()。这真的很烦人,尤其是当你只想疾速输出一些东西,检察它的值,然后继承编码的时刻。假如我通知你,你可以像 Lucky Luke一样疾速地掌握台纪录任何东西呢?

这是经由过程名为 Turbo Console Log 的扩大来完成的。它支撑对下面一行中的任何变量举行日记纪录,并在代码构造以后自动增加前缀。你还可以 作废解释/解释 alt+shift+u / alt+shift+c 为一切由这个扩大增加的 console.log()

另外,你也可以经由过程 alt+shift+d 删除一切:

《进步 JavaScript 开辟效力的高等 VSCode 扩大之二!》

9. Live server

这是一个异常棒的扩大,可以协助你启动一个当地开辟服务器,为静态和动态页面供应及时从新加载功用,它对 HTTPS、CORS、自定义当地主机地点和端口等重要特征供应了壮大的支撑。

《进步 JavaScript 开辟效力的高等 VSCode 扩大之二!》

假如与 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

《进步 JavaScript 开辟效力的高等 VSCode 扩大之二!》

11. Breadcrumbs(面包屑)

编辑器的内容上方如今有一个被称为 Breadcrumbs 的导航栏,它显现你的当前位置,并许可在标记和文件之间疾速导航。要运用该功用,可运用 View > Toggle Breadcrumbs 敕令或经由过程 breadcrumbs.enabled 设置启用。要与其交互,请运用 Focus Breadcrumbs 敕令或按 Ctrl + Shift +

《进步 JavaScript 开辟效力的高等 VSCode 扩大之二!》

12. Code CLI

VS代码有一个壮大的敕令行界面,许可你掌握怎样启动编辑器。你可以经由过程敕令行选项翻开文件、装置扩大名、变动显现语言和输出诊断信息。

《进步 JavaScript 开辟效力的高等 VSCode 扩大之二!》

设想一下,你经由过程 git clone <repo-url> 克隆一个长途库,你想要替代你正在运用的当前 VS Code实例。 经由过程敕令 code . -r 将在没必要脱离 CLI 界面的情况下完成这一操纵 (在此处相识更多信息)。

12. Polacode

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

《进步 JavaScript 开辟效力的高等 VSCode 扩大之二!》

我晓得 Carbon 也是一种更好,更可定制的替代品。 然则,Polacode 许可你保留在代码编辑器中并运用你能够已购置的任何专用字体,这些字体在 Carbon 中没法运用。

14. Quokka (JS/TS ScratchPad)

Quokka 是J avaScript 和 TypeScript 的疾速原型开辟平台。在你输入代码时,它将马上运转你的代码,并在代码编辑器中显现种种实行效果。

《进步 JavaScript 开辟效力的高等 VSCode 扩大之二!》

Quokka 的一个很棒的扩大插件,当你预备手艺面试时,你可以输出每一个步骤,而没必要在调试器中设置断点。它还可以协助您在实际运用之前研讨库的函数,如 Lodash 或 MomentJS,它以至可以用于异步挪用。

15. WakaTime

假如你想纪录天天编程所花的时刻,WakaTime 是一个扩大,它可以协助纪录和存储有关编程运动的目标和剖析。

《进步 JavaScript 开辟效力的高等 VSCode 扩大之二!》

原文:

https://medium.freecodecamp.o…

代码布置后能够存在的BUG没法及时晓得,预先为相识决这些BUG,花了大批的时刻举行log 调试,这边顺便给人人引荐一个好用的BUG监控东西 Fundebug

你的点赞是我延续分享好东西的动力,迎接点赞!

交换

干货系列文章汇总以下,以为不错点个Star,迎接 加群 互相进修。

https://github.com/qq44924588…

我是小智,民众号「大迁天下」作者,对前端手艺坚持进修爱好者。我会常常分享本身所学所看的干货,在进阶的路上,共勉!

关注民众号,背景复兴福利,即可看到福利,你懂的。

《进步 JavaScript 开辟效力的高等 VSCode 扩大之二!》

    原文作者:前端小智
    原文地址: https://segmentfault.com/a/1190000017935676
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞