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

作者 | Adrian Hajdin,JavaScript 开发者

译者 | 虎说

责编 | 屠敏

出品 | CSDN(ID:CSDNNews)

以下为译文:

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

Code Time

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

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

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

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

One Dark Pro

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

One Dark Pro图标主题

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

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

Bracket Pair Colorize

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

Bracket Pair Colorizer

Color Highlight

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

颜色突出显示

Path Intellisense

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

路径智能感知

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 你会看到一长串的短命令,你可以运行这些命令以获得更长的代码片段。

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

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

GitLens — Git supercharged

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

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

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

GitLens

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

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

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

直接拿来用!VS Code 最强插件指南相关推荐

  1. macos安装vscode_VS Code 代码编辑器入门指南:核心组件与概念

    作者:思考问题的熊 写在前面 如果当电脑只能装一个软件还需要尽量不影响日常学习工作时,不知道你的选择会是什么.我把这个看似「荒诞」的问题理解为「All-in-One」的升级版拷问. 这个问题陪伴了我很 ...

  2. asp.net怎么实现按条件查询_Display Posts : 按条件显示WordPress文章的最强插件

    转自丘壑博客 WordPress本质上是一个内容管理系统(CMS),是显示.创建.发布和维护内容的软件. 本文介绍的插件 Display Posts 主要就是用来扩展WordPress关于显示内容这部 ...

  3. 2019最强就业指南,看了达摩院十大科技趋势,再也不怕互联网寒冬

    https://www.toutiao.com/a1621518118218776 [2019最强就业指南,看了达摩院十大科技趋势,再也不怕互联网寒冬] 达摩院刚发了份2019十大科技趋势,简直就是十 ...

  4. 解决Visual Code安装中文插件失败问题

    解决Visual Code安装中文插件失败问题 参考文章: (1)解决Visual Code安装中文插件失败问题 (2)https://www.cnblogs.com/achillis/p/10449 ...

  5. vs code常用的插件

    vs code常用的插件列举: path-alias 功能:在使用别名之后 路径上是没有提示的 path-alias 是用来提示的 别名路径跳转 功能:在使用别名导入的组件时候 不能跳转到最对应的组件 ...

  6. VS Code中常用插件

    1.Auto Close Tag 自动闭合 html 和 xml 标签 2.Auto Rename Tag 自动完成另一侧标签的同步修改 3.Beautify 格式化文件 4.HTML CSS Sup ...

  7. Code With Me插件,IDEA多人协作

    必需条件 主机:IntelliJ IDEA 2020.2.1及更高版本,已下载并启用Code With Me插件 访客:无需下载IDEA,只需要下载一个code with me程序 步骤 主机开启邀请 ...

  8. VS Code 常用的插件,让你的 VS Code 好用到飞起,开发必备

    订制属于自己的Vscode 中文简体语言包 在浏览器中查看 实时预览 缩进凸显 提示路径 自动闭合标签 闭合标签同步修改 不同颜色显示配对的括号 格式化代码--一 格式化代码--二 快速生成HTML标 ...

  9. Visual studio code 汉化插件

    Visual studio code 汉化插件 按照1,2,3步.点击右下角 [install]安装后重启软件即可

最新文章

  1. ubuntu软件安装(个人PC)
  2. Android之NDK开发
  3. 装饰者模式(为对象提供加强的接口)
  4. 【详解】Java语言的特点以及Java语言与C/C++的比较
  5. 将宽度赋给高度_人生应知长度、懂宽度、有高度
  6. 什么是覆盖索引?如何利用覆盖索引进行SQL语句优化?
  7. 生信宝典被分享最多的15篇文章
  8. Intellij IDEA的java环境与安卓sdk配置实例教程
  9. 20172329 2017-2018-2 《程序设计与数据结构》第五周学习总结
  10. python随机生成中文句子_python – 如何使用NLTK从诱导语法中生成句子?
  11. VScode环境配置C/C++
  12. RTP协议与RTCP协议简介
  13. DHCP server 冒充及DOS攻击处理方案
  14. 阿里云云计算 41 阿里云CDN的工作原理
  15. 龙芯2k1000-pmon(5)- pmon无法修改环境变量的问题
  16. C语言实现扫雷游戏完整代码
  17. 企业微信网页应用开发 - 权限验证
  18. 为什么C与C++执行效率高,运行快?
  19. MSN 与六度分隔理论(转)
  20. 【转】数据恢复WINHEX教程

热门文章

  1. ES-PHP向ES批量添加文档报No alive nodes found in your cluster
  2. jquery 配合 ajax 完成 在线编辑 你值得拥有
  3. 一个月时间整理《深入浅出Node.js》
  4. 网络投票轻松实现自动化 - 验证码识别的基本思路及方法
  5. 1024分辨率章子怡/郭富城《最爱》HD国语中字
  6. 浅谈String和StringBuffer类:
  7. win7下安装rose
  8. matlab中调用cplex 以及使用 Yalmip 工具箱
  9. MATLAB二维图形坐标变换
  10. java中向JTextArea中添加滚动条(垂直的和水平的)