VSCode 必装的 10 个高效开发插件
本文介绍了目前前端开发最受欢迎的开发工具 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。
2. 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 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。
而 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 可能有几十个,帮助你标注那些功能需要继续实现或优化。
3. 总结
当然,这里介绍的插件只是必备插件中的 10 个,其实根据你开发的语言,还有很多非常能提高开发效率的工具需要安装,你可以自行在 VSCode 的插件中心查询下载安装。
VSCode 必装的 10 个高效开发插件的更多相关文章
- VSCode 必装的 10 个高效开发插件 --转
https://www.cnblogs.com/parry/p/vscode_top_ten_plugins.html
- VSCode高效开发插件
VSCode 必装的 10 个高效开发插件 https://www.cnblogs.com/parry/p/vscode_top_ten_plugins.html 本文介绍了目前前端开发最受欢迎的开发 ...
- Eclipse高效开发插件汇总
以下是我整理的自己开发过程中的常用Eclipse插件,按字母排序: (1) AmaterasUML 介绍:Eclipse的UML插件,支持UML活动图,class图,sequen ...
- VSCode 开发插件 推荐
VSCode 必装的 10 个高效开发插件 本文介绍了目前前端开发最受欢迎的开发工具 VSCode 必装的 10 个开发插件,用于大大提高软件开发的效率. VSCode 的基本使用可以参考我的原创视 ...
- vscode10个必装的插件
VSCode 必装的 10 个高效开发插件 本文介绍了目前前端开发最受欢迎的开发工具 VSCode 必装的 10 个开发插件,用于大大提高软件开发的效率. VSCode 的基本使用可以参考我的原创 ...
- wordpress必装的插件 wp最常用的十个插件
wordpress是世界上著名的博客系统,简称wp.一般新安装完wordpress以后,往往需要首先安装一些插件,这样才可以使用wordpress的更多功能.wp最常用的十个插件有哪些呢,可能根据每个 ...
- 个人整理的 Windows 下 .NET 开发必装的软件
注: 最后更新时间:2019-03-15 一..NET 开发 1. 必装 软件名称 说明 下载地址 JetBrains Toolbox JetBrins 全家桶管理工具. 下载地址 JetBrains ...
- 使用 VSCODE 在 Windows 10 WSL 中远程开发
使用 VSCODE 在 Windows 10 WSL 中远程开发 安装 VSCODE 1.35+ 版本. 在 VSCODE 中安装 WSL 插件. 点击左下角的 WSL 图标. 打开项目,提示路径. ...
- iphone5s越狱之后必装
一.iphone5s完美越狱之后必装插件一览表 由于iPhone5s配置了强大的64位的A7处理器,所以在iOS7完美越狱后,不少iPhone5s用户发现之前安装的大部分人们插件在越狱后难以兼容.但是 ...
随机推荐
- -1-2 java 面向对象基本概念 封装继承多态 变量 this super static 静态变量 匿名对象 值传递 初始化过程 代码块 final关键字 抽象类 接口 区别 多态 包 访问权限 内部类 匿名内部类 == 与 equal
java是纯粹的面向对象的语言 也就是万事万物皆是对象 程序是对象的集合,他们通过发送消息来相互通信 每个对象都有自己的由其他的对象所构建的存储,也就是对象可以包含对象 每个对象都有它的类型 也就是 ...
- 如何正确使用Java序列化?
前言 什么是序列化:将对象编码成一个字节流,这样一来就可以在通信中传递对象了.比如在一台虚拟机中被传递到另一台虚拟机中,或者字节流存储到磁盘上. “关于Java的序列化,无非就是简单的实现Serial ...
- 杭电ACM2016--数据的交换输出
数据的交换输出 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Sub ...
- Asp.Net Core中使用MongoDB的入门教程,控制台程序使用 MongoDB
内容来源 https://blog.csdn.net/only_yu_yy/article/details/78882446 首先,创建一个.Net Core的控制台应用程序.然后使用NuGet导入 ...
- MySql 双主多从配置指导
MySql 双主多从配置指导 一.背景 互联网项目为了数据的可靠性和架构的可拓展性经常会用到双主多从的数据库,来实现数据的备份.负载均衡和突发状况时数据库切换. 二.思路 配置两台数据库A.B互为主从 ...
- Java 连续子数组的最大和(超容易理解)
题目: {6,-3,-2,7,-15,1,2,2},连续子向量的最大和为8(从第0个开始,到第3个为止).给一个数组,返回它的最大连续子序列的和 解题思路 万物皆可使用暴力法,暴力法还是比较容易的 ...
- 如何高效地遍历 MongoDB 超大集合?
GitHub 仓库:Fundebug/loop-mongodb-big-collection 本文使用的编程语言是 Node.js,连接 MongoDB 的模块用的是mongoose.但是,本文介绍的 ...
- (详细)华为荣耀V10 BKL-AL00的USB调试模式在哪里打开的步骤
每当我们使用pc连接安卓手机的时候,如果手机没有开启Usb开发者调试模式,pc则无法成功检测到我们的手机,有时我们使用的一些功能比较强的的app比如以前我们使用的一个app引号精灵,老版本就需要开启U ...
- 微信小程序(二)登录授权实现
相对于上一节,这一节主要是动态获取数据,主要是对登陆信息的接收,以及页面获取授权按钮的相对相应(未授权时,显示,授权后不显示) 关键在于状态值的判断,以及对页面的不同响应(m-->v) wxml ...
- Android .9.png 的介绍
概述 .9.PNG是安卓开发里面的一种特殊的图片,这种格式的图片通过ADT自带的编辑工具生成,使用九宫格切分的方法.点九图是一种可拉伸的位图,android会自动调整它的大小,来使图像在充当背景时可以 ...