VSCode高效开发插件
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/
- 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。
- 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 可能有几十个,帮助你标注那些功能需要继续实现或优化。
截图
- 总结
当然,这里介绍的插件只是必备插件中的 10 个,其实根据你开发的语言,还有很多非常能提高开发效率的工具需要安装,你可以自行在 VSCode 的插件中心查询下载安装。
VSCode高效开发插件的更多相关文章
- VSCode 必装的 10 个高效开发插件
本文介绍了目前前端开发最受欢迎的开发工具 VSCode 必装的 10 个开发插件,用于大大提高软件开发的效率. VSCode 的基本使用可以参考我的原创视频教程「VSCode 高效开发必装插件」. V ...
- VSCode 必装的 10 个高效开发插件 --转
https://www.cnblogs.com/parry/p/vscode_top_ten_plugins.html
- 【转】VSCode Web开发插件
Web开发必备插件 1.Beautify - HTML.CSS.JS.JSON语法高亮 语法高亮,你懂的. Beautify 2.Auto rename tag - 自动重命名标签 在HTML, ...
- Eclipse高效开发插件汇总
以下是我整理的自己开发过程中的常用Eclipse插件,按字母排序: (1) AmaterasUML 介绍:Eclipse的UML插件,支持UML活动图,class图,sequen ...
- vscode python开发插件推荐
vscode作为一款好用的轻量级代码编辑器,不仅支持代码调试,而且还有丰富的插件库,可以说是免费好用,对于初学者来说用来写写python是再合适不过了.下面就推荐几款个人觉得还不错的插件,希望可以帮助 ...
- VSCode 开发插件 推荐
VSCode 必装的 10 个高效开发插件 本文介绍了目前前端开发最受欢迎的开发工具 VSCode 必装的 10 个开发插件,用于大大提高软件开发的效率. VSCode 的基本使用可以参考我的原创视 ...
- .NET 高效开发之不可错过的实用工具(第一的当然是ReSharper插件)
工欲善其事,必先利其器,没有好的工具,怎么能高效的开发出高质量的代码呢?本文为 ASP.NET 开发者介绍一些高效实用的工具,包括 SQL 管理,VS插件,内存管理,诊断工具等,涉及开发过程的各个环节 ...
- NET 高效开发之不可错过的实用工具(第一的当然是ReSharper插件)
工欲善其事,必先利其器,没有好的工具,怎么能高效的开发出高质量的代码呢?本文为 ASP.NET 开发者介绍一些高效实用的工具,包括 SQL 管理,VS插件,内存管理,诊断工具等,涉及开发过程的各个环节 ...
- .Net 高效开发之不可错过的实用工具(转)
.Net 高效开发之不可错过的实用工具(转) 本文摘自: http://www.cnblogs.com/powertoolsteam/p/5240908.html#3372237 Visual Stu ...
随机推荐
- H3C交换机配置镜像端口
配置步骤 进入配置模式:system-view: 创建本地镜像组:mirroring-group 1 local 为镜像组配置源端口:mirroring-group 1 mirroring-port ...
- jz2440存储管理实验【学习笔记】
平台:jz2440 作者:庄泽彬(欢迎转载,请注明作者) 说明:韦东山一期视频学习笔记 简介:先来简单的说明一下这次的实验,看看下图,我们的程序通过烧录器下载到nandflash当中去,之后在启动的时 ...
- log4j.appender.AFile.File日志的相对路径
log4j.appender.AFile=org.apache.log4j.DailyRollingFileAppenderlog4j.appender.AFile.DatePattern='.'yy ...
- Memcached set 命令
Memcached set 命令用于将 value(数据值) 存储在指定的 key(键) 中. 如果set的key已经存在,该命令可以更新该key所对应的原来的数据,也就是实现更新的作用. 语法: s ...
- 判断浏览器是否支持某一个CSS3属性
判断浏览器是否支持某一个CSS3属性 function supportCss3(style) { var prefix = ['webkit', 'Moz', 'ms', 'o'], i, humpS ...
- 51nod1241 lis变形
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1241 1241 特殊的排序 题目来源: 摩根斯坦利的比赛题 基准时间限制 ...
- uva 10891 区间dp+记忆化搜索
https://vjudge.net/problem/UVA-10891 给定一个序列x,A和B依次取数,规则是每次只能从头或者尾部取走若干个数,A和B采取的策略使得自己取出的数尽量和最大,A是先手, ...
- 51nod 1287 线段树
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1287 简单的线段树题目,直接写个二分查找大于等于x的最小位置就好了. # ...
- IE浏览器兼容 css之bug 问题
bug的几种常见原因: 1.盒模型bug 原因:没有正确声明doctype(如果没有声明doctype,各浏览器对代码的解析有不同的规范).解决方法:使用严格的doctype声明. 2.各浏 ...
- 【lightoj-1094】树的直径(DFS)
链接:http://www.lightoj.com/volume_showproblem.php?problem=1094 题意: 一共n各节点编号0-n-1, 输入n-1条无向边代表u-v距离为w, ...