VScode前端常用插件

最新推荐文章于 2025-03-24 18:14:01 发布
最新推荐文章于 2025-03-24 18:14:01 发布
阅读量7.8k 收藏 47
点赞数 8
分类专栏： vscode 文章标签： vscode
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44671994/article/details/120550578
版权

文章目录

VScode前端常用插件

VSCode下载

下载链接：https://code.visualstudio.com/Download
在这里插入图片描述

Windows有三种版本
User Installer：此版本安装在当前计算机帐户目录,这意味着如果使用另一个帐号登陆计算机将无法使用别人安装的vscode。
System Installer：此版本可以安装在非用户目录,例如C盘根目录,任何帐户都可以使用。
.zip：便携版，解压缩即可使用。

vscode默认提供的user版本，大多数人都是用的这个版本。

添加插件：

打开VScode左侧点击那个图标，在应用商店中搜索你需要的插件！
在这里插入图片描述

功能性插件

1、Chinese Simplified 输入Chinese 即可这是一个汉化补丁。

在这里插入图片描述

2、HTML CSS Support

在VScode中提示CSS相关扩展 这是写CSS代码快捷神器
在这里插入图片描述

3、JS-CSS-HTML Formatter

这个插件可以理解为：自动对齐文中不整齐的代码，ctrl+S保存就自动对齐了。
在这里插入图片描述

4、Auto Close Tag

输入开始标签后，自动添加结束标签。比如输入

，自动添加

在这里插入图片描述

5、Auto Rename Tag

修改了第一个标签，相对应的标签也会一起修改。
在这里插入图片描述

6、Bracket Pair Colorizer

括号颜色标签。最关键的作用就是让有嵌套关系的括号有颜色区分，在一定程度上利于查看
在这里插入图片描述

7、CSS Peek

这个插件厉害了，在源代码中，点一下就能够迅速找到你对应的CSS源代码。
详情点击下方链接：
https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

在这里插入图片描述

8、Easy LESS

这个插件乃是学习less最佳的配方。它可以直接编译less 自动保存为css文件
在这里插入图片描述

9、JavaScript (ES6) code snippets

这个插件乃是写ES6语法的最佳神器，拥有补全ES6语法 和检查的功效。
在这里插入图片描述

10、jQuery Code Snippets

这个插件是写JQ的。
在这里插入图片描述

11、Live Server

这个插件用于在VScode中写好了Html+CSS+JavaScript中的任意一个文件，只要保存之后网页自动刷新，再也不用手动刷新了，在一定程度上简化操作。
使用方式：右击页面出现对话框，选择红色箭头处。
在这里插入图片描述
在这里插入图片描述

12、Image preview

这个插件用于什么嘞？让你左侧能看见图片，就怎么一回事。鼠标移到路径里显示图像预览.。在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

13、Code Spell Checker

这个插件用于什么嘞？让你检查你的单词拼写错误。会用波浪线提示。
在这里插入图片描述
在这里插入图片描述
其次这个东西对拼音是不友好的，拼音都是错的，那么怎么办呢？在这个词上面右键会出现这几个选项。选择红色箭头处，然后按回车即可！
在这里插入图片描述
在这里插入图片描述

14、Beautify

格式化代码，值得注意的是，beautify插件支持自定义格式化代码规则

15、Bracket Pair Colorizer

给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色。

16、Debugger for Chrome

映射vscode上的断点到chrome上，方便调试

17、Courier New

一款好看字体

18、GitLens

方便查看git日志，git重度使用者必备

19、Markdown Preview Enhanced

实时预览markdown，markdown使用者必备

20、markdownlint

markdown语法纠错

21、Material Icon Theme

个人认为最好的vscode图标主题，支持更换不同色系的图标，值得点出的是，该插件更新极其频繁，基本和vscode更新频率保持一致

22、open in browser

vscode不像IDE一样能够直接在浏览器中打开html，而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari。

23、Path Intellisense

自动提示文件路径，支持各种快速引入文件

24、React/Redux/react-router Snippets

React/Redux/react-router语法智能提示

25、Vetur

Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。vscode官方钦定Vue插件，Vue开发者必备。

26、vscode-icon

让 vscode 资源树目录加

27、HTMLHint

html代码检测

28、Project Manager

在多个项目之前快速切换的工具

29、fileheader

顶部注释模板，可定义作者、时间等信息，并会自动更新最后修改时间，快捷键ctrl+alt+i在文件开头自动输入作者信息和修改信息等内容

30、filesize

在底部状态栏显示当前文件大小，点击后还可以看到详细创建、修改时间
　　在这里插入图片描述

31、quokka

一个调试工具插件，能够根据你正在编写的代码提供实时反馈。它易于配置，并能够预览变量的函数和计算值结果。另外，在使用 JSX 或 TypeScript 项目中，它能够开箱即用

32、HTML Boilerplate

通过使用 HTML 模版插件，你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html，并按 Tab 键，即可生成干净的文档结构。

33、Prettier

Prettier 是目前 Web 开发中最受欢迎的代码格式化程序。安装了这个插件，它就能够自动应用Prettier，并将整个 JS 和 CSS 文档快速格式化为统一的代码样式。如果你还想使用 ESLint，那么还有个 Prettier – Eslint 插件，你可不要错过咯！

34、Color Info

提供你在 CSS中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了。

35、Icon Fonts

这是一个能够在项目中添加图标字体的插件。该插件支持超过 20 个热门的图标集，包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons

36、Minify

这是一款用于压缩合并 JavaScript 和 CSS 文件的应用程序。它提供了大量自定义的设置，以及自动压缩保存并导出为.min文件的选项。它能够分别通过 uglify-js、clean-css 和 html-minifier，与 JavaScript、CSS 和 HTML 协同工作。使用F1 运行文件缩小器Minify

37、VueHelper

snippet代码片段

38、Vue 2 Snippets

39、Vue VSCode Snippets

VUE代码自动补全插件

40、Git History

git提交历史

41、Setting Sync

同步你得设置和插件

42、Reactjs code snippets

一个 React 自动补工具。

43、Terminal

vs code 内置的命令行插件，也比较实用。

44、npm Intellisense

用于在import语句中自动填充npm模块。

45、npm

此扩展支持运行文件中定义的npm脚本，package.json并根据中定义的依赖项验证已安装的模块package.json。

46、Window Colors

每个VSCode窗口都可以独特地自动着色。

47、Code Runner

非常强大的一款插件，能够运行多种语言的代码片段或代码文件：C，C ++，Java，JavaScript，PHP，Python，Perl，Ruby，Go等等，安装完成后，右上角出现：
在这里插入图片描述
点击这个按钮就可以运行你的文件了（必备）

48、Dash

查文档必备，搭配 dash（不过似乎只有 mac 版）😁
快捷键 ctrl + h 它根据你当前选中的语言查找 dash 里面的文档

49、Document This

添加注释块
在这里插入图片描述设置：

“docthis.includeAuthorTag”: true,//出现@Author
“docthis.includeDescriptionTag”: true,//出现@Description
“docthis.authorName”: “shenzekun”,//作者名字
快捷键： 按两次Ctrl+alt+d

50、Node.js Modules Intellisense

可以在导入语句中自动完成JavaScript / TypeScript模块。
在这里插入图片描述

51、Output Colorizer

输出提示的文字颜色有一些变化，方便获取关键信息
在这里插入图片描述
在这里插入图片描述

52、vscode-faker

生成假数据，地址，电话，图片等等
在这里插入图片描述

美化插件：

1、category:themes

这个是扩展性美化插件，只要在商店搜索这个，基本上显示出来的都是美化插件
安装以后就会在原来的地方，设置主题颜色。
美化插件个人不太喜欢，因为主题咋说呢，不如原来的看得顺眼，咋个设置嘞？
在这里插入图片描述
在这里插入图片描述

2、Power Mode

这个插件就有点骚气了！可以设置各种打代码时候的效果，就是添加一些粒子效果，颜色随着内容的颜色发生变化。
在这里插入图片描述
具体呢操作如下：
第一步：
在这里插入图片描述

第二步：
在搜索设置 搜索：code Actions on Save ，点在settingsjson中编辑
在这里插入图片描述
之后再最后一行输入：“powermode.enabled”: true 即可出现粒子效果。
“powermode.shakeIntensity”: 0 还有一定要添加这个玩意，取消抖动否则！会晕车的。
在这里插入图片描述

VSCode 2025最新前端开发必备插件推荐汇总（提效指南）
Code_流苏：在代码中寻诗意
03-11 2033
VSCode 2025最新前端开发必备插件推荐（提效指南）
提高开发效率的必备！超实用的VSCode插件推荐
热门推荐
希望看完文章的你能够带着答案离开
01-03 5万+
提高开发效率的必备！超实用的VSCode插件推荐
VSCode配置html运行环境
最新发布
qq_38683187的博客
03-24 1524
这里有15个有助于写html的插件，最后两个插件是AI模型，不论是html还是其他高级语言，都能用到。适用于VS Code的中文（简体）语言包。安装完毕之后，点击右下角的“Change Language and Restart”按钮，重新启动服务。自动重命名标签示例：假如你有如下的html代码： 当你修改 标签为 时， 标签会自动变为 。同样，如果你修改 为 ， 也会自动变为 它为HTML文件中的CSS类名和 id 提供智能提示和自动补全功能。它是一个内置的代码片段扩展，它提供了一系列常用
VSCode插件大全｜VSCode高级玩家之第二篇
2301_82243626的博客
04-29 1088
加入我们的会话的开发人员从我们的环境中接收所有的编辑器上下文(例如，语言服务、调试)，这确保了他们可以立即开始有效地协作，而不需要克隆任何代码或安装任何sdk。在编写代码的时候，我们都是用英文单词，很多时候我们都会写错单词的可能性。增强VSCode中内置的Git功能——通过Git blame注释和代码透镜，一眼就能看到代码作者的身份，无缝导航和探索Git存储库，通过强大的比较命令获得有价值的见解，等等。在代码量比较多的情况下，括号也会变得非常的多，有了颜色的标识会给开发者带来更好的识别能力。
VSCode插件HTML CSS Support
记录和分享属于我的“IT”时光。
02-02 1123
VSCode插件HTML CSS Support
VSCode 开发必备插件
qq_60839348的博客
11-28 3449
VSCode 开发必备插件
vscode前端开发(html/js/css)配置(插件&快捷键&常用设置)
qq_29404373的博客
01-14 1万+
1.插件：Chinese (Simplified) Language Pack for Visual Studio Code（中文界面） 2.插件：vscode-icons(图标集，资源管理器一目了然) 3.插件：HTML CSS Support(智能提示CSS类名以及id) 4.插件：Live Server(标准HTML页面浏览器自动刷新)，修改默认的浏览器在插件的manage->extension settings->live server>custom browser-chro
vs code中编写html的配置，插件安装
weixin_43794311的博客
08-24 1371
vs code好用的几款插件
vscode常用插件压缩包
07-13
这个"vscode常用插件压缩包"很可能是包含了多个为提升VSCode功能和效率而设计的扩展插件。接下来，我们将深入探讨VSCode插件系统以及一些常见的插件及其用途。 1. **代码高亮与美化**： - `Prettier`：这是一个...
2024vsCode常用的插件，插件，皮肤、vue提示、sass rem
2401_84149996的博客
05-04 1145
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
前端VSCode常用插件-以及常用技巧
qq_47462646的博客
08-04 1925
刚才的插件是可以预览我们的页面，但是改完代码，浏览器必须要重新刷新，比较麻烦，因此推荐安装live sever这个插件，修改完代码，自动更新浏览器预览效果，爽歪歪~~刚开始学习前端，基本页面很少，就可以左编辑器，右浏览器，这样编写完毕代码，保存完毕后，浏览器自动更新了。我们写的less不能直接引入到HTML文件中，通过这个插件可以自动帮我们生成css文件。VSCode下载完毕是英文版的，先安装这个插件，改为中文版。编写完代码，需要浏览器预览，就可以安装这个插件。是的没有看错，这个插件的名字就是
VS Code中常用插件
qq_41908456的博客
05-26 394
1、Auto Close Tag 自动闭合 html 和 xml 标签 2、Auto Rename Tag 自动完成另一侧标签的同步修改 3、Beautify 格式化文件 4、HTML CSS Support 智能提示CSS类名以及id 5、JavaScript(ES6) code snippets ES6语法智能提示，以及快速输入，不仅仅支持.js，还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间 6、jQuery Code Snipp
vscode相关插件使用----持续更新中
PPdouluo的博客
04-30 1669
以下是更多常用的VSCode插件推荐：
超实用的VS Code插件推荐
明静致远
07-05 9010
VS Code代码编辑器中提供了丰富的插件，满足不同开发者的需求。这里为大家推荐一些强大的VS Code插件，帮助你打造一个个性化的开发环境，让你的编码体验更加舒适和高效。打开扩展模块，输入安装包名称，回车进行搜索，点击install即可无脑安装。
vscode在html中的使用
qq_43494013的博客
08-30 774
vscode在html中的使用
前端开发推荐vscode安装什么插件？
SiKi学院的博客
05-15 1421
可以参考一下下面我推荐的插件，注意：插件的目的是用于提高开发的效率，节约开发的时间，像类似检查一些bug、拼写错误等这些可以使用插件快速的识别，避免在查找错误上浪费过多的时间，但切记不要过度依赖一些插件到最后反而使我们代码的能力水平下降，这样就适得其反了~~~，直接进入正题=>
vs code html5中引用css,VS Code中6个令人惊叹的CSS扩展
weixin_39538607的博客
06-18 991
前言Visual Studio Code最令人印象深刻的部分之一是可定制性，尤其是通过扩展。随着大量开发人员创建扩展，功能实际上是无穷无尽的！作为一名程序猿，或多或少都会码一点点CSS，不管是简单的css颜色、字体设置，还是高级的css动画等。现在就为大家推荐一下VS Code中用于编写CSS的一些最佳扩展，让你编写CSS时更得心应手。1、HTML CSS Support2、Intellisens...
html css support安装设置,Support — CSS HTML Validator for Windows
weixin_35426348的博客
06-10 3324
Need Your Registration Key?Online DocumentationLicense AgreementsIntegration SupportForum VIP CodeThe VIP code you'll need to register for a forum account (if you don't already have one) is 73205.CSS ...
vscode 前端常用必备插件汇总。
07-27
对于前端开发，VS Code 是一个非常流行的编辑器，有许多常用的插件可以提高开发效率。以下是一些前端常用的必备插件： 1. ESLint：用于代码风格检查和自动修复，帮助保持代码质量。 2. Prettier：用于代码格式化，可以根据预设的规则自动格式化代码。 3. HTML CSS Support：提供 HTML 和 CSS 的智能提示和代码片段。 4. Auto Rename Tag：自动重命名 HTML 或 XML 标签的闭合标签。 5. Bracket Pair Colorizer：为代码中的括号提供颜色标识，方便查看代码结构。 6. Path Intellisense：路径自动补全插件，方便引入文件和库。 7. GitLens：增强了 Git 功能，可以在编辑器中显示 Git 信息和注释。 8. Live Server：提供一个本地开发服务器，实时预览前端页面效果。 9. Debugger for Chrome：在 VS Code 中调试 JavaScript 和 TypeScript 代码。 10. IntelliSense for CSS class names：CSS 类名的智能提示和补全功能。 这只是一些常用的插件，根据个人需求和项目特点，还可以安装其他插件来增强开发体验。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值