VSCode 必装的 10 个高效开发插件

https://www.cnblogs.com/parry/p/vscode_top_ten_plugins.html

本文介绍了目前前端开发最受欢迎的开发工具 VSCode 必装的 10 个开发插件,用于大大提高软件开发的效率。

VSCode 的基本使用可以参考我的原创视频教程「VSCode 高效开发必装插件」。

截图

VSCode(Visual Studio Code)是由微软研发的一款免费、开源的跨平台文本(代码)编辑器,算是目前前端开发几乎完美的软件开发工具。

官网为:https://code.visualstudio.com/

  1. VSCode 的基本使用视频教程
    在我们的知识星球社区中给大家分享过我原创的 10 集视频教程「VSCode 高效开发必装插件」。

此课程为 VSCode 编辑器系列课程。VSCode 强大的插件库使得其在提升开发效率方面更加的无敌,系列课程给大家分享了必装插件的安装、配置与使用技巧相关的知识。

视频教程课程大纲

001 - 课程简介
002 - 如何让你的文件类型一目了然
003 - 如何更加高效地管理项目
004 - 自动格式化你的代码
005 - 如何一键搭建各类语言的学习测试环境
006 - 如何和 Chrome 联动调试
007 - 如何实时自动检测你的代码规范与代码中的错误
008 - 如何提升 React 等前端开发的效率
009 - 如何集成并美化你的终端到 VSCode 中
010 - Visual Studio 重度使用者如何迁移到 VSCode
视频教程地址:https://devopen.club/course/vscode

  1. 10 个必装的编辑器插件
    相当于视频教程的补充更新,这里再次给大家整理出 10 个必装的 VSCode 编辑器插件。编辑器的基本使用与插件的安装可以直接参考上面的视频教程。

2.1 文件图标 vscode-icons
插件名称:vscode-icons
插件地址:https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons
首先为了我们在编码时有一个高效、易用的界面,我们需要对一些不明了的组件做一些美化。

vscode-icons 插件可以实现对各种文件类型的文件前的图标进行优化显示,这样我们在查看长长的文件列表的时候,可以直接通过文件的图标就可以快速知道文件的类型,而不是去看文件的后缀。

截图

2.2 暗色主题 One Dark Pro
插件名称:One Dark Pro
插件地址:https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme
长时间的编码,暗色调的编码环境更不容易让视力疲劳,而且也可以让自己更加专注。

安装了 One Dark Pro 插件后,可以一键将 VSCode 编辑器的颜色调整成暗色系,编码起来更加舒适。

截图

2.3 代码美化 Beautify
插件名称:Beautify
插件地址:https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify
Beautify 插件可以快速格式化你的代码格式,让你在编写代码时杂乱的代码结构瞬间变得非常规整,代码强迫症必备,较好的代码格式在后期维护以及他人阅读时都会有很多的便利。

插件支持的语言非常多,基本堵盖了目前所有的语言,而且你还可以自定义代码格式化的结构。

截图

2.4 代码检查工具 ESLint
插件名称:ESLint
插件地址:https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。

而 VSCode 中的 ESLint 插件就直接将 ESLint 的功能集成好,安装后即可使用,对于代码格式与规范的细节还可以自定义,并且一个团队可以共享同一个配置文件,这样一个团队所有人写出的代码就可以使用同一个代码规范,在代码签入前每个人可以完成自己的代码规范检查。

截图

2.5 必备调试工具 Debugger for Chrome
插件名称:Debugger for Chrome
插件地址:https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
此工具简直就是前端开发必备,将大大地改变你的开发与调试模式。

以往的前端调试,主要是 JavaScript 调试,你需要在 Chrome 的控制台中找到对应代码的部分,添加上断点,然后在 Chrome 的控制台中单步调试并在其中查看值的变化。

而在使用了 Debugger for Chrome 后,当代码在 Chrome 中运行后,你可以直接在 VSCode 中加上断点,点击运行后,Chrome 中的页面继续运行,执行到你在 VSCode 中添加的断点后,你可以直接在 VSCode 中进行单步调试。

关于 Chrome 调试工具的使用,你可以参考我在我们的知识星球中分享的原创视频教程「50 个 Chrome Developer Tools 必备技巧」,课程分享了前端开发中必备的浏览器调试工具 Chrome Developer Tools 使用过程中必备的 50 个使用与调试技巧,这些知识是你成为合格的前端开发人员必备技能。

截图

2.6 万能语言运行环境 Code Runner
插件名称:Code Runner
插件地址:https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner
如果你需要学习或者接触各种各样的开发语言,那么 Code Runner 插件可以让你不用搭建各种语言的开发环境,直接通过此插件就可以直接运行对应语言的代码,非常适合学习或测试各种开发语言。

支持的语言有:C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, 以及一些自定义的命令。

截图

2.7 快速注释 Document This
插件名称:Document This
插件地址:https://marketplace.visualstudio.com/items?itemName=joelday.docthis
优秀的代码除了优秀的性能、规范的格式,注释也是不可或缺的,而且注释也应该有一套标准的注释方法,特别对于 JavaScript 这种语言。

Document This 可以快速地帮你生成注释,如一些函数的注释还能帮你抽取出参数的定义等,是你编写规范代码必备的工具。

截图

2.8 CSS 类名智能提示
插件名称:IntelliSense for CSS class names in HTML
插件地址:https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion
在 HTML 中调用定义好的样式名时,有时需要经常在 HTML 与 CSS 文件之间切换,来回地查看你已定义好的 CSS 类名。

而有了 IntelliSense for CSS class names in HTML 插件后,你可以在 HTML 中需要调用 CSS 类名的地方,此插件会智能地给你已定义 CSS 类名的提示。

截图

2.9 代码拼写检查 Code Spell Checker
插件名称:Code Spell Checker
插件地址:https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
此插件安装后就不用管就好了,在你代码中有单词拼写错误时,你就会发现它的好处,因为我们写代码毕竟都是大量的英文单词变量定义,插件还可以给出错误拼写单词的建议。

截图

2.10 备忘插件 TODO Highlight
插件名称:TODO Highlight
插件地址:https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight
在很多的其他代码编辑器中都有 TODO 标注功能的,如你写到某一部分的代码时,其中部分的功能需要稍后再来实现,这是就可以在对应的代码处添加一个 TODO 类型的注释,那么后期就可以快速地跳转到这部分继续写,而且当项目很大的时候,TODO 就变得更加有用,因为有时候 TODO 可能有几十个,帮助你标注那些功能需要继续实现或优化。

截图

  1. 总结
    当然,这里介绍的插件只是必备插件中的 10 个,其实根据你开发的语言,还有很多非常能提高开发效率的工具需要安装,你可以自行在 VSCode 的插件中心查询下载安装。

VSCode高效开发插件的更多相关文章

  1. VSCode 必装的 10 个高效开发插件

    本文介绍了目前前端开发最受欢迎的开发工具 VSCode 必装的 10 个开发插件,用于大大提高软件开发的效率. VSCode 的基本使用可以参考我的原创视频教程「VSCode 高效开发必装插件」. V ...

  2. VSCode 必装的 10 个高效开发插件 --转

    https://www.cnblogs.com/parry/p/vscode_top_ten_plugins.html

  3. 【转】VSCode Web开发插件

    Web开发必备插件 1.Beautify - HTML.CSS.JS.JSON语法高亮 语法高亮,你懂的.   Beautify 2.Auto rename tag - 自动重命名标签 在HTML, ...

  4. Eclipse高效开发插件汇总

    以下是我整理的自己开发过程中的常用Eclipse插件,按字母排序: (1)    AmaterasUML         介绍:Eclipse的UML插件,支持UML活动图,class图,sequen ...

  5. vscode python开发插件推荐

    vscode作为一款好用的轻量级代码编辑器,不仅支持代码调试,而且还有丰富的插件库,可以说是免费好用,对于初学者来说用来写写python是再合适不过了.下面就推荐几款个人觉得还不错的插件,希望可以帮助 ...

  6. VSCode 开发插件 推荐

    VSCode 必装的 10 个高效开发插件  本文介绍了目前前端开发最受欢迎的开发工具 VSCode 必装的 10 个开发插件,用于大大提高软件开发的效率. VSCode 的基本使用可以参考我的原创视 ...

  7. .NET 高效开发之不可错过的实用工具(第一的当然是ReSharper插件)

    工欲善其事,必先利其器,没有好的工具,怎么能高效的开发出高质量的代码呢?本文为 ASP.NET 开发者介绍一些高效实用的工具,包括 SQL 管理,VS插件,内存管理,诊断工具等,涉及开发过程的各个环节 ...

  8. NET 高效开发之不可错过的实用工具(第一的当然是ReSharper插件)

    工欲善其事,必先利其器,没有好的工具,怎么能高效的开发出高质量的代码呢?本文为 ASP.NET 开发者介绍一些高效实用的工具,包括 SQL 管理,VS插件,内存管理,诊断工具等,涉及开发过程的各个环节 ...

  9. .Net 高效开发之不可错过的实用工具(转)

    .Net 高效开发之不可错过的实用工具(转) 本文摘自: http://www.cnblogs.com/powertoolsteam/p/5240908.html#3372237 Visual Stu ...

随机推荐

  1. String类型是特殊的引用类型

    例证: string peom1 = "Kubla Khan"; string peom2 = "Kubla Khan"; string peom3 = Str ...

  2. 黑苹果Yosemite 10.10.1懒人版完美安装及简单驱动设置

    1.硬件概要 CPU: 英特尔 Xeon E3-1230 V2 (四核)主板: 技嘉 H77-DS3H (Intel H77 (Panther Point Base))内存: 8 GBytes显卡: ...

  3. redhat 6.8 配置yum源

    一般安装好redhat后,不能注册的话,不能使用系统自带的yum源.但是我们可以自己配置yum源来解决这一问题.下面介绍下redhat配置163yum源. 1. 检查是否安装yum包 rpm -qa ...

  4. 电脑 HOST 文件

    路径: C:\Windows\System32\drivers\etc\HOSTS

  5. JavaWeb -- Struts2 验证框架

    1. 验证框架 示例 表单提交Jsp, reg.jsp <%@ page language="java" contentType="text/html; chars ...

  6. ThinkPad.E440_FN键反了

    1.一直不知道,为何我的 FN键反了(Fn+F1 才是F1的功能),想改过来.查到是 BIOS中改,但是 BIOS里面没有 那些个修改的选项,于是 还原了BIOS的设置,于是出问题了... 2.问题1 ...

  7. scala学习手记14 - 单例对象

    java中的单例模式都很熟悉了:简单地说就是一个类只能有一个实例.在scala中创建单例对象非常简单,创建类时使用object关键字替换class即可.因为单例类无法初始化,所以不能向它的主构造函数传 ...

  8. Java socket - 使用代理服务器

    为什么使用代理服务器不需要多说了. 使用Proxy Java提供了Proxy类实现使用代理进行通信. Proxy类的构造器Proxy(Proxy.Type type, SocketAddress sa ...

  9. Oracle操作ORA-02289: 序列不存在

    解决方案:实现创建序列,创建语句如下所示: create sequence employees_seq minvalue maxvalue start increment cache ; 这时候再执行 ...

  10. Go-gin CORS 跨域中间件

    原文:https://stackoverflow.com/questions/29418478/go-gin-framework-cors func CORSMiddleware() gin.Hand ...