【整理总结】VSCode常用插件和好用配置（小白必看）

article/2025/10/5 11:34:03

本篇文章给大家总结分享一些VSCode常用插件和好用配置（超详细）,希望可以给刚入坑前端的小伙伴一些帮助。本文很长，如果能认真看完，你一定会有所收获。

一、VSCode常用插件推荐

工欲善其事，必先利其器。本文介绍一些前端入门级插件，这些插件作者都有用到过，也对比过一些同类插件，还有插件是否维护积极等综合去推荐。

注意：这些插件主要以前端这块来讲，并且不涉及像vue,react等框架的一些插件，同时也不会讲c++,python等。

插件清单

  • Chinese (Simplified) (简体中文)

  • Auto Rename Tag

  • open in browser

  • Prettier - Code formatter

  • Live Server

  • Path Intellisense

  • Image preview

  • Code Spell Checker

  • Better Comments

  • Easy LESS

  • Sass

  • Live Sass Compiler

  • jQuery Code Snippets

  • 14.JavaScript (ES6) code snippets 

  • One Dark Pro

  • Material Theme

  • Tokyo Night

  • Material Icon Theme

  • vscode-icons

【推荐学习：vscode教程、编程教学】

01- 实用扩展推荐

1.Chinese (Simplified) (简体中文)

  • 适用于 VS Code 的中文（简体）语言包

不用多说，英语不太好的小伙伴必装的汉化插件，英语好的可以略过。

2.Auto Rename Tag

  • 同步修改 HTML/XML标签

3.open in browser

  • 提供右键菜单选项，一键在浏览器打开html文件。

可以选择在默认浏览器打开或者选择自己想用的浏览器打开

4.Prettier - Code formatter

  • 最流行的前端代码格式化利器

在设置中把在保存时格式化文件勾上，就可以ctrl+s保存后格式化文件，不管写的再乱，代码都能变得整齐划一。我们也可以根据自己的喜好，配置相关的的设置，比如缩进，前端的话像html,css,js等都建议缩进两个单位。

这是一些常用的配置，记住放在settings.json最外的大括号里

{"printWidth": 130,// 最大换行长度"tabWidth": 2, // 保存后缩进单位"[html][css][less][scss][javascript][typescript][json][jsonc]": {"editor.defaultFormatter": "esbenp.prettier-vscode",//设置prettier为默认格式化程序"editor.tabSize": 2 // 编辑时缩进单位},
}

5.Live Server

  • 开启一个实时的本地服务器

一个非常好用的插件，每次保存文件后到浏览器都要刷新才能看到最新的变化，有了这个插件，就可以实时监听文件的变化，自动刷新，真滴好用。真的是太感谢开发这个插件的作者了。

6.Path Intellisense

  • 智能路径补全

之前这个插件好久都没人维护，但最近的一段时间，经常可以看到插件的更新，也对比了一些同类插件，这个插件还是很优秀的。

7.Image preview

  • 鼠标悬停可以预览图片

鼠标悬停可以预览图片，显示图片的大小和尺寸。不仅仅在css中，也可以在js、vue等文件中预览哦，可以打开对应的文件夹和项目文件为位置，真的强烈推荐！

"gutterpreview.showImagePreviewOnGutter": false,// 关闭在行号中显示缩列图

8.Code Spell Checker

  • 一个基本的拼写检查器，可以很好地与驼峰大小写代码配合使用。

9.Better Comments

  • 写出更个性化的注释

10.Easy LESS

实时编译less到css

11.Sass

写sass/scss文件必装的插件

12.Live Sass Compiler

实时编译sass/scss到css

13.jQuery Code Snippets

jquery代码提示

14.JavaScript (ES6) code snippets

es6等代码块，语法提示

02-外观美化插件推荐

1.主题插件

  • One Dark Pro  最受欢迎的暗黑主题

  • Material Theme  拥有非常多的主题，都很不错，也是有名的主题插件

  • Tokyo Night     本人在用的一款主题，特别喜欢，不刺眼，色彩设计的很合理

  • ......

2.文件图标

  • Material Icon Theme 拥有超多的文件图标，色彩饱和度高。

  • vscode-icons   也是非常不错的文件图标，下载量很高

二、VSCode常用快捷键

VSCode 内置很多快捷键，可以大大的提高我们的开发效率。注意：这个快捷键都是可以自定义的，这里我们主要说说一些好用的默认快捷键。

这里推荐黑马前端pink老师 vscode快捷键-以及使用技巧  https://www.bilibili.com/read/cv9699783

三、VSCode一些好用的配置

01-彩虹括号

以前我们实现彩虹括号可能会用上一个插件叫Bracket Pair Colorizer 2，但是会产生性能问题，着色慢。vscode在2021 年 8 月（1.60 版）开始内置了这个功能，随之到来的还有垂直连线，亲测，现在已经非常好用了，效果出色，并且所有颜色都是可主题化的，最多可以配置六种颜色。

在如下打开settings.json，记住放在最外层的大括号里。

这是我认为比较好的配置，详细的配置可以参考vscode官方文档：

https://code.visualstudio.com/updates/v1_60#_high-performance-bracket-pair-colorization

 "editor.bracketPairColorization.enabled": true,"editor.guides.bracketPairs": "active",

02-javaScript参数名称提示

vscode在2021 年 8 月（1.60 版）中加入**JavaScript/TypeScript 嵌入提示**- 参数名称和类型的内联提示等，此设置不会自动打开，也就是说也是需要我们手动去配置的。总所周知，javaScript是弱类型语言，这些提示可以简单的帮助我们做一些错误检查，同时也让代码更直观、好看。

这是我的一些配置，详细的配置说明可以参考vscode官方文档：

https://code.visualstudio.com/updates/v1_60#_inlay-hints-for-javascript-and-typescript

  "javascript.inlayHints.parameterNames.enabled": "all","javascript.inlayHints.variableTypes.enabled": false,

至此，本文结束。创作不易，本人第一次写博客，如果本篇文章对你有所帮助，希望可以点个赞，给个关注。

更多关于VSCode的相关知识，请访问：vscode教程！！


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

相关文章

VScode 常用必备插件

VScode 常用必备插件

Visual Studio Code（简称“VS Code”）在前端开发的过程中必不可少，vscode作为代码编辑器，开源、免费、颜值高。更关键的是，丰富的插件，能够提高开发效率，你值得拥有。我们团队中大部分人都在用&…
阅读更多...
【vscode】vscode常用插件介绍

【vscode】vscode常用插件介绍

1、Angular Snippets（angular片段） 这个扩展为 TypeScript 和 HTML 添加了 Angular 的代码片段。 2、Auto Close Tag（自动闭合标签） 自动添加 HTML/XML 关闭标记。 3、Auto Rename Tag（自动重命名标签） 自…
阅读更多...
VSCode常用插件

VSCode常用插件

一、VSCode常用的插件 目录 1.Chinese (Simplified) 2.Auto Rename Tag 3.One Dark Pro 颜色主题 4.格式化代码（vscode系统自带） 5.open in browser 浏览器预览页面 ​6. Live Server 实时预览（推荐） 7. vsc…
阅读更多...
VsCode 插件推荐（个人常用）

VsCode 插件推荐（个人常用）

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

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个插件，推荐给你们

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

1. Settings Sync 开发必备神器之一！可以帮助你在不同的设备之间同步vscode所有的配置、插件！！! 虽然配置有好几个步骤，但是一旦配置好了之后使用非常的方便，只需要记住快速上传和快速下载的快捷键即可。甚至你可以选…
阅读更多...
数组的浅拷贝与深拷贝

数组的浅拷贝与深拷贝

文章目录 1 数据类型2 浅拷贝与深拷贝3 实现深拷贝方法3.1 JSON.string() 结合 JSON.parse()3.2 递归 4 JS 中的拷贝方法4.1 concat()4.2 slice()4.3 展开运算符（...）4.4 Object.assign() 5 参考文章 1 数据类型 在 JavaScript 中，数据被分为…
阅读更多...
浅谈一下js的浅拷贝和深拷贝

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

目录 一、什么是拷贝 二、浅拷贝和深拷贝概念 2.1 浅拷贝 代码 2.2深拷贝 代码 2.3 jQuery中的拷贝 三、深拷贝应用场景 一、什么是拷贝 谈到拷贝的话，大家应该是不陌生的，拷贝简单来说就是复制。 复制的话，这里就得想到js的两种数据…
阅读更多...
前端面试：浅拷贝和深拷贝的区别？

前端面试：浅拷贝和深拷贝的区别？

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

Java 中的浅拷贝和深拷贝

无论是浅拷贝还是深拷贝，都可以通过 Object 类的 clone() 方法来完成： /*** 拷贝** 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浅拷贝和深拷贝的方式

Java浅拷贝和深拷贝的方式

文章目录 1. 前言2. 概念介绍2.1 拷贝 / 克隆的概念2.2 为什么需要拷贝方法？2.3 什么是浅拷贝？浅拷贝和深拷贝的区别是什么？ 3. 深拷贝的实现方式3.1 手动深拷贝3.2 序列化方式3.2.1 自定义序列化工具函数3.2.2 commons-lang3 的序列化工具类…
阅读更多...
JS 浅拷贝和深拷贝详解(巨详细)

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中的浅拷贝和深拷贝

SV中的浅拷贝和深拷贝

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

什么是浅拷贝和深拷贝？

文章目录 1、什么是浅拷贝？2、什么是深拷贝？2.1、常见的深拷贝方式 在Java语言中，当我们需要拷贝一个Java对象的时候，常见的会有两种方式的拷贝:浅拷贝与深拷贝。 浅拷贝：只是拷贝了源对象的地址，所以源对象…
阅读更多...
基于java实现浅拷贝和深拷贝

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

目录 1、概念2、浅拷贝2.1、浅拷贝实战 3、深拷贝3.1、嵌套 clone 方法3.2、使用序列化流3.3、使用开源工具类 1、概念 浅拷贝：在拷贝一个对象时，复制基本数据类型的成员变量，但对引用数据类型的成员变量只进行引用的传递（复制其…
阅读更多...
js实现浅拷贝和深拷贝

js实现浅拷贝和深拷贝

一.数据类型 数据分为基本数据类型和引用数据类型 基本数据类型(String, Number, Boolean, Null, Undefined，Symbol) 引用数据类型（Object[Array属于Object]） 基本数据类型的特点：直接存储在栈(stack)中的数据 引用数据类型的特点…
阅读更多...
浅拷贝和深拷贝

浅拷贝和深拷贝

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

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

一、数据类型 数据分为基本数据类型(String, Number, Boolean, Null, Undefined，Symbol)和引用数据类型Object，包含（function，Array，Date）。 1、基本数据类型的特点：直接存储在栈内存中的数据 …
阅读更多...
VUE浅拷贝和深拷贝

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# 中的浅拷贝和深拷贝

C# 中的浅拷贝和深拷贝

在本文中，将通过示例讨论C＃中的浅拷贝和深拷贝。这是上一篇文章的续篇。因此，在继续本文之前，请阅读以前的文章，其中之前使用示例讨论了C＃中的原型设计模式。 什么是深拷贝和浅拷贝？ 浅复制和…
阅读更多...
推荐文章

Copyright @ 2022~2023