顶级【VSCode】插件推荐,帮你大幅增强开发体验

0_1523408410994_1.jpeg

1、Quokka.js

Quokka.js 可以实时运行代码,在你敲键盘的同时就可以把结果显示在编辑器里面,就像这样:

0_1523408428000_2.gif

安装完成之后,按Ctrl/Cmd(⌘) + Shift + P 打开插件的配置界面,输入关键词Quokka就可以看到支持哪些命令了。

类似的插件还有:

  • Code Runner ,支持实时执行C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6 等语言。
  • Runner

2、花括号着色和彩虹缩进

普通的花括号和缩进看起来是这样的:

0_1523408629964_3.png

利用Bracket Pair ColorizerIndent Rainbow着色之后看起来是这样的:

0_1523408644850_4.png

3、Snippets(小片段)

这是一个快捷输入工具,比如你想输入import React from 'react';只要敲imr,然后按Tab键,就可以自动补全了。

类似,clg可以自动展开成console.log

目前能支持快捷输入的有:Javascript(或者其它编程语言)、React、Redux、Angular、Vue、Jest。

类似的快捷输入插件有:

4、TODO高亮

Todo Highlighter可以把所有TODO高亮显示,防止你健忘,就像这样:

0_1523410458334_5.png

类似的插件还有:

5、Import Cost

这款插件可以显示你import的东西体积有多大:

0_1523410836866_3.gif

6、REST Client

业务开发过程中,经常需要和REST API打交道,然后我们会通过Postman来调试请求。

有了REST Client之后,就不用再单独安装一个Postman了,直接在VSCode里面就能搞定。

0_1523412034846_4.gif

7、标签自动闭合重命名

一直以来, Emmet 是写HTML标签的神器,现在它已经被内置到了VSCode里面。

但是Emmet写起来还是蛮啰嗦的,有时候我们只是要一些简单的功能,比如自动把HTML标签闭合等等。

所以,Auto Close TagAuto Rename Tag就可以派上用场了。

0_1523412733446_5.gif

0_1523412755558_6.gif

类似的插件还有:

8、GitLens

VSCode内置了对git的支持,GitLens这款插件则增强了这些功能。简而言之,那些git相关的操作都可以在GitLens里面完成。

gitlens

类似的插件还有:

  • Git History ,图形化显示提交历史等。 墙裂推荐
  • Git Blame — It lets you see Git Blame information in the status bar for the currently selected line. A similar feature is also provided by GitLens.
  • Git Indicators — It lets you see the affected files and how many lines have been added or deleted in the status bar.
  • Open in GitHub / Bitbucket / Gitlab / VisualStudio.com ! — It lets you open the repo in the browser with a single command.

9、Git Project Manager

利用Git Project Manager (GPM) ,你可以直接在VSCode里面打开git项目,不需要离开编辑器。

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

0_1523413673166_9.gif

类似的插件还有:

  • Project Manager — Haven’t personally used it, but it has a million+ installs. So definitely check it out.

10、Indenticator(缩进标尺)

它可以高亮显示缩进标尺,点这里查看安装:

0_1523413790898_10.gif

类似的插件还有:

11、VSCode图标集

0_1523413887680_11.gif

类似的插件还有:

12、Dracula (皮肤)

点这里下载

0_1523414004418_6.png

13、Prettier

0_1524741017736_深度截图_选择区域_20180426190916.png
强大的代码格式化工具。

14、其它插件推荐

  • Fira Code — A monospaced font with programming ligatures. Thanks to Rea Deimos.
  • Live Server — A development local Server with live reload feature for static & dynamic pages. Thanks to Dani Vijay.

@业余小编 意译改写,英文版原文:https://codeburst.io/top-javascript-vscode-extensions-for-faster-development-c687c39596f5

少不了Angular的 Angular Language Service。可以在html中获取类的提示信息:属性、方法、以及(event)

Bookmarks 标签

EditorConfig for VS Code

Setting Sync 同步vs code配置(虽然不是很好用)

赞赞赞

@gin bookmarks看了半天没看懂怎么用...有介绍文不...

登录后回复

与 Angular开发者 的连接断开,我们正在尝试重连,请耐心等待