Visual Studio Code前端常用插件详解，教你玩转vscode

最新推荐文章于 2024-07-04 15:17:15 发布
最新推荐文章于 2024-07-04 15:17:15 发布
阅读量2.7k 收藏 16
点赞数 9
文章标签： 开发工具
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46613478/article/details/105581367
版权
本文介绍了在Visual Studio Code中提升前端开发效率的必备插件，包括安装方法及推荐的插件列表，帮助开发者更好地使用VSCode进行前端项目开发。
摘要由CSDN通过智能技术生成

Visual Studio Code安装插件

前端常用插件

我们常用的webstorm自从不能获取注册码以后。用起来感觉很费事，隔断时间就需要重新激活。没办法只能找别的。用了很多前端开发软件，倒是各有优点，但是我推荐的是Visual Studio Code，但是需要自己装一下插件才能用的很6，下面是我总结出的前端常用插件。
下图是安装插件的方法
在这里插入图片描述

插件名称 用途
Auto Close Tag 自动闭合HTML/XML标签
Auto Rename Tag 自动完成另一侧标签的同步修改
Beautify 格式化 html ,js,css
Prettier 格式化JavaScript / TypeScript / CSS
Bracket Pair Colorizer 给括号加上不同的颜色，便于区分不同的区块
Debugger for Chrome 映射vscode上的断点到chrome上，方便调试
最低0.47元/天 解锁文章
jingjinglove-
关注
Visual Studio Code 常用插件
03-08
Visual Studio Code 常用插件,包括bootstrap-3，vscode-icons，jquery，JS-CSS-HTML-formatter，aspnet-helper，path-intellisense（路径自动补全），html css
程序员必备 VS Code 插件大全！
QcloudCommunity的博客
06-27 1011
????目录1 Code Runner2 AI 代码助手3 Settings Sync 插件漫游4在 VS Code 中练习 LeetCode5Rainbow 系列6TODO Highlight & TODO Tree7Material Them & Material Theme Icons工欲善其事，必先利其器！VS Code 就像经典游戏《上古卷轴5：天际》一样，本体已经足够...
Visual Studio Code必备插件
热门推荐
猫老板的豆
11-27 2万+
Visual Studio Code必备常用插件 HTML Snippets： 超级实用且初级的 H5代码片段以及提示 . HTMLHint： html代码检测 . HTML CSS Support : 让 html 标签上写class 智能提示当前项目所支持的样式。新版已经支持scss文件检索，这个也是必备插件之一 . Auto Close Tag : 匹配标签，关闭对...
前端开发必备 VS Code 插件大全
最新发布
weixin_50367873的博客
07-04 1079
最好的软件开发往往来自于程序员的直接需求，Code Runner 作者是一位曾就职于微软的中国程序员，他为了方便自己的日常开发工作，开发了 Code Runner 这款可以在 VS Code 中方便快捷运行各种语言代码的插件。Live Server Live Server是一款实时开发服务器插件，能够在本地启动一个服务器，当你修改代码时，它能自动检测变化并即时刷新浏览器，让你在开发过程中能即刻看到改动效果，尤其适用于静态网页和单页应用（SPA）的开发。提供右键菜单选项，一键在浏览器打开html文件。
Visual Studio code 前端常用插件集集合
weixin_30894389的博客
06-14 337
HTML Boilerplate Auto Close Tag 标签提示 HTML CSS Support 标签和样式编辑 View In Browser 从浏览器打开 open in browser 从浏览器打开按照默认浏览器 vscode-vue 主要是vue HTML Snippets 超级实用且初级的 H5代码片段以及提示 H...
Visual Studio Code常用插件（前端）
weixin_45773503的博客
03-13 772
Visual Studio Code常用插件（前端） 插件 作用 Chinese (Simplified) Language Pack for Visual Studio Code 中文包 open in browser 使用右键在默认浏览器打开 JS-CSS-HTML Formatter 保存格式化（对齐） Auto Rename Tag 自动重命名匹配，只用改一个标...
Visual Studio Code 前端开发所需插件
xu990128638的专栏
05-15 227
Visual Studio Code (VS code) 常用插件和说明
hello_earth616的博客
12-09 418
文本代码编辑辅助类 1. TODO Tree 功能：对 TODO 关键字标定的位置高亮，并可实现标签式文本跳跃 安装后左侧栏会多出一个TODO Tree 菜单，点开后会目录式列出TODO标签 2. Bracket Pair Colorizer 各类括号自动匹配，点击一半找到另一边，使用极其舒适 3. vscode-icons 丰富文件树的图标显示 编程语言支持类 1. Anaconda Extension Pack 如果python 之类的编辑使用 Anaconda 集成安装版本，这个
VS Code 常用插件总结
IT_dabai的博客
12-05 780
vs code 常用插件
Visual Studio Code 1.68.1 （VSCode-win32-ia32-1.68.1.zip)
06-19
《Visual Studio Code 1.68.1 for Windows 32-bit系统详解》 Visual Studio Code（简称VSCode）是一款由Microsoft开发的免费、开源的源代码编辑器，支持多种编程语言和框架，深受开发者喜爱。本文将针对VSCode 1.68...
vscode 前端常用必备插件汇总
BYGFJ的博客
08-03 5213
一、基础 1.HTML Snippets 智能提示HTML标签，以及标签含义 2.HTML CSS Support 智能提示CSS类名以及id 3.JavaScript(ES6) code snippets ES6语法智能提示，快速输入，还支持.js，还支持.ts，.jsx，.tsx，.html，.vue 4. jQuery Code Snippets 　jQuery代码智能提示 5.Code Runner 运行js等。 6...
Visual Studio Code好用的插件
miemiem_的博客
10-14 480
TODO Tree，TODO Highlight：TODO，FIXME等高亮显示，并且可以通过tree直接定位。·css peek:将html和css联系起来，在html中按住ctrl会提示对应的样式。·html css support：在html中自动提示css中的class。·Live Server: 更新文件保存的同时，浏览器自动同步。·code runner：右键单击即可运行代码，例如php。·html boilerplate：生成html模板。·Easy LESS：把less转换为css保存。
Visual Studio Code必备开发插件汇总(网址版)
weixin_44830974的博客
09-18 324
Visual Studio Code怎样设置成中文（汉化） https://jingyan.baidu.com/article/b87fe19ec7d9241219356820.html Visual Studio Code中文件怎样预览在浏览器 https://jingyan.baidu.com/article/eae078276b47741fed548542.html Visual Stu...
vscode （Visual Studio Code）安装汉化以及前端常用插件推荐
qq_31403519的博客
04-07 214
vscode （Visual Studio Code）安装汉化以及前端常用插件推荐
vs code 常用插件及说明
a4636666的博客
03-29 202
HTML Snippets 超级实用且初级的 H5代码片段以及提示 HTML CSS Support 让 html 标签上写class 智能提示当前项目所支持的样式 Debugger for Chrome 让 vscode 映射 chrome 的 debug功能（需要配置） jQuery Code Snippets jquery依赖 vscode-icon 让 vsco...
Visual Studio Code 前端web攻城狮-常备插件
佚名程序员
10-04 789
Visual Studio Code web攻城狮-常备插件 **开发方便了许多ε≡٩(๑>₃<)۶ 一心向学** 点击左侧栏这个拓展按钮（Ctrl+Shift+X）然后搜索下面的 Chinese (Simplified) Language Pack for Visual Studio Code简体中文包 Prettier - Code formatter最强格式化，不接受反驳（在应用商店中卸载JS-CSS-HTMLFormatter以免出现保存时自动格式化了） HTML
visual studio code前端开发安装教程
09-05
要安装Visual Studio Code进行前端开发，可以按照以下步骤进行操作： 1. 进入Visual Studio Code官网，点击Download按钮，选择与你的电脑配置相符的版本进行下载和安装。 2. 安装完成后，打开Visual Studio Code。 3. 在左侧的侧边栏中，点击Extensions图标，或者使用快捷键Ctrl+Shift+X打开Extensions面板。 4. 在Extensions面板中，搜索并安装一些常用的前端插件，例如HTML、CSS、JavaScript语法高亮插件，以及代码格式化、代码片段、自动补全等功能的插件。可以根据自己的需要选择安装，中提到了一些常用的前端插件，可以参考其中的推荐。 5. 打开HTML、CSS、JavaScript等前端文件，开始编写代码。Visual Studio Code具有智能提示、代码补全、代码格式化、调试等功能，可以提升开发效率和代码质量。 总结：通过前述步骤，你可以下载并安装Visual Studio Code，然后搜索并安装一些常用的前端插件，以便进行前端开发工作。希望这些步骤对你有所帮助。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [初识Web前端开发及Visual Studio Code的安装](https://blog.csdn.net/m0_73058235/article/details/128446944)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [visual studio code 编译运行html css js文件的教程](https://download.csdn.net/download/weixin_38711778/12727338)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [Visual Studio Code前端常用插件详解，教你玩转vscode](https://download.csdn.net/download/weixin_38727694/14044300)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值