VSCode常用插件

article/2025/10/5 11:46:33


一、VSCode常用的插件

目录

1.Chinese (Simplified)  

 2.Auto Rename Tag 

3.One Dark Pro   颜色主题 

4.格式化代码(vscode系统自带) 

5.open in browser   浏览器预览页面 

​6. Live Server   实时预览(推荐)  

7. vscode-icons   设置文件图标主题 

8. Easy LESS   编译less文件

9. 会了吧 

10.git history

11.GitLens — Git supercharged

 12.Bracket Pair Colorizer

 13.Path Intellisense

 14.Auto Close Tag

15.Vetur

 16.HTML CSS Support



1.Chinese (Simplified)  

vscode下载完毕是英文版的,先安装这个插件,改为中文版,所以是我们第一个安装的插件。 

 中文插件chinese

 
2.Auto Rename Tag 

修改开始标签,结束标签跟着自动变化,比较好用。

 auto rename tag


3.One Dark Pro   颜色主题 

one dark pro


4.格式化代码(vscode系统自带) 

现在格式化代码的插件非常多,比如Prettier等等。 

刚开始学,不太建议安装插件,先自己手写规范的语法格式

但是html标签嵌套比较多,可能需要自动格式化比较好,所以我们可以利用vscode自动的功能格式化代码,暂且不用格式化插件,自动保存照样能格式化代码。

(1) 点击管理按钮---选择里面的设置命令

 vscode 管理--设置

(2)选择用户 --->  文本编辑器  --->  正在格式化  --->  勾选如下图的2个按钮

 vscode自动格式化代码

这样,我们不用安装插件,就可以自动保存自动格式化代码了。

5.open in browser   浏览器预览页面 

编写完代码,需要浏览器预览,可以安装这个插件

 浏览器预览页面

vscode 浏览器打开页面


6. Live Server   实时预览(推荐)  

刚才的插件是可以预览我们的页面,但是改完代码,浏览器必须要重新刷新,比较麻烦,因此推荐各位小伙伴安装 live server 这个插件,修改完代码,自动更新浏览器。

                                                        live server 自动更新页面
小技巧:

刚开始学习前端,基本页面很少,可以左边编辑器,右边浏览器,这样编写完毕代码,保存完毕后,浏览器自动更新了。

 小技巧


7. vscode-icons   设置文件图标主题 

 可以很清楚看到文件对用的图标。


只是为了看文件更加直观哈 


8. Easy LESS   编译less文件

我们写的less不能直接引入到html文件中, 通过这个插件可以自动帮我们生成 css文件

esay less 


9. 会了吧 

 是的,你没看错,这个插件的名字就是 <会了吧>

你是不是还在为英文单词不认识而发愁,是不是认识不会读而烦心, 这个插件你值得拥有。
里面会有单词介绍,点击还会有发音

10.git history

查看git 提交历史记录和代码作者 

11.GitLens — Git supercharged

每行代码后面都可以看见commit的信息 

 12.Bracket Pair Colorizer

虹花括号着色

 13.Path Intellisense

动路径补全

 14.Auto Close Tag

自动闭合HTML/XML标签

15.Vetur

 支持.vue文件的语法高亮显示,除了支持template模板以外,还支持大多数主流的前端开发脚本和插件,比如Sass和TypeScript

 16.HTML CSS Support

HTML CSS 提示

17.Path Autocomplete

可以提供路径检查提醒,避免书写错误

在 settings.json 中进行配置:

 "path-autocomplete.extensionOnImport":true,"path-autocomplete.pathMappings": {//配置@的路径提示"@":"${folder}/src"},

 


http://chatgpt.dhexx.cn/article/PFkvCXFV.shtml

相关文章

VsCode 插件推荐(个人常用)

效率规划 Chinese (Simplified) Language Pack for Visual Studio Code 汉化 Open in Browser 打开外部浏览器 settings sync 同步所有设置和插件 wakatime 编程时间及行为跟踪统计 koroFileHeader 在vscode中用于生成文件头部注释和函数注释的插件 自动补全类 Auto Rename …

VSCode常用插件整理

文章目录 1.Auto Rename Tag2.GitLens3.vscode-icons4. Auto Close Tag5.ES7 React/Redux/React-Native snippets6.JavaScript Debugger (Nightly)7.Image preview8.Chinese (Simplified)9.Todo Tree10. Tabnine11.Live Server 1.Auto Rename Tag 该插件可以帮助开发者在重命名…

vscode常用的9个插件,推荐给你们

1. Settings Sync 开发必备神器之一&#xff01;可以帮助你在不同的设备之间同步vscode所有的配置、插件&#xff01;&#xff01;! 虽然配置有好几个步骤&#xff0c;但是一旦配置好了之后使用非常的方便&#xff0c;只需要记住快速上传和快速下载的快捷键即可。甚至你可以选…

数组的浅拷贝与深拷贝

文章目录 1 数据类型2 浅拷贝与深拷贝3 实现深拷贝方法3.1 JSON.string() 结合 JSON.parse()3.2 递归 4 JS 中的拷贝方法4.1 concat()4.2 slice()4.3 展开运算符&#xff08;...&#xff09;4.4 Object.assign() 5 参考文章 1 数据类型 在 JavaScript 中&#xff0c;数据被分为…

浅谈一下js的浅拷贝和深拷贝

目录 一、什么是拷贝 二、浅拷贝和深拷贝概念 2.1 浅拷贝 代码 2.2深拷贝 代码 2.3 jQuery中的拷贝 三、深拷贝应用场景 一、什么是拷贝 谈到拷贝的话&#xff0c;大家应该是不陌生的&#xff0c;拷贝简单来说就是复制。 复制的话&#xff0c;这里就得想到js的两种数据…

前端面试:浅拷贝和深拷贝的区别?

前些天发现了一个巨牛的人工智能学习博客&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转 那么大家晚上好&#xff0c;我是今天晚上的主讲老师&#xff0c;我是兔哥。 我们在面试中经常会被问到浅拷贝和深拷贝的区别&#xff0c;正好群里…

Java 中的浅拷贝和深拷贝

无论是浅拷贝还是深拷贝&#xff0c;都可以通过 Object 类的 clone() 方法来完成&#xff1a; /*** 拷贝** author qiaohaojie* date 2023/3/5 15:58*/ public class CloneTest {public static void main(String[] args) throws Exception {Person person1 new Person(23, &…

Java浅拷贝和深拷贝的方式

文章目录 1. 前言2. 概念介绍2.1 拷贝 / 克隆的概念2.2 为什么需要拷贝方法&#xff1f;2.3 什么是浅拷贝&#xff1f;浅拷贝和深拷贝的区别是什么&#xff1f; 3. 深拷贝的实现方式3.1 手动深拷贝3.2 序列化方式3.2.1 自定义序列化工具函数3.2.2 commons-lang3 的序列化工具类…

JS 浅拷贝和深拷贝详解(巨详细)

目录 一、前置知识详解 1.1.JavaScript数据类型 1.2.理解传值和传址 二、浅拷贝 2.1.浅拷贝的定义和原理 2.2.实现浅拷贝的方法 2.2.1.手写递归实现 2.2.2.利用展开语法实现浅拷贝 2.2.3.Object.assign进行对象的合并 2.2.4.利用Array.prototype.,slice() 2.2.5.利用…

SV中的浅拷贝和深拷贝

1.浅拷贝 浅拷贝&#xff1a; 只拷贝对象中的数据变量&#xff0c;而对于对象中的数据操作(一般为任务和函数)和其中定义的其他类的句柄&#xff0c;采用类似“引用”的方式&#xff0c;浅拷贝前后共用同一内存空间。 可以使用new操作符进行复制。如果一个类包含指向另一个类的…

什么是浅拷贝和深拷贝?

文章目录 1、什么是浅拷贝&#xff1f;2、什么是深拷贝&#xff1f;2.1、常见的深拷贝方式 在Java语言中&#xff0c;当我们需要拷贝一个Java对象的时候&#xff0c;常见的会有两种方式的拷贝:浅拷贝与深拷贝。 浅拷贝&#xff1a;只是拷贝了源对象的地址&#xff0c;所以源对象…

基于java实现浅拷贝和深拷贝

目录 1、概念2、浅拷贝2.1、浅拷贝实战 3、深拷贝3.1、嵌套 clone 方法3.2、使用序列化流3.3、使用开源工具类 1、概念 浅拷贝&#xff1a;在拷贝一个对象时&#xff0c;复制基本数据类型的成员变量&#xff0c;但对引用数据类型的成员变量只进行引用的传递&#xff08;复制其…

js实现浅拷贝和深拷贝

一.数据类型 数据分为基本数据类型和引用数据类型 基本数据类型(String, Number, Boolean, Null, Undefined&#xff0c;Symbol) 引用数据类型&#xff08;Object[Array属于Object]&#xff09; 基本数据类型的特点&#xff1a;直接存储在栈(stack)中的数据 引用数据类型的特点…

浅拷贝和深拷贝

最近学习string类的时候感觉这里概念有点混淆&#xff0c;浅拷贝与深拷贝的区别&#xff0c;上网查了一下&#xff0c;原来没我想 的难么复杂&#xff0c;以下是我的理解&#xff0c;如果有不对的地方求大佬留言交流交流。 浅拷贝&#xff1a; 顾名思义就是浅层的拷贝&#xff…

理解浅拷贝和深拷贝以及实现方法

一、数据类型 数据分为基本数据类型(String, Number, Boolean, Null, Undefined&#xff0c;Symbol)和引用数据类型Object&#xff0c;包含&#xff08;function&#xff0c;Array&#xff0c;Date&#xff09;。 1、基本数据类型的特点&#xff1a;直接存储在栈内存中的数据 …

VUE浅拷贝和深拷贝

文章目录 前言一、数据类型1.1.基本数据类型1.2.引用数据类型1.3.区别 二、浅拷贝2.1.定义2.2.浅拷贝特点 三、深拷贝3.1.定义3.2.深拷贝特点 四、拷贝实现方案4.1.Object.assign()4.2.concat()4.3.slice()4.4.JSON.parse(JSON.stringify())4.5.cloneDeep() 五、结论 前言 在理…

C# 中的浅拷贝和深拷贝

在本文中&#xff0c;将通过示例讨论C&#xff03;中的浅拷贝和深拷贝。这是上一篇文章的续篇。因此&#xff0c;在继续本文之前&#xff0c;请阅读以前的文章&#xff0c;其中之前使用示例讨论了C&#xff03;中的原型设计模式。 什么是深拷贝和浅拷贝&#xff1f; 浅复制和…

JAVA 浅拷贝和深拷贝

拷贝 拷贝即对已有的数据创建一个副本&#xff0c;在 Java 中&#xff0c;拷贝可分为引用拷贝、浅拷贝、深拷贝。 引用拷贝 在 Java 中&#xff0c;实例化后的对象存储在堆区&#xff0c;而局部变量存放在局部变量表(栈)中&#xff0c;如&#xff1a; public void yinYongC…

js浅拷贝和深拷贝

1、JS数据类型 基本数据类型&#xff1a;Boolean、String、Number、null、undefined 引用数据类型&#xff1a;Object、Array、Function、RegExp、Date等 2、深拷贝与浅拷贝 深拷贝和浅拷贝都只针对引用数据类型&#xff0c; 浅拷贝会对对象逐个成员依次拷贝&#xff0c;但…

C++浅拷贝和深拷贝

1、浅拷贝 浅拷贝&#xff1a;又称值拷贝&#xff0c;将源对象的值拷贝到目标对象中去&#xff0c;本质上来说源对象和目标对象共用一份实体&#xff0c;只是所引用的变量名不同&#xff0c;地址其实还是相同的。 举个简单的例子&#xff0c;你的小名叫西西&#xff0c;大名叫…