本系列的第一篇可以在这里看到:
进步 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
详细运用要领可以参考:
进步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,迎接 加群 互相进修。
我是小智,民众号「大迁天下」作者,对前端手艺坚持进修爱好者。我会常常分享本身所学所看的干货,在进阶的路上,共勉!
关注民众号,背景复兴福利,即可看到福利,你懂的。