关于javascript:28-个提升开发幸福度的-VsCode-插件

45次阅读

共计 6522 个字符，预计需要花费 17 分钟才能阅读完成。

点赞再看，微信搜寻 【大迁世界】 关注这个没有大厂背景，但有着一股向上踊跃心态人。本文 GitHub https://github.com/qq44924588… 上曾经收录，文章的已分类，也整顿了很多我的文档，和教程材料。

双 1111 拼团低至 85 元，来一起拼团学习搭建本人的博客吧

服务器如何搭建博客

1. Quokka.js

Quokka.js 是一个用于 JavaScript 和 TypeScript 的实时运行代码平台。这意味着它会实时运行你输出后的代码，并在编辑器中显示各种执行后果，倡议亲自尝试一下。

装置此扩大后，能够按 Ctrl / Cmd（⌘）+ Shift + P 显示编辑器的命令选项板，而后键入 Quokka 以查看可用命令的列表。抉择并运行“New JavaScript File”命令。你也能够按（⌘+ K + J）间接关上文件。在此文件中输出的任何内容都会立刻执行。

Quokka.js 相似的扩大 –

  • Code Runner – 反对多种语言，如 C，C ++，Java，JavaScript，PHP，Python，Perl，Perl 6 等。
  • Runner

2. 括号配对着色(Bracket Pair Colorizer) 和 彩虹缩进(Indent Rainbow)

花括号和圆括号是许多编程语言不可分割的局部，在 JavaScript 等语言中，在一屏代码中花括号和园括号可能有多层嵌套，有些括号不太容易辨认哪个对应哪个，然而却没有简略的办法来辨认这些括号前后的对应关系。

括号配对着色(Bracket Pair Colorizer) 和 彩虹缩进(Indent Rainbow)。这是两个不同的扩大。然而，他们就像是一对情侣，能够完满的配合应用。这些扩大将为你的编辑器增加一系列色彩，并使代码块易于分别，一旦你习惯了它们，如果 VSCode 没有它们就会让人感觉很平淡。

不应用括号配对着色(Bracket Pair Colorizer) 和 彩虹缩进(Indent Rainbow)

应用括号配对着色 (Bracket Pair Colorizer) 和 彩虹缩进(Indent Rainbow) 后

3. snippets(代码片段)

代码片段是编辑器中的短代码。因而，能够输出 imr 并按 Tab 来开展该代码片段，而不是 ’import React from ‘。相似地，clg 变成了 console.log。

各种各样的框架和类库都有很多代码片段：Javascript，React，Redux，Angular，Vue，Jest。我集体认为 Javascript 代码片段十分有用，因为我次要应用 JS。

一些很好的代码片段扩大 –

  • JavaScript (ES6) code snippets
  • React-Native/React/Redux snippets for es6/es7
  • React Standard Style code snippets

4. TODO 高亮

通常在进行编码时，你认为可能有更好的办法来执行雷同的操作。这时你留下正文 // TODO: 须要重构 或其余相干的货色。然而你很容易遗记了这个正文，并将你的代码推送到主版本库(master) 或者生产环境(production)。然而你如果应用 Todo Highlighter（高亮），它会高亮的显示并让你容易看到这个正文。

它以亮堂的色彩突出代码中的“TODO/FIXME”或代码任何其余正文，以便始终清晰可见。另外还有一个很好的性能是 List Highlighted annotations，它会在控制台中列出了所有 TODO。

应用 Todo Highlighter（高亮）相似的扩大 –

  • Todo+ —  更弱小的 Todo 高亮扩大，具备更多功能。
  • Todo Parser

5. Import Cost

该扩大容许您查看导入模块的大小，它对 Webpack 中的 bundlers 有很大帮忙，你能够查看是导入整个库还是只导入特定的实用程序。

6. REST Client

作为 web 开发人员，咱们常常须要应用 REST api。为了查看 url 和查看响应，应用了 Postman 之类的工具。然而，既然编辑器能够轻松地实现雷同的工作，为什么还要应用不同的应用程序呢? REST Client 它容许你发送 HTTP 申请并间接在 Visual Studio 代码中查看响应。

7. 主动闭合标记 (Auto Close Tag) 和主动重命名标记(Auto Rename Tag)

自从 React 的呈现以及它在过来几年取得的吸引力以来，以 JSX 模式呈现的相似 html 的语法当初十分风行。咱们还必须应用 JavaScript 标签进行编码。任何 web 开发人员都会通知你，输出标签是一件苦楚的事件。在大多数状况下，咱们须要一个可能疾速、轻松地生成标签及其子标签的工具。Emmet 是 VSCode 中一个很好的例子，然而，有时候，你只是想要一些简单明了的货色。例如自动更新标签，它在你输出开始标签时主动生成完结标签。当你更改雷同的标签时，敞开标记会主动更改，这两个扩大就是这样做的。

它还实用于 JSX 和许多其余语言，如 XML，PHP，Vue，JavaScript，TypeScript，TSX。

在这里获取这两个扩大 – 主动闭合标记(Auto Close Tag) 和 主动重命名标记(Auto Rename Tag)。

相似的扩大 –

  • Auto Complete Tag —  联合主动重命名和主动闭合标记的性能。
  • Close HTML/XML tag

8. GitLens

正如其作者所说，GitLens 加强了 Visual Studio Code 中内置的 Git 性能，它蕴含了许多弱小的性能，例如通过跟踪代码显示的代码作者，提交搜寻，历史记录和 GitLens 资源管理器。你能够在此处浏览这些性能的残缺阐明。

相似的扩大 –

  • Git History — 显示提交历史的精美图表等等。举荐。
  • Git Blame  — 它容许您在状态栏中查看以后所选行的 Git Blame 信息。GitLens 也提供了相似的性能。
  • Git Indicators — 它容许你查看受影响的文件以及状态栏中增加或删除的行数。
  • Open in GitHub / Bitbucket / Gitlab / VisualStudio.com ! — 它容许您应用单个命令在浏览器中关上 repo。

9. Git 我的项目管理器(Git Project Manager,GPM)

Git 我的项目管理器 (Git Project Manager,GPM) 容许你间接从 VSCode 窗口关上一个针对 Git 存储库的新窗口。基本上，你能够关上另一个存储库而无需来到 VSCode。

装置此扩大后，您必须将 gitProjectManager.baseProjectsFolders 设置为蕴含 repos 的 URL 列表。例如：

{
    "gitProjectManager.baseProjectsFolders": [
        "/home/user/nodeProjects",
        "/home/user/personal/pocs"
    ]
}

相似的扩大 –

Project Manager – 我没有亲自应用它，但它有百万 + 装置。所以倡议你肯定要看一下。

10. Indenticator(缩进指示器)

它在视觉上突出显示以后的缩进个数，因而，你能够轻松辨别在不同级别缩进的各种代码块。

11. VSCode Icons

使您的编辑更具吸引力的图标！

相似的扩大 –

  • VSCode Great Icons
  • Studio Icons

12. Dracula (Theme)

Dracula 是我最喜爱的主题。

咱们能够应用快捷键来疾速的抉择更换主题；

首先：按下 Ctrl + k

而后再按下：Ctrl + t

13. 其它举荐

  • Fira Code — 带编程连体字的等宽字体。哲人码头注：clone 我的项目后，找到 ttf 文件夹，而后装置该文件夹中的字体文件。重新启动 VSCode，抉择 TOOLS -> Options -> Fonts and Colors，抉择 Fira Code 即可。
  • Live Server — 一个具备动态和动静页面的实时从新加载性能的本地开发服务器。
  • EditorConfig for VS Code – 此插件尝试应用.editorconfig 文件中的设置笼罩用户 / 工作区设置，不须要其余或特定于 vscode 的文件。与任何 EditorConfig 插件一样，如果未指定 root = true，EditorConfig 将持续在我的项目内部查找.editorconfig 文件。
  • Prettier for VSCode — 一个代码格式化工具。
  • Bookmarks – 它能够帮忙您在代码中导航，轻松疾速地在重要地位之间挪动。不再须要搜寻代码，它还反对一组抉择命令，容许您抉择书签线和书签线之间的区域，它对日志文件剖析十分有用。
  • Path Intellisense — Visual Studio Code 插件，可主动填充文件名。
  • Version Lens — 在 Visual Studio 代码编辑器中显示 npm，jspm，bower，dub 和 dotnet 外围的软件包版本信息。

14. Material Theme & Icons

这是 VS Code 主题中的重要角色。作者认为重要的主题是在编辑器中用笔和纸书写最靠近的货色（特地是在应用无比照变体主题时）。从集成的工具到文本编辑器，你的编辑器看起来简直是平的和无缝的。

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

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

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

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

16. 具备连字的字体

文字的格调使浏览变得简略不便，你能够应用难看连字的字体使编辑器看起来更敌对。这里是反对连字的 6 种最佳字体 (依据 www.slant.co)

你能够尝试 Fira Code，它十分棒而且是开源的。以下是引入 Fira Code 后在 VSCode 辊更改该字体的办法。

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

具体应用办法能够参考：

vscode 中批改字体, 应用 Fira Code

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

17. 彩虹缩进（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)"
],

18. 自定义标题栏

这是一个很棒的视觉调整，扭转了不同我的项目的标题栏色彩，以便轻松辨认它们。如果你解决可能具备雷同代码或文件名的应用程序（例如 react-native 应用程序和 React Web 应用程序），这十分有用

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

19. Tag Wrapping

如果你不意识 Emmet，那么你可能是一个喜爱打字的人。Emmet 容许你写入缩写代码并返回的相应标记，目前 VSCode 曾经内置，所以不必配置了。

如果你想理解更多的 Emmet 的简写，能够查看 Emmet Cheatsheet

20. 内外均衡

这条倡议来自 https://vscodecandothat.com/，作者十分举荐它。

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

21. Turbo Console.log()

没有人喜爱输出十分长的语句，比方 console.log()。这真的很烦人，尤其是当你只想疾速输入一些货色，查看它的值，而后持续编码的时候。如果我通知你，你能够像 Lucky Luke 一样疾速地控制台记录任何货色呢?

这是通过名为 Turbo Console Log 的扩大来实现的。它反对对上面一行中的任何变量进行日志记录，并在代码构造之后主动增加前缀。你还能够 勾销正文 / 正文 alt+shift+u / alt+shift+c 为所有由这个扩大增加的 console.log()。

此外，你也能够通过 alt+shift+d 删除所有：

22. Live server

这是一个十分棒的扩大，能够帮忙你启动一个本地开发服务器，为动态和动静页面提供实时从新加载性能，它对 HTTPS、CORS、自定义本地主机地址和端口等次要个性提供了弱小的反对。

如果与 VSCode LiveShare 一起应用，它甚至能够让你共享本地主机。

23. 应用多个游标 复制 / 粘贴

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

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

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

24. Breadcrumbs（面包屑）

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

25. Code CLI

代码有一个弱小的命令行界面，容许你管制如何启动编辑器。你能够通过命令行选项关上文件、装置扩展名、更改显示语言和输入诊断信息。

设想一下，你通过 git clone <repo-url> 克隆一个近程库，你想要替换你正在应用的以后 VS Code 实例。通过命令 code . -r 将在不用来到 CLI 界面的状况下实现这一操作 (在此处理解更多信息)。

26. Polacode

编辑中可能存在的 bug 没法实时晓得，预先为了解决这些 bug, 花了大量的工夫进行 log 调试，这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。

原文：https://codeburst.io/top-java…

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

我晓得 Carbon 也是一种更好，更可定制的替代品。然而，Polacode 容许你保留在代码编辑器中并应用你可能已购买的任何专用字体，这些字体在 Carbon 中无奈应用。

27. Quokka (JS/TS ScratchPad)

Quokka 是 J avaScript 和 TypeScript 的疾速原型开发平台。在你输出代码时，它将立刻运行你的代码，并在代码编辑器中显示各种执行后果。

Quokka 的一个很棒的扩大插件，当你筹备技术面试时，你能够输入每个步骤，而不用在调试器中设置断点。它还能够帮忙您在理论应用之前钻研库的函数，如 Lodash 或 MomentJS，它甚至能够用于异步调用。

28. WakaTime

如果你想记录每天编程所花的工夫，WakaTime 是一个扩大，它能够帮忙记录和存储无关编程流动的指标和剖析。

交换

干货系列文章汇总如下，感觉不错点个 Star，欢送 加群 互相学习。

https://github.com/qq44924588…

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

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

正文完
javascript
发表至： javascript
2020-11-02
 0
npm-runscript-全方位解读
关于javascript:对CSS变量不熟悉这5个事例可看看
关于javascript:JavaScript-数据类型
关于SegmentFault:SAP-Fiori-Elements-Overview-页面的创建