百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 热门文章 > 正文

分享几个我日常使用的VS Code插件

bigegpt 2024-08-05 11:36 3 浏览

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

Bracket Pair Colorizer 2

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

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

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

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

NPM Intellisense

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

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

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

Path Intellisense

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

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

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

Quokka.js

如果你只是想尝试一些东西,不想费劲先设置项目,那么这款工具就是一个很好的辅助。通过实时检查输出,它会立即将输出显示在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

我仍在不时使用静态网站和标准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

它们是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

我用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官网,获取最新资讯~

相关推荐

程序员请收好:10个非常有用的 Visual Studio Code 插件

一个插件列表,可以让你的程序员生活变得轻松许多。作者|Daan译者|Elle出品|CSDN(ID:CSDNnews)以下为译文:无论你是经验丰富的开发人员还是刚刚开始第一份工作的初级开发人...

PADS在WIN10系统中菜单显示不全的解决方法

决定由AD转PADS,打开发现菜单显示不正常,如下图所示:这个是由于系统的默认字体不合适导致,修改一下系统默认字体即可,修改方法如下:打开开始菜单-->所有程序-->Windows系统--...

一文讲解Web前端开发基础环境配置

先从基本的HTML语言开始学习。一个网页的所有内容都是基于HTML,为了学好HTML,不使用任何集成工具,而用一个文本编辑器,直接从最简单的HTML开始编写HTML。先在网上下载notepad++文...

TCP/IP协议栈在Linux内核中的运行时序分析

本文主要是讲解TCP/IP协议栈在Linux内核中的运行时序,文章较长,里面有配套的视频讲解,建议收藏观看。1Linux概述  1.1Linux操作系统架构简介Linux操作系统总体上由Linux...

从 Angular Route 中提前获取数据

#头条创作挑战赛#介绍提前获取意味着在数据呈现在屏幕之前获取到数据。本文中,你将学到,在路由更改前怎么获取到数据。通过本文,你将学会使用resolver,在AngularApp中应用re...

边做游戏边划水: 基于浅水方程的水面交互、河道交互模拟方法

以下文章来源于腾讯游戏学堂,作者Byreave篇一:基于浅水方程的水面交互本文主要介绍一种基于浅水方程的水体交互算法,在基本保持水体交互效果的前提下,实现了一种极简的水面模拟和物体交互方法。真实感的...

Nacos介绍及使用

一、Nacos介绍Nacos是SpringCloudAlibaba架构中最重要的组件。Nacos是一个更易于帮助构建云原生应用的动态服务发现、配置和服务管理平台,提供注册中心、配置中心和动态DNS...

Spring 中@Autowired,@Resource,@Inject 注解实现原理

使用案例前置条件:现在有一个Vehicle接口,它有两个实现类Bus和Car,现在还有一个类VehicleService需要注入一个Vehicle类型的Bean:publicinte...

一文带你搞懂Vue3 底层源码

作者:妹红大大转发链接:https://mp.weixin.qq.com/s/D_PRIMAD6i225Pn-a_lzPA前言vue3出来有一段时间了。今天正式开始记录一下梗vue3.0.0-be...

一线开发大牛带你深度解析探讨模板解释器,解释器的生成

解释器生成解释器的机器代码片段都是在TemplateInterpreterGenerator::generate_all()中生成的,下面将分小节详细展示该函数的具体细节,以及解释器某个组件的机器代码...

Nacos源码—9.Nacos升级gRPC分析五

大纲10.gRPC客户端初始化分析11.gRPC客户端的心跳机制(健康检查)12.gRPC服务端如何处理客户端的建立连接请求13.gRPC服务端如何映射各种请求与对应的Handler处理类14.gRP...

聊聊Spring AI的Tool Calling

序本文主要研究一下SpringAI的ToolCallingToolCallbackorg/springframework/ai/tool/ToolCallback.javapublicinter...

「云原生」Containerd ctr,crictl 和 nerdctl 命令介绍与实战操作

一、概述作为接替Docker运行时的Containerd在早在Kubernetes1.7时就能直接与Kubelet集成使用,只是大部分时候我们因熟悉Docker,在部署集群时采用了默认的dockers...

在MySQL登录时出现Access denied for user ~~ (using password: YES)

Windows~~~在MySQL登录时出现Accessdeniedforuser‘root‘@‘localhost‘(usingpassword:YES),并修改MySQL密码目录适用...

mysql 8.0多实例批量部署script

背景最近一个项目上,客户需要把阿里云的rdsformysql数据库同步至线下,用作数据的灾备,需要在线下的服务器上部署mysql8.0多实例,为了加快部署的速度,写了一个脚本。解决方案#!/bi...