visual studio 代码提示插件_直接拿来用!VS Code 最强插件指南

8e5ec38ca8d76771969a7f8eebff7e17.gif

作为一款优秀的代码编辑器,Visual Studio Code 中最常用的插件有哪些?

61a2a0df3f873e51c3f43e4d5ee247f8.png

作者 | Adrian Hajdin,JavaScript 开发者

译者 | 虎说

责编 | 屠敏

出品 | CSDN(ID:CSDNNews)

以下为译文:

这是一篇关于我个人认为是很好的 Visual Studio Code 插件的简短文章。文中所有出现的插件都是我的最爱,如果你也有使用其他插件但我没有提及到的,欢迎在评论区推荐出来。

2ff3190063990c624d729fba6725839e.png

Code Time

Code Time(https://marketplace.visualstudio.com/items?itemName=softwaredotcom.swdc-vscode)是一个开源插件,它可以在代码编辑器中提供编程度量。安装扩展插件程序后,系统将提示你登录其登陆界面。在代码编辑器内部,你可以按下 command + shift + P。这时将显示一个可以键入的窗口 Code Time,然后你可以选择在代码编辑器内或浏览器中显示数据。

在浏览器上,所有信息都将如下所示:

c28373a4e974bd8b5022c131d6b89246.png

在浏览器内部,情况会更加丰富多彩:

c882a9f514ed4025d3934d7f85a57d77.png

如果你想知道或者你需要知道实际花费了多少时间编码,这个插件就会显得非常有用。

70013c073f2a4df995778b3b842ac28f.png

One Dark Pro

One Dark Pro 是 Atom最受欢迎的主题,它是有史以来 Visual Studio Code 下载次数最多的主题之一。

4bbf77060300f669140e6ea8c3e61d42.png

One Dark Pro图标主题

正如你在此示例中所看到的,我们为客户端和服务器等目录以及 .eslintrc .gitignore 和 package.json 等文件提供了图标。

One Dark Pro 一直使用 React、Angular、Redux 和许多不同的框架和库,为组件,工具,样式以及 reducer,actions 和 store 提供不同的目录图标。

7b6470ebe641f15341dda5b515f56202.png

Bracket Pair Colorize

此扩展插件允许使用颜色标识匹配的括号。当你拥有深层嵌套的对象或函数时,这个插件就会变的非常有用,如下所示:     

93a2b23047a7dba1fd7bc243b25016b1.png

Bracket Pair Colorizer

f96700447ac6f2b2d3595d1222d6b978.png

Color Highlight

“颜色突出显示”显示任何颜色代码的直观表示。例如,如果你键入 RGB,RGBa,十六进制或任何其他颜色代码,你将能够在视觉上看到颜色,如下例所示:

382b52707e282ccf4d641c6d668d8029.png

颜色突出显示

6ccecc19d49b8cbc3f371b971db34fc2.png

Path Intellisense

Path Intellisense 是一个 Visual Studio Code 插件,可自动补全文件名。它对于在 React 中导入组件非常有用,因为你不必手动输入要查找的文件的路径。     

ae64db9bca167a511bda4d336fcb78c6.gif

路径智能感知

63647900f2209dce284bce8612e065e4.png

ES7 React/Redux/GraphQL/React-Native片段

列表中的下一个扩展名是 ES7 React/Redux/GraphQL/React-Native 代码段。相当长的名字,但相信我,它会节省你很多时间,特别是如果你在 React 使用它的时候。此扩展程序为你提供了 ES7 中的 JavaScript 和 React/Redux 代码段以及 VS 代码的 Babel 插件功能。

在你的代码编辑器里面你可以按 command + shift + P,然后 ES7 Snippet Search 你会看到一长串的短命令,你可以运行这些命令以获得更长的代码片段。     

1a6e62e8d58010d133c8f38a0fe6325d.png

ES7 React/Redux/GraphQL/React-Native片段

你也可以在上面执行搜索,以便你可以轻松找到功能组件片段的命令。只需在编辑器中键入命令并按Enter即可运行命令。就这么简单,就像魔术一样。

e6b4cad0d254790ae3aaa73436a5c60a.png

GitLens — Git supercharged

GitLens 增强了 Visual Studio Code 中内置的 Git 功能。

它可以帮助你通过 git-blame 注释和代码注释一目了然地查看代码作者身份,无缝导航和探索 Git 存储库,通过强大的比较命令获得有价值的见解等等。

你只需要单击代码行,就可以看到编辑它的人、编辑它的时间以及提交的内容。     

81aa6f9e552946a535ee05317443d805.png

GitLens

如果你还有其他的好的插件欢迎评论推荐!

原文链接:https://medium.freecodecamp.org/visual-studio-code-extensions-ff7f29b71341

本文为 CSDN 翻译,如需转载,请注明来源出处。

【END】

287c3bd65448114a01edc3f297f6ecbf.png

 热 文 推 荐 

☞2019 开源安全报告:开发者安全技能短板明显,热门项目成漏洞重灾区!

☞5G 是安全漏洞的“救世主”吗?

☞再见,中国移动 3G!

☞虎口夺食! 打破Facebook谷歌垄断, MIT大神和他的区块链数据库传奇! |人物志

☞杨超越第一,Python第二

☞以安全之名:2019年DevSecOps社区调研白皮书解读

☞少儿编程只学会 Coding 就够了?比这更重要的是……

☞身为程序员的父母,你年薪多少才能让“码二代” 不输起跑线上?

System.out.println("点个在看吧!");
console.log("点个在看吧!");print("点个在看吧!");printf("点个在看吧!\n");
cout <"点个在看吧!" <Console.WriteLine("点个在看吧!");
Response.Write("点个在看吧!");alert("点个在看吧!")echo "点个在看吧!"

4899a742db1b0e72e5e25679d545e094.png 喜欢就一起“在看”吧!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值