前端vsCode常用插件整理

最新推荐文章于 2024-08-01 22:05:25 发布
最新推荐文章于 2024-08-01 22:05:25 发布
阅读量1k 收藏 11
点赞数 11
CC 4.0 BY-SA版权
文章标签： 前端 vscode ide 编辑器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lv_qingru/article/details/136396335
本文介绍了如何通过VSCode中的各种插件如语言包、代码格式化、本地服务器、Git增强等功能，提升前端开发效率，同时提到了适合的中文支持和代码辅助工具。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

VSCode 作为前端开发的一个工具，选择好用的插件能够提高开发效率，然后剩下的时间用来摸鱼学习是很有必要的。

点击“扩展”模块，在搜索框中搜索想要安装的插件，安装即可。

一、Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

这个插件为 VS Code 提供中文本地化界面。

二、Prettier - Code formatter

自动格式化代码，让代码更具可读性。

三、Live Server

提供一个本地开发服务器，实时在浏览器中预览网页。

四、GitLens —— Git supercharged

增强对 Git 版本控制的支持，提供更多有用的功能和信息。

五、Auto Close Tag 和 Auto Rename Tag

自动闭合 HTML 标签，并在修改一个标签时自动重命名与之匹配的标签。

六、Path Intellisense

路径自动补全插件，节省时间并减少拼写错误。

七、JavaScript Debugger

在 VSCode 中调试 JavaScript 代码，与 Chrome 浏览器集成。

八、CSS Peek

可以从HTML 文件中直接查看和编辑 CSS 样式。

九、Bracket Pair Color  

彩色显示匹配的括号，方便查看代码结构。

十、Color Highlight

可以在代码中直接显示颜色数值的预览。

这些插件只是众多可用插件中的一部分，根据个人偏好和项目需求，可能会发现其他插件也非常有用。

清茹256
关注
前端VSCode常用插件-以及常用技巧
qq_47462646的博客
08-04 2024
刚才的插件是可以预览我们的页面，但是改完代码，浏览器必须要重新刷新，比较麻烦，因此推荐安装live sever这个插件，修改完代码，自动更新浏览器预览效果，爽歪歪~~刚开始学习前端，基本页面很少，就可以左编辑器，右浏览器，这样编写完毕代码，保存完毕后，浏览器自动更新了。我们写的less不能直接引入到HTML文件中，通过这个插件可以自动帮我们生成css文件。VSCode下载完毕是英文版的，先安装这个插件，改为中文版。编写完代码，需要浏览器预览，就可以安装这个插件。是的没有看错，这个插件的名字就是
Vscode 常用插件和工具
轻风细雨_林木木
02-26 4033
参考：https://baijiahao.baidu.com/s?
精选！必备的 VSCode 插件（前端类）
03-30
vscode 常用插件 手动放到 .vscode/extensions/ 下， 包含插件如下： Angular2V0.4.1.vsix auto-close-tagV0.5.6.vsix auto-rename-tagV0.0.15.vsix autoimportV1.5.3.vsix beautifyV1.3.0.vsix bracket-pair-colorizerV1.0.27.vsix change-caseV1.0.0.vsix code-runnerV0.9.3.vsix color-infoV0.5.0.vsix fileheadercommentV0.0.3.vsix gitlensV8.1.1.vsix html-snippetsV0.2.1.vsix icon-fontsV1.10.1.vsix JavaScriptSnippetsV0.2.0.vsix jquery-snippetsV1.0.0.vsix material-darkV1.1.0.vsix minifyV0.3.0.vsix npm-intellisenseV1.3.0.vsix open-html-in-browserV0.1.21.vsix path-autocompleteV1.8.1.vsix prettier-vscodeV1.2.2.vsix project-managerV0.25.0.vsix quokka-vscodeV1.0.116.vsix stylelintV0.35.0.vsix syncingV1.5.3.vsix theme-onedarkV0.5.2.vsix tsimporterV1.2.14.vsix typelensV1.5.0.vsix veturV0.11.7.vsix vetur-eV0.11.7.vsix vscode-css-peekV2.1.0.vsix vscode-eslintV1.4.8.vsix vscode-exports-autocompleteV0.5.4.vsix vscode-fakerV1.2.1.vsix vscode-git-historyV1.0.3.vsix vscode-html-cssV0.2.0.vsix vscode-iconsV7.22.0.vsix vscode-javascript-snippet-packV0.1.5.vsix vscode-regexp-preivewV0.0.3.vsix vscode-todo-highlightV0.5.12.vsix vscode-typingsV0.0.5.vsix vueHelperV0.1.6.vsix
vscode前端常用插件：
bamboozjy的博客
08-30 1407
VUE版： Auto Close Tag Auto Import Auto Rename Tag Beautify Better Comments Bookmarks Bracket Pair Colorizer Chinese (Simplified) Language Pack for Visual Studio Code Copy Relative Path css-grid-snipp...
vscode前端常用插件汇总
舒小罗
06-27 668
快捷命令 ctrl + shift + p 打开命令行 常用插件 Chinese (Simplified) Language Pack for Visual Studio Code 适用于vscode的中文语言包 Path Intellisense 自动路劲补全，默认不带这个功能的 Auto Rename Tag 自动重命名标签 HTML CSS Support css样式补全 Path Intellisense 路径补全 View In Browser 迅速通过浏览器打开html文
前端开发工程师VS code常用插件
申雨茜的博客
06-01 398
今天发现自己平常用的VS code 插件使用的比较少，然后参考了一下别人的常用的插件记录在这里，可以帮我们提高开发效率 HTML Snippets： H5代码片段 vscode-icons：左侧栏的图标 JS-CSS-HTML Formatter ：格式化 Path Autocomplete：路径自动补全 View In Browser：从浏览器中查看html文件，使用系统的当前默认浏览器 Chinese (Simplified) Language ：中文简体语言 Code Runner ： 右键运行JS
前端常用的vscode插件—————持续更新中
qq_40010841的博客
03-10 413
vue vuejs语法高亮 vetur 支持vue语法高亮 已经vuejs模板生成 Reactjs code snippets 支持react语法 px to rem&rpx(cssrem) 自动计算px转化为rem或者rpx js JSX Snippets 支持jsx语法 JavaScript（ES6）code snippets 支持es6语法 vscode weapp api 为vscode提供微信小程序API提示及代码片段 vscode wxml 为vscode提供wxml语法.
2024vsCode常用的插件，插件，皮肤、vue提示、sass rem
2401_84149996的博客
05-04 1213
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
vscode前端开发常用插件汇总
丑小鸭变黑天鹅的博客
03-04 659
1.HTML Snippets 超级实用且初级的 H5代码片段以及提示 2.HTML CSS Support 让 html 标签上写class 智能提示当前项目所支持的样式 3.Debugger for Chrome 让 vscode 映射 chrome 的 debug功能，静态页面都可以用 vscode 来打断点调试 https://github.com/Microsoft/vscode-chrome-debug/blob/master/images/demo.gif?raw=true ​ github.
vscode 前端常用插件推荐
m0_61418075的博客
04-12 4393
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料一个人可以走的很快，但一群人才能走的更远。
前端开发常用的Vscode插件整理（持续更新）
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
12-08 1617
记录前端开发中，常用的vscode插件
vscode最实用的插件
JIME_Y的博客
08-02 833
Auto Close Tag 自动闭合HTML/XML标签 Auto Rename Tag 自动完成另一侧标签的同步修改 Beautify 格式化 html ,js,css Bracket Pair Colorizer 给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色 GitLens 方便查看git日志，git重度使用者必备 HTML CSS Support智能提示CSS类名以及id HTML Snippets 智能提示H
vscode常用插件
weixin_44671184的博客
04-20 104
1.Auto Close Tag (必备) 自动闭合HTML/XML标签 2.Auto Rename Tag (必备) 自动完成另一侧标签的同步修改 3.Beautify (必备) 格式化 html ,js,css Prettier 格式化JavaScript / TypeScript / CSS 4.Bracket Pair Colorizer (必备) 给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色 5.Debugger for Chrome (推荐) 映射vs
vscode插件（前端）
weixin_44809439的博客
05-30 563
vscode插件（前端）欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用M
vs code 前端插件
weixin_50587417的博客
06-02 451
vscode 前端插件
vscode-前端插件
weixin_44748599的博客
04-08 796
文章目录Auto Close TagAuto Rename TagBeautifyBracket Pair ColorizerDebugger for ChromeESLintHTML CSS SupportHTML SnippetsJavaScript(ES6) code snippetsjQuery Code SnippetsMarkdown Preview EnhancedmarkdownlintMaterial Icon Themeopen in browserPath IntellisenseRe
Vscode前端插件
m0_54069693的博客
08-01 386
选择自己想要的浏览器运行代码:在代码页面鼠标右键选择“Open In Other Browsers"或通过快捷键“Shift+ Alt+ B”在浏览器运行代码。安装完就能在代码页面鼠标右键选择“OpenInDefault Browser”或通过快捷键“Alt+ B”在浏览器运行代码。修改同步/自动闭合/完成提示。
VSCode前端开发插件
weixin_45703724的博客
06-30 859
VS Code提供了非常丰富的插件功能，根据你的需要，安装对应的插件可以大大提高开发效率。
vsode
最新发布
03-27
### 关于 Visual Studio Code 的概述 Visual Studio Code 是一款由微软开发并开源的轻量级代码编辑器[^1]。它支持多种编程语言，并通过插件扩展功能，适用于 Web 开发、桌面应用开发以及跨平台移动开发等多种场景。 以下是关于 Visual Studio Code 的一些重要特性： #### 核心特点 - **跨平台支持**：可以在 Windows、macOS 和 Linux 上运行。 - **丰富的插件生态**：通过官方市场提供的大量插件，可以增强其功能以满足不同开发者的需求[^2]。 - **内置 Git 支持**：集成了版本控制工具，方便开发者管理源码变更。 - **调试能力强大**：提供强大的调试功能，能够设置断点、查看变量状态等操作。 #### 配置示例 以下是一个简单的配置文件 `.vscode/settings.json` 示例，用于自定义 VSCode 行为： ```json { "editor.fontSize": 14, "files.autoSave": "onFocusChange", "workbench.colorTheme": "Dark+ (default dark)" } ``` 此配置调整了字体大小、启用了焦点改变自动保存功能，并设置了深色主题。 ### Visual Studio Code 与 Visual Studio 的对比 尽管两者都来自微软家族，但它们的目标受众和技术定位有所不同。Visual Studio 更适合大型企业级解决方案，而 Visual Studio Code 则专注于现代化前端框架和脚本语言的支持。 | 特性 | Visual Studio Code | Visual Studio | |---------------------|---------------------------------------|------------------------------------| | 定位 | 轻量化代码编辑器 | 综合型集成开发环境 | | 平台兼容性 | 跨平台 | 主要针对 Windows | | 插件生态系统 | 基于社区驱动 | 商业化插件较多 | ### 性能优化建议 为了提升性能体验，在使用 Visual Studio Code 时可采取如下措施： - 减少不必要的启动加载项； - 使用 `--disable-extensions` 参数测试无插件模式下的表现。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值