hi,你好!欢迎访问本站!登录
本站由简数采集腾讯云宝塔系统阿里云强势驱动
当前位置:首页 - 教程 - 开发工具 - 正文 君子好学,自强不息!

【编程开辟工具】进步 JavaScript 开辟效力的高等 VSCode 扩大!

2019-11-20开发工具搜奇网63°c
A+ A-
如今,Visual Studio Code无疑是最盛行的轻量级代码编辑器。VS Code的壮大无疑来自于它的插件市场。多亏了开源社区,VS Code如今险些对一切的编程言语、框架和开辟手艺都有支撑。

供应这类支撑的体式格局是多样的,主要包括了为特定手艺供应代码片断、语法高亮、Emmet以及智能提醒功用。

下面本篇文章给人人引荐几个进步 JavaScript 开辟效力的高等 VSCode 扩大!

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

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

花括号和圆括号是许多编程言语不可分割的部份,在 JavaScript 等言语中,在一屏代码中花括号和园括号可能有多层嵌套,有些括号不太轻易辨认哪一个对应哪一个,然则却没有简朴的方法来辨认这些括号前后的对应关联。

括号配对着色(Bracket Pair Colorizer) 和 彩虹缩进(Indent Rainbow)。这是两个差别的扩大。然则,他们就像是一对情侣,可以圆满的合营运用。这些扩大将为你的编辑器增加一系列色彩,并使代码块易于分辨,一旦你习惯了它们,假如 VSCode 没有它们就会让人觉得很清淡。

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

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

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

TODO高亮

通常在举行编码时,你以为可能有更好的方法来实行雷同的操纵。这时候你留下解释// TODO: 须要重构 或其他相干的东西。然则你很轻易忘记了这个解释,并将你的代码推送到主版本库(master) 或许生产环境(production)。 然则你假如运用 Todo Highlighter(高亮),它会高亮的显现并让你轻易看到这个解释。

它以通亮的色彩凸起代码中的 “TODO/FIXME” 或代码任何其他解释,以便一直清晰可见。别的另有一个很好的功用是 List Highlighted annotations ,它会在掌握台中列出了一切 TODO。

运用 Todo Highlighter(高亮)相似的扩大 –

  • Todo+ —  更壮大的 Todo 高亮扩大,具有更多功用。

  • Todo Parser

Import Cost

该扩大许可您检察导入模块的大小,它对 Webpack 中的 bundlers 有很大协助,你可以检察是导入全部库照样只导入特定的实用程序。

REST Client

作为 web 开辟人员,我们常常须要运用 REST api。为了搜检url和搜检相应,运用了 Postman 之类的东西。然则,既然编辑器可以轻松地完成雷同的使命,为何还要运用差别的应用程序呢? REST Client 它许可你发送 HTTP 要求并直接在 Visual Studio 代码中检察相应。

自动闭合标记(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

GitLens

正如其作者所说,GitLens 增强了 Visual Studio Code 中内置的 Git 功用,它包括了许多壮大的功用,比方经由过程跟踪代码显现的代码作者,提交搜刮,汗青记录和GitLens资源管理器。你可以在此处浏览这些功用的完全申明。

相似的扩大 –

  • Git History — 显现提交汗青的优美图表等等。引荐。

  • Git Blame  — 它许可您在状态栏中检察当前所选行的Git Blame信息。 GitLens也供应了相似的功用。

  • Git Indicators — 它许可你检察受影响的文件以及状态栏中增加或删除的行数。

  • Open in GitHub / Bitbucket / Gitlab / VisualStudio.com ! — 它许可您运用单个敕令在浏览器中翻开repo。

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 – 我没有亲身运用它,但它有百万+装置。所以发起你肯定要看一下。

Indenticator(缩进指示器)

它在视觉上凸起显现当前的缩进个数,因而,你可以轻松区分在差别级别缩进的种种代码块。

VSCode Icons

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

相似的扩大 –

  • VSCode Great Icons

  • Studio Icons

Dracula (Theme)

Dracula 是我最喜欢的主题。

我们可以运用快捷键来疾速的挑选替换主题;

起首:按下 Ctrl + k

然后再按下:Ctrl + t

别的引荐

  • 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中心的软件包版本信息。

引荐教程:vscode教程

以上就是进步 JavaScript 开辟效力的高等 VSCode 扩大!的细致内容,更多请关注ki4网别的相干文章!

  选择打赏方式
微信赞助

打赏

QQ钱包

打赏

支付宝赞助

打赏

  移步手机端
【编程开辟工具】进步 JavaScript 开辟效力的高等 VSCode 扩大!

1、打开你手机的二维码扫描APP
2、扫描左则的二维码
3、点击扫描获得的网址
4、可以在手机端阅读此文章
标签:

本文来源:搜奇网

本文地址:https://www.sou7.cn/282556.html

关注我们:微信搜索“搜奇网”添加我为好友

版权声明: 本文仅代表作者个人观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。请记住本站网址https://www.sou7.cn/搜奇网。

发表评论

选填

必填

必填

选填

请拖动滑块解锁
>>