使用顶级 VSCode 扩展来加快开发 JavaScript

发表于 2018年08月24日 by 愚人码头 被浏览 3,942 次 分享到:

 

小编推荐:掘金是一个面向程序员的高质量技术社区,从 一线大厂经验分享到前端开发最佳实践,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。

VSCode 是一个开源的跨平台编辑器,已经成为程序员的最爱,特别是在 Web 开发社区。 它快速,可扩展,可定制,并具有大量功能。 如果你还没有使用 VSCode ,你应该了解一下。

VSCode 已经有了数千个扩展。 我将在这篇文章中列出我日常使用的一些扩展。 让我们开始!

Quokka.js

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

安装此扩展后,可以按 Ctrl/Cmd(⌘) + Shift + P 显示编辑器的命令选项面板,然后键入 Quokka 以查看可用命令的列表。 选择并运行 “新建JavaScript文件” 命令。 您也可以按(⌘ + K + J)直接打开文件。 您在此文件中键入的任何内容都会立即执行。

Quokka.js类似的扩展 –

  • Code Runner – 支持多种语言,如C,C ++,Java,JavaScript,PHP,Python,Perl,Perl 6等。
  • Runner

括号配对着色(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)就是在编辑器中使用缩写。 例如,你想在编辑中编写 import React from 'react'; 这样一段代码,通过代码片段(Snippets),你可以输入 imr 并按 Tab 键来展开此代码段。 同样,clg 会展开为 console.log

各种各样的框架和类库都有很多代码片段:Javascript(或任何其他语言),React,Redux,Angular,Vue,Jest。 我个人认为 Javascript 代码片段非常有用,因为我主要使用 JS 。

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

TODO高亮

通常在进行编码时,你认为可能有更好的方法来执行相同的操作。 这时你留下注释// TODO: 需要重构 或其他相关的东西。 但是你很容易忘记了这个注释,并将你的代码推送到主版本库(master) 或者生产环境(production)。 但是你如果使用 Todo Highlighter(高亮),这钟请客就不会发生。

它以鲜艳的颜色突显您的 “TODO” / “FIXME” 或代码中的任何其他注释,因此它始终清晰可见。 另外还有一个很好的功能是 List Highlighted annotations 。 它会在控制台中列出了所有 TODO 。

使用 Todo Highlighter(高亮)类似的扩展 –

  • Todo+ —  更强大的 Todo 高亮扩展,具有更多功能。
  • Todo Parser

Import Cost(花销)

Import Cost 允许您查看导入模块的大小。 这对 Webpack 等打包工具来说是一个巨大的帮助。 您可以查看是导入整个库还是仅导入特定实用程序。

不足之处是它不显示自定义文件或模块的花销。

使用 Import Cost

REST 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。

安装此扩展后,您必须将 gitProjectManager.baseProjectsFolders 设置为包含 repos 的URL列表。例如:

JavaScript 代码:
  1. {
  2. "gitProjectManager.baseProjectsFolders": [
  3. "/home/user/nodeProjects",
  4. "/home/user/personal/pocs"
  5. ]
  6. }

使用 Git Project Manager类似的扩展 –

  • Project Manager – 我没有亲自使用它,但它有百万+安装。所以建议你一定要看一下。

Indenticator(缩进指示器)

Indenticator(缩进指示器) 在视觉上突出显示当前的缩进深度。因此,现在您可以轻松区分在不同层次缩进的各种代码块。

使用 Indenticator类似的扩展 –

VSCode Icons

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

使用 VSCode Icons类似的扩展 –

Dracula (主题)

Dracula 是我最喜欢的主题。

Dracula 主题


其它推荐

  • 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 – 它可以帮助您在代码中导航,轻松快速地在重要位置之间移动。不再需要搜索代码。它还支持一组选择命令,允许您选择书签线和书签线之间的区域。它对日志文件分析非常有用。
  • Settings Sync — 允许您在 Gist 中保存用户设置,扩展名和快捷键绑定,以便您可以在几分钟内设置新的 VSCode。
  • Multiple clipboards for VSCode — 覆盖常规的“复制”和“剪切”命令,以将选择保留在剪贴板中。还增加了将几个文本块复制到单个复制缓冲区的功能。
  • Path Intellisense — Visual Studio Code插件,可自动填充文件名。
  • Version Lens — 在Visual Studio代码编辑器中显示npm,jspm,bower,dub和dotnet核心的软件包版本信息。

这些是我经常使用的一些VSCode扩展。您还喜欢其他哪些扩展和主题?欢迎留言告诉我,非常感谢!

Visual Studio Code 相关热文

原文链接:https://codeburst.io/top-javascript-vscode-extensions-for-faster-development-c687c39596f5

关注WEB前端开发官方公众号

关注国内外最新最好的前端开发技术干货,获取最新前端开发资讯,致力于打造高质量的前端技术分享公众号

所属分类: JavaScript前端工具前端资源React | 标签: Auto Close TagAuto Complete TagAuto Rename TagBookmarksBracket Pair ColorizerClose HTML/XML tagCode RunnerDraculaEditorConfig for VS CodeFira CodeGit BlameGit HistoryGit IndicatorsGit Project ManagerGitLensGit项目管理器GuidesImport CostIndent RainbowIndenticatorLive ServerMultiple clipboards for VSCodePath IntellisenseProject ManagerQuokka.jsREST ClientRunnerSettings SyncStudio IconsTODOVSCode Great IconsVSCode IconsVersion LensVisual Studio Codesnippets主题代码片段功能彩虹缩进括号配对着色插件缩进指示器自动重命名标记自动闭合标记花销设置语法提示高亮 | 书签: permalink.

Post navigation

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论

姓名 *

电子邮件 *

站点

搜索:

分类目录

近期评论

标签

功能

 

使用顶级 VSCode 扩展来加快开发 JavaScript的更多相关文章

  1. 提高 JavaScript 开发效率的高级 VSCode 扩展!

    原文:提高 JavaScript 开发效率的高级 VSCode 扩展! 作者:前端小智 Fundebug经授权转载,版权归原作者所有. Quokka.js Quokka.js 是一个用于 JavaSc ...

  2. 2015年10个最佳Web开发JavaScript库

    2015年10个最佳Web开发JavaScript库 现在的互联网可谓是无所不有,有大量的JavaScript项目开发工具充斥于网络中.我们可以参考网上的指导来获取构建代码项目的各种必要信息.如果你是 ...

  3. VSCode 微信小程序扩展开发

    写在前面 为什么要开发这个扩展呢,是因为微信开发者工具自身不支持页面引入组件的跳转,人工根据引入组件路径查看对应代码的方式,效率偏低.就形如这样的json文件,引入了多个组件,比如要查看 " ...

  4. 手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单

    手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单   手把手教你开发chrome扩展一:开发Chrome Extenstion其实很简单 手把手教你开发Chrome扩 ...

  5. 我编写 33 个 VSCode 扩展的原因以及管理扩展的经验

    简评:使用工具的同时自己创造一些工具或扩展,是一件很棒的事情. 以下"我"指原作者 Fabio 大家好,我叫 Fabio,是一位自学成才的开发人员,热衷于开源和授权.我也喜欢自己制 ...

  6. VSCode, Django, and Anaconda开发环境集成配置[Windows]

    之前一直是在Ubuntu下进行Python和Django开发,最近换了电脑,把在Virtual Box 下跑的Ubuntu开发机挪过来总是频繁崩溃,索性就尝试把开发环境挪到Windows主力机了. 不 ...

  7. 万字长文把 VSCode 打造成 C++ 开发利器

    https://zhuanlan.zhihu.com/p/96819625 面对大量代码,在开发任务繁重场景下,VSCode 绝对是一把利器.本文虽以 C++为引,但在 python.php.java ...

  8. Mac上利用VScode配置c/c++开发环境

    Mac上利用VScode配置c/c++开发环境 哭辽,Typora里面最好不要插入表情,不然保存会闪退 首先你要有一个vscode 在扩展里面下载c/c++ 第一步 ⬆+com+p 打开命令模式:选择 ...

  9. 实现自动切换主题的 VSCode 扩展

    在白天,我常常需要浅色的 VSCode 主题:在夜间,我常常需要深色的 VSCode 主题.我不希望每天手动切换两次 VSCode 主题,所以我开发了这个可以自动切换主题的 VSCode 扩展 -- ...

随机推荐

  1. Katalon Studio之接口测试中token处理

    前言 最近抽时间接触了一下Katalon Studio(后面简称KS),并且利用KS做了一些接口测试的试验,感觉还不错,不过其中接口授权中缺少通过token动态验证的方案,虽然KS支持Authoriz ...

  2. angular.js学习笔记(二)

    1.安装core ,shared模块 ng g m core  ng g m shared 2.在shared中导入core模块   core模块只加载一次所以将公共组件放到core中 3.创建公共组 ...

  3. 微信小程序开发-窗体设置

    "window": { "backgroundTextStyle": "light", "navigationBarBackgro ...

  4. MemCache详细解读

    MemCache是什么 MemCache是一个自由.源码开放.高性能.分布式的分布式内存对象缓存系统,用于动态Web应用以减轻数据库的负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高 ...

  5. 搭建一个舒适的 .NET Core 开发环境

    最近,一直在往.Net Core上迁移,随着工作的深入,发现.Net Core比.Net Framework好玩多了.不过目前还在windows下开发,虽然VisualStudio是宇宙第一神器,但是 ...

  6. 使用Nginx做图片服务器时候,配置之后图片访问一直是 404问题解决

    我的错误配置是: 服务器文件根地址: 想通过浏览器输入这个地址访问到图片: 但是会发现文件找不到会一直404,原因是根路径配置错误,来看下root路径原理: root 配置的意思是,会在root配置的 ...

  7. [Swift]LeetCode110. 平衡二叉树 | Balanced Binary Tree

    Given a binary tree, determine if it is height-balanced. For this problem, a height-balanced binary ...

  8. [Swift]LeetCode748. 最短完整词 | Shortest Completing Word

    Find the minimum length word from a given dictionary words, which has all the letters from the strin ...

  9. [Swift]LeetCode913.猫与老鼠 | Cat and Mouse

    A game on an undirected graph is played by two players, Mouse and Cat, who alternate turns. The grap ...

  10. [Swift]LeetCode919. 完全二叉树插入器 | Complete Binary Tree Inserter

    A complete binary tree is a binary tree in which every level, except possibly the last, is completel ...