live server插件怎么用_分享几个我日常使用的VS Code插件

在这篇文章中,我想介绍一下自己日常使用中最喜欢的Visual Studio Code扩展。大多数时候,我用VS Code编写的是JavaScript应用程序(标准JavaScript、React、Angular、NodeJS……各式各样)。

Bracket Pair Colorizer 2

b1266afb30ad0f51f8530b13ce9f1380.png

这个扩展很不错,可以帮助我搞清楚JavaScript中复杂的嵌套promise。顾名思义,它可以让方括号对变色,帮我弄清楚是否在某个地方搞糊涂了(例如缺少方括号)。它默认匹配()、[]和{}等普通括号,但如果需要你也可以定义自定义括号。

它还有其他许多很酷的功能,例如定义颜色或为活动括号显示装订线之类。值得尝试一波。

链接:https://github.com/CoenraadS/Bracket-Pair-Colorizer-2

Marketplace:https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

NPM Intellisense

10fd207e892db9592495f6f4530efe79.gif

如动图所示,它能自动完成以NPM包为目标的require import语句。这可以提供很多帮助,尤其是当你的项目变得很大,并且在package.json中包含很多依赖项时。我不想再错过这个插件了,强烈推荐!

链接:https://github.com/ChristianKohler/NpmIntellisense

Marketplace:https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

Path Intellisense

0f220adf85c59acc66977fb31562758f.gif

这是NPM Intellisense的姐妹插件。它会执行相同的自动补全,不过针对的是你的文件系统。这俩插件的维护者是同一人,我也不想再错过这个好东西!

链接:https://github.com/ChristianKohler/PathIntellisense

Marketplace:https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

Quokka.js

ae21340d8ca0fac6f11c26408bfb6c37.gif

如果你只是想尝试一些东西,不想费劲先设置项目,那么这款工具就是一个很好的辅助。通过实时检查输出,它会立即将输出显示在JavaScript/TypeScript代码旁边,如动图所示。这是一个很好的扩展,特别适合调试目的。

链接:https://quokkajs.com/

Marketplace:https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

Docker

由于我经常使用NodeJS,因此习惯了完全使用Docker设置开发环境。在找到这个扩展之前,我只会用CLI。

这个扩展是处理多个Docker映像和容器的必备,因为你可以用它快速浏览正在运行哪些容器、构建哪些映像以及创建哪些网络。

如果你每天都在使用Docker,那么我强烈推荐这个扩展。

链接:https://github.com/microsoft/vscode-docker

Marketplace:https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker

Live Server

5bda97af69fe379faf5f3ac9eef13bc5.gif

我仍在不时使用静态网站和标准JavaScript,而且这样做的时候我不想安装诸如webpack-dev-server之类的东西。这个扩展为本地开发服务器提供了热重载功能,从而能帮助我解决这个问题,也就是说它会在保存对文件所做的任何更改后立即刷新页面。它在状态栏中有一个漂亮的“Go Live”按钮,你只需单击一下即可启动服务器。如果你还没用上的话,一定要看看这个扩展。

链接:https://github.com/ritwickdey/vscode-live-server

Marketplace:https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Auto Close Tag和Auto Rename Tag

426d571be6dc6432c54c7d4bb82a64e3.gif

它们是VS Code的两个小插件,可通过自动重命名和关闭标签来帮助你维护HTML文件。这也适用于React自己的JSX语法。如果你想节省一些时间,请尝试一下。

Auto Close Tag:https://github.com/formulahendry/vscode-auto-close-tag/https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag

Markdown Preview Enhanced

3536ae37ddddcde19057c35ae5b81129.png

我用Markdown做很多事情。例如,在hashnode.com或dev.to上写文章,为我的私人项目写文档,或者在markdown中写笔记来理顺自己的想法。大多数时候,我都是用VS Code来写的,在找到Markdown Preview Enhanced插件之前,我一直缺乏好用的Markdown预览工具。它不仅为你提供预览,而且还有同步滚动、PDF导出和PlantUML的功能。我非常喜欢这个工具,所以向经常用Markdown的人们高度推荐。

链接:https://github.com/shd101wyy/vscode-markdown-preview-enhanced

Marketplace:https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced

小结

以上就是我每天最常用的VS Code扩展。我希望你发现了一些对你的工作流程有用的新东西,你有什么好用的扩展也可以在评论里推荐。

原文链接:

https://dev.to/klamserdev/vs-code-extensions-i-use-daily-568i

延伸阅读:


VS Code会“一统江湖”吗?-InfoQ

关注我并转发此篇文章,私信我“领取资料”,即可免费获得InfoQ价值4999元迷你书,点击文末「了解更多」,即可移步InfoQ官网,获取最新资讯~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/397002.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Xtrabackup数据全备份与快速搭建从服务器

Percona Xtrabackup可以说是一个完美的数据备份工具。特别是当数据库的容量达到了一定数量级的时候且存在单表达到几十G的数据量, 很难容忍一些逻辑备份的漫长时间。如单个数据库约200G,单表最大为120G,mysqldump逻辑备份的时间长达20多小时。…

简单的java方法_Java简单实用方法一

整理以前的笔记,在学习Java时候,经常会用到一些方法。虽然简单但是经常使用。因此做成笔记,方便以后查阅这篇博文先说明构造和使用这些方法。1,判断String类型数据是否为空String类型的数据为空,主要为等于null或”“那么只要判断…

Android应用程序开发

第一章 Android应用初体验 1.1应用基础 activity是Android SDK中Activity类的一个具体实例,负责管理用户与信息屏的交互。 应用的功能是通过编写一个个Activity子类来实现的。 布局定义了一系列用户界面对象以及它们显示在屏幕上的位置。组成布局的定义保存在XML文件…

phonegap

phonegap 框架详解 转自:http://www.cnblogs.com/hubcarl/p/4216844.html首先, 来看一下phonegap 初始化流程以及Native 与 JS 交互流程图。 说明:socket server模式下, phonegap.js 源码实现的采用1 毫秒执行一次XHR请求, 当Native JS 队列里面有JS语…

j2ee核心模式_Operator和Sidecar正在成为软件交付新模式

现如今的开发人员希望可以开发出具备弹性和可扩展的分布式系统。该系统受益于软件复用和开源模型创新,针对安全性问题能够轻易完成补丁更新并进行低风险的升级。该系统不可能通过带有各种嵌入式语言库的应用程序框架来实现。最近,一篇关于“多运行时微服…

微信JS-SDK选择相册或拍照并上传PHP实现

理解:微信上传接口是拍照,或者选择本地照片,上传到微信的服务器,获取到一个id,通过token与这个id获取到图片,保存到服务器即可。 效果 通过微信js接口,调用底层程序。 需要引入js文件&#xff0…

JMS-ActiveMQ学习-3 ActiveMQ与Spring集成

Spring下开发消息的发送和接收程序 点对点模式 一、创建生产者项目 1.创建maven项目 2.添加spring-jms、jms规范、activemq依赖 <dependencies> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-jms&…

看libevent所遇到的英语生词

libevent – an event notification library The libevent API &#xff08;libevent应用程序&#xff09;provides a mechanism&#xff08;机制&#xff09; to execute&#xff08;执行&#xff09; a callback function&#xff08;回调函数&#xff09; when a specific&a…

java中迭代器要导包吗_java 中迭代器的使用方法详解

java 中迭代器的使用方法详解前言&#xff1a;迭代器模式将一个集合给封装起来&#xff0c;主要是为用户提供了一种遍历其内部元素的方式。迭代器模式有两个优点&#xff1a;①提供给用户一个遍历的方式&#xff0c;而没有暴露其内部实现细节&#xff1b;②把元素之间游走的责任…

android socket 长连接_TCP/IP,http,socket,长连接,短连接

点击上方蓝色字体&#xff0c;选择“标星公众号”优质文章&#xff0c;第一时间送达上一篇&#xff1a;这300G的Java资料是我师傅当年给我的&#xff0c;免费分享给大家下一篇&#xff1a;这200G的Java实战资料是我师傅当年教我的第二招作者 | ksfzhaohui来源 | my.oschina.net…

二、Python安装扩展库

第一步:推荐easy_install工具 下载地址:https://pypi.python.org/pypi/setuptools 下载"ez_setup.py"文件; 通过运行cmd命令找到ez_setup.py文件所在目录,通过命令[python ez_setup.py]执行安装easy_install 安装成功截图 第二步:安装扩展酷 例如安装"suds"…

ORACLE 10.2.01升级10.2.05 for windows 详细文档

最近要做一个数据库的升级工作&#xff0c;提前在自己的PC机上练习了一下&#xff0c;这种文档在网上很多&#xff0c;但是大多都是使用命令编辑脚本&#xff0c;其实数据库还有一个DBUA的升级工具可以使用&#xff0c;使升级工作方便了很多。 OS环境&#xff1a;windows XP 32…

php 导出mysql 结构_导出结构和数据(如phpmyadmin)

在这里,您可以找到一个全面的解决方案来转储MySQL结构和数据,比如在PMA中(不使用exec、passthru等):它是Dszymczuk项目的一个分支,有我的增强功能。用法很简单//MySQL connection parameters$dbhost localhost;$dbuser dbuser;$dbpsw pass;$dbname dbname;//Connects to my…

tableViewCell的操作

在iOS的开发过程中&#xff0c;tableView的使用永远都是最常用的控件。今天学习了一下tableViewCell的操作。代码并不是很复杂&#xff0c;如果有OC开发经验的人&#xff0c;应该很容易看懂的。 class ViewController: UIViewController ,UITableViewDelegate, UITableViewData…

stm32正交编码器 原理图_恶劣环境下应用的电感式增量编码器和绝对编码器

编码器可分为两种基本类型 - 增量编码器和绝对编码器。增量编码器的显着特征是它报告角度的变化。换句话说&#xff0c;当增量编码器通电时&#xff0c;它不会报告其角位置&#xff0c;直到它具有测量的参考点。绝对编码器明确地在比例或范围内报告其位置。换句话说&#xff0c…

【SqlServer】Sqlserver中的DOS命令操作

输入osql ?查看是否支持当前版本&#xff0c;如果是SQL Server 2005以上用Sqlcmd , 以下用Osql连接数据库&#xff08;a&#xff09;Osql -S localhost -U username -P password(SQL Server身份验证&#xff0c;需要用户民和密码)&#xff08;b&#xff09;Osql -S localhos…

微信小程序内训笔记

2016年9月22日凌晨微信官方正式宣布“小程序”开始内测&#xff0c;有“微信之父”之称、腾讯集团高级执行副总裁张小龙在2016年末对外宣布“小程序“应用将于2017年1月9日正式推出 这一次微信还是按照惯例&#xff0c;通过机器跑出的数据&#xff0c;首先将“小程序”开放给了…

python基础代码的含义_Python基础学习篇

原标题&#xff1a;Python基础学习篇 1、编码 默认情况下&#xff0c;Python 3 源码文件以 UTF-8 编码&#xff0c;所有字符串都是unicode 字符串。 当然你也可以为源码文件指定不同的编码&#xff1a;# -*- coding: cp-1252 -*- 2、标识符 第一个字符必须是字母表中字母或下划…

java面向对象super_【JavaSE】面向对象之super、final

一、super关键字它是一个指代变量&#xff0c;用于在子类中指代父类对象。1.作用指代父类对象区分子父类同名的成员变量&#xff0c;区分父类中成员变量和子类中同名的局部变量2.使用与this相同&#xff0c;调用父类成员变量和成员方法&#xff1a;super.xx super.xxx()调用父类…

Week_1_Physical Electronics and Semiconductors

Semiconductors Fundamentals Type of solids 转载于:https://www.cnblogs.com/ronnielee/p/9579783.html