VSCode 是一个开源的跨平台编辑器,已经成为程序员的最爱,特别是在 Web 开发社区。 它快速,可扩展,可定制,并具有大量功能。 如果你还没有使用 VSCode ,你应该了解一下。 VSCode 已经有了数千个扩展。 我将在这篇文章中列出我日常使用的一些扩展。 让我们开始! Quokka.jsQuokka.js 是一个用于 JavaScript 和 TypeScript 的实时运行代码平台。 这意味着它会在你输入后立即运行您的代码,并在您的代码编辑器中显示各种执行结果。 建议你亲自尝试一下。 安装此扩展后,可以按 Ctrl/Cmd(⌘) + Shift + P 显示编辑器的命令选项面板,然后键入 Quokka 以查看可用命令的列表。 选择并运行 “新建JavaScript文件” 命令。 您也可以按(⌘ + K + J)直接打开文件。 您在此文件中键入的任何内容都会立即执行。 Quokka.js类似的扩展 –
括号配对着色(Bracket Pair Colorizer) 和 彩虹缩进(Indent Rainbow)花括号和园括号是许多编程语言不可分割的部分。在 JavaScript 等语言中,在一屏代码中花括号和园括号可能有多层嵌套,然而缺没有简单的机制来识别这些括号从哪里开始,又在哪里结束对。欢迎使用 括号配对着色(Bracket Pair Colorizer) 和 彩虹缩进(Indent Rainbow)。这是两个不同的扩展。然而,他们就像是一对情侣,可以完美的配合使用。这些扩展将为您的编辑器添加一系列颜色,并使代码块易于辨别和令人愉悦。一旦你习惯了它们,如果 VSCode 没有它们就会让人觉得很平淡。 愚人码头注:彩虹缩进(Indent Rainbow)扩展为每个缩进层级用四种不同颜色交替着色。 不使用括号配对着色(Bracket Pair Colorizer) 和 彩虹缩进(Indent Rainbow)使用括号配对着色(Bracket Pair Colorizer) 和 彩虹缩进(Indent Rainbow)后代码片段(Snippets)代码片段(Snippets)就是在编辑器中使用缩写。 例如,你想在编辑中编写 各种各样的框架和类库都有很多代码片段:Javascript(或任何其他语言),React,Redux,Angular,Vue,Jest。 我个人认为 Javascript 代码片段非常有用,因为我主要使用 JS 。 一些很好的代码片段扩展 –
TODO高亮通常在进行编码时,你认为可能有更好的方法来执行相同的操作。 这时你留下注释 它以鲜艳的颜色突显您的 “TODO” / “FIXME” 或代码中的任何其他注释,因此它始终清晰可见。 另外还有一个很好的功能是
Import Cost(花销)Import Cost 允许您查看导入模块的大小。 这对 Webpack 等打包工具来说是一个巨大的帮助。 您可以查看是导入整个库还是仅导入特定实用程序。 不足之处是它不显示自定义文件或模块的花销。 使用 Import CostREST Client作为Web开发人员,我们经常需要使用 REST API。为了检查URL并检查响应,使用 Postman 等工具。但是,当编辑器可以轻松完成相同的任务时,为什么还要使用不同的应用程序呢。欢迎使用 REST Client。它允许您在Visual Studio Code中直接发送 HTTP 请求并查看响应。 使用 REST Client自动闭合标记(Auto Close Tag)和自动重命名标记(Auto Rename Tag)自从 React 问世以及它在过去几年中获得的关注度,类 HTML 的 JSX 语法现在很风靡。我们再次在 JavaScript 代码中使用使用标记。任何 Web 开发人员都会告诉您输入标记很麻烦。在大多数情况下,我们需要一种能够快速轻松地生成标签及其子代的工具。VSCode 中内置的 Emmet 就是一个非常好的例子。但是,有时候,你只想要一些简单而简洁的东西。例如自动更新标记,它在您键入开始标记时自动生成结束标记。当您更改同一个标记对时,结束标记会自动更改。 这两个扩展就是这样做的。 它还适用于JSX和许多其他语言,如XML,PHP,Vue,JavaScript,TypeScript,TSX。 在这里获取这两个扩展 – 自动闭合标记(Auto Close Tag) 和 自动重命名标记(Auto Rename Tag) 使用 Auto Rename Tag使用 Auto Close Tag类似的扩展 –
GitLens正如其作者所说,GitLens增强了Visual Studio Code中内置的Git功能。 它包含了许多强大的功能,例如通过跟踪代码显示的代码作者,提交搜索,历史记录和GitLens资源管理器。 您可以在 此处 阅读这些功能的完整说明。 我只想说你应该安装这个插件,如果你使用git做任何事情的话。 使用GitLens还有其他扩展专注于特定功能。 如果 GitLens 感到臃肿或者你不会使用GitLens 的许多功能,那么你可以安装其他类似的扩展。
类似的扩展 –
Git项目管理器(Git Project Manager,GPM)Git项目管理器(Git Project Manager,GPM)允许您直接从 VSCode 窗口打开一个针对Git存储库的新窗口。 基本上,你可以打开另一个存储库而无需离开VSCode。 安装此扩展后,您必须将 JavaScript 代码:
Indenticator(缩进指示器)Indenticator(缩进指示器) 在视觉上突出显示当前的缩进深度。因此,现在您可以轻松区分在不同层次缩进的各种代码块。 使用 Indenticator类似的扩展 –
VSCode Icons使您的编辑更具吸引力的图标! 使用 VSCode Icons类似的扩展 –
Dracula (主题)Dracula 是我最喜欢的主题。 Dracula 主题其它推荐
这些是我经常使用的一些VSCode扩展。您还喜欢其他哪些扩展和主题?欢迎留言告诉我,非常感谢! Visual Studio Code 相关热文原文链接:https:///top-javascript-vscode-extensions-for-faster-development-c687c39596f5 |
|
来自: ZhouAndrew > 《Web技术》