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

没有用过这些插件,别说你在用vscode

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

vscode 插件

Rainbow Brackets

编码过程中,尤其在我们使用js进行函数式编程时,代码里会有很多的花括号,想要保证它们对称十分困难,所以就出现了上面小粉同学的尴尬局面,相信很多人都遇到过类似的情况。

Rainbow Brackets,可以将同一对花括号给定相同的颜色,可以一眼就看出配对的两个花括号。

Indent Rainbow

Indent Rainbow 则可以给代码的缩进提供颜色上提示,和 Rainbow Brackets 这搭配使用,可以在代码层级较多时,也能看起来很清晰,一目了然。


Project Manager

工作中,我们经常会来回切换多个项目,每次都要找到对应项目的目录再打开,比较麻烦。Project Manager插件可以解决这样的烦恼,它提供了专门的视图来展示你的项目,我们可以把常用的项目保存在这里,需要时一键切换,十分方便,妈妈再也不用担心我忘记把项目放在哪个目录下了。

Import Cost

在项目开发过程中,我们会引入很多npm包,有时候可能只用到了某个包里的一个方法,却引入了整个包,导致代码体积增大很多。Import Cost 可以在代码中友好的提示我们,当前引入的包会增加多少体积,这很有助于帮我们优化代码的体积。

Pigment

遇到颜色代码时,Pigment会将颜色渲染在这段代码的下面。

关注我的头条号,分享更多的技术学习文章,我自己是一名从事了多年开发的web前端老程序员,目前辞职在做自己的web前端私人定制课程,今年年初我花了一个月整理了一份最适合2019年学习的web前端学习干货,各种框架都有整理,送给每一位前端小伙伴,想要获取的可以关注我的头条号并在后台私信我:前端,即可免费获取。

GitLens

GitLens可以显示每一行代码的作者,提交时间,以及commit信息,在想要知道哪行代码是谁改动的时候非常的实用。

把鼠标移到这条提示上,会弹出更详细的描述,

不止如此,GitLens 还可以查看代码的历史记录,能够查看某个 commit 的代码改动,能够 diff 任意commit或branch,进行对比。

Settings Sync

Settings Sync 提供了同步个人设置的功能,当我们需要换电脑进行开发时,比如回家用自己的电脑,或者换了新的电脑,该插件可以帮你同步之前做的设置,不需要在每台电脑上都重新设置一次。

Markdown Preview Enhanced

超级强大的 Markdown 插件,这款插件可以让你拥有飘逸的 Markdown 写作体验。

程序员怎么可能不写文档?!Markdown Preview Enhanced 对Markdown语法进行了增强。

支持了目录,批注,自定义预览css,插入公式,纯文本绘图,导出导入文档,制作幻灯片,甚至,还可以在文档中跑代码。总之一句话非常强大,非常好用。

文末给出了Markdown Preview Enhanced 的中文文档地址,感兴趣可以去了解一下。

ESlint


ESlint可以在我们在coding的时候,分析我们的代码,对有错误或不符合规范的地方,给出提示,让我们第一时间发现代码的问题。同时,还能在保存时,帮助我们自动修复一些问题。


关于eslint的更多使用方法,请戳 谈谈前端代码规范

Path Intellisense

Path Intellisense可以智能提示路径,并帮我们自动补全路径

Document This

可以帮我们快速生成代码注释,比如一些函数的注释,能够自动抽取出参数的定义。比如下面的函数,只需在上面输入/**, 就会自动触发 Document This插件,生成如下的注释。

分享插件,除了将插件名字告诉你的小伙伴,当然还有其他的办法了!

可以在项目的 .vscode 目录下创建文件 extensions.json。然后给 recommendations 提供一个想要分享给同伴的插件的 ID 数组,这样当他们打开项目,并且没有安装某些插件时,VS Code就会提示安装了,并且可以一键全部安装。

.vscode/extensions.json 文件内是这样的。


{
 "recommendations": [
 '2gua.rainbow-brackets',
 'oderwat.indent-rainbow', 
 'alefragnani.project-manager', 
 'wix.vscode-import-cost', 
 'jaspernorth.vscode-pigments', 
 'eamodio.gitlens', 
 'shan.code-settings-sync', 
 'shd101wyy.markdown-preview-enhanced', 
 'dbaeumer.vscode-eslint', 
 'christian-kohler.path-intellisense', 
 'joelday.docthis' 
 ]
}


可以直接复制上面的代码到自己项目的.vscode/extensions.json 文件中,一键安装本文介绍的所有插件。

recommendations数组中是插件的ID,不是名字,插件ID可以在这里查看。

相关推荐

程序员请收好: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...