Vscod - 前端编程插件

最新推荐文章于 2025-02-04 12:41:10 发布
最新推荐文章于 2025-02-04 12:41:10 发布
阅读量376 收藏 3
点赞数 1
分类专栏： 前端 文章标签： vscode html css 插件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Henry_ID/article/details/120085569
版权
本文列举了前端开发者在VSCode中常用的插件，包括Auto Close Tag、Auto Rename Tag、Beautify（或Prettier）等，覆盖HTML、CSS、JavaScript的自动闭合、同步修改、格式化等功能。还有Bracket Pair Colorizer、Guides、Highlight Matching Tag等提高代码阅读和编辑体验的插件，以及Debugger for Chrome和Firefox用于便捷的浏览器调试。此外，还推荐了诸如Live Server、Path Intellisense、Settings Sync等提升开发效率的实用工具。

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

1.Auto Close Tag (必备)

自动闭合HTML/XML标签
在这里插入图片描述

2.Auto Rename Tag (必备)

自动完成另一侧标签的同步修改
在这里插入图片描述

3.Beautify (选装一个)

格式化 html ,js,css
在这里插入图片描述

另一款 Prettier (选装一个)

格式化JavaScript / TypeScript / CSS
在这里插入图片描述

4.Bracket Pair Colorizer (必备)

给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色
在这里插入图片描述

5.Guides(必备)

给代码块增长对齐线，以标识匹配的花括号，让使用者很轻易的找到对应的语句块。

最低0.47元/天 解锁文章
前端|npm全局创建wps加载项
算法与编程之美
03-30 1655
欢迎点击「算法与编程之美」↑关注我们！本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。问题描述基于vscod...
精选！必备的 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 插件推荐 - 献给所有前端工程师（2018.4.29更新）
weixin_33802505的博客
08-24 1987
大家好，我是Moer.VScode现在已经越来越完善。性能远超Atom和webstorm,你有什么理由不用它?在这里，我会给你们推荐很多实用的插件，让你对 vscode 有更深刻的体会，渐渐地你就会知道它有多好用。 走马观花前，请先将你的 vscode 更新到最新版本。 通用插件 HTML Snippets 超级实用且初级的 H5代码片段...
VS Code中文环境配置及调试 保姆级教程！
热门推荐
2301_80467450的博客
02-04 1万+
VS Code环境配置，以及中文乱码解决教程！！！
VSCode插件
lyd的博客
05-31 847
VSCode插件 Chinese (Simplified) Language Pack for Visual Studio Code 适用于 VS Code 的中文（简体）语言包 ES7 React/Redux/GraphQL/React-Native snippets react全家桶的快捷生成代码 Auto Close Tag 自动添加标签闭合 Auto Rename Tag 自动修改闭合标签...
vscode最实用的插件
JIME_Y的博客
08-02 807
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插件，怪不得写代码头疼，VSCod安装与配置（适合小白）
01-08
文章目录一、什么是VSCode？二、版本三、下载四、安装五、插件安装1.Codelf2、View In Browser3、Color Highlight4、Bracket Pair Colorizer5、Highlight Matching Tag6、Path Intellisense7、Prettier – Code formatter8、Auto Close Tag9、Auto Rename Tag10、HTML Snippets11、HTML CSS Support12、indent-rainbow13、change-case六、总结 一、什么是VSCode？ VS Code的全称是Vi
史上最全VSCode插件，怪不得写代码头疼，VSCod安装与配置（适合小白）.pdf
05-09
VSCode支持的插件包括但不限于代码高亮、智能补全、代码格式化、版本控制、文件浏览、预览等，极大地丰富了开发者的编程体验。 接下来，VSCode的安装和配置对于初学者来说并不复杂。在安装之前，用户应当从VSCode...
前端编程规范(VSCode + Vue)
重楼的博客
11-18 2333
第一步：退出 VSCode 应用 第二步：输入如下指令，删除 VSCode 的设置和配置 sudo rm -rf $HOME/Library/Application\ Support/Code 第三步：输入如下指令，删除 VSCode 的插件 sudo rm -rf $HOME/.vscode 第四步：从 Application 中移除 VSCode ...
如何利用VSCode插件进行代码片段快速输入
插件不仅可以帮助我们优化开发效率，还能扩展编辑功能，让我们的编程之旅更加轻松愉快。通过安装和管理插件，我们可以根据自己的需求灵活选择功能强大的工具，助力我们更高效地完成编程任务。无论是代码片段、代码...
快速开发项目-VScode插件
技术前端，忠于热爱 @0.活在风浪里
06-27 2162
VScode使用element-ui插件准备，项目中快速开发
VS code 有插件版
08-18
有部分插件的vs code版本
vscode插件合集（20190814）part1
08-15
vscode最新插件合集（20190814）part1，共2个分包（part1/2），都下载后用命令“copy /b extensions.zip.rm1+extensions.zip.rm2 extensions.zip”合并再解压。 包合以下插件： wholroyd.jinja-0.0.8 daltonjorge.scala-0.0.5 eriklynd.json-tools-1.0.2 truman.autocomplate-shell-0.1.1 sensourceinc.vscode-sql-beautify-0.0.4 danields761.dracula-theme-from-intellij-pythoned-0.1.4 gerane.theme-druid-0.0.2 luqimin.forgive-green-0.2.1 mohsen1.prettify-json-0.0.3 chrmarti.regex-0.2.0 kalitaalexey.vscode-rust-0.4.2 ZakCodes.rust-snippets-0.0.1 itryapitsin.scala-0.1.7 itryapitsin.scalasnippets-0.1.7 vahidk.tensorflow-snippets-0.3.3 formulahendry.terminal-0.0.10 qub.qub-xml-vscode-1.2.8 waderyan.nodejs-extension-pack-0.1.9 jasonnutter.search-node-modules-1.3.0 christian-kohler.path-intellisense-1.4.2 christian-kohler.npm-intellisense-1.3.0 josephtbradley.hive-sql-0.0.4 magicstack.magicpython-1.1.0 ms-python.anaconda-extension-pack-1.0.1 mooman219.rust-assist-0.2.3 slevesque.vscode-hexdump-1.7.2 coenraads.bracket-pair-colorizer-1.0.61 bibhasdn.django-snippets-1.1.1 bibhasdn.django-html-1.3.0 octref.vscode-json-transform-0.1.2 xabikos.javascriptsnippets-1.7.2 jithurjacob.nbpreviewer-1.2.2 kondratiev.sshextension-0.5.0 humy2833.ftp-simple-0.7.0 batisteo.vscode-django-0.19.0 fwcd.kotlin-0.1.13 reditorsupport.r-lsp-0.1.0 ms-vsts.team-1.149.2 donjayamanne.jupyter-1.1.5 rust-lang.rust-0.6.1 grapecity.gc-excelviewer-2.1.32 vscjava.vscode-java-pack-0.7.1 ms-toolsai.vscode-ai-0.5.1 dbaeumer.vscode-eslint-1.9.0 ms-vscode.azure-account-0.8.4 rogalmic.bash-debug-0.3.5 donjayamanne.python-extension-pack-1.6.0 redhat.vscode-yaml-0.4.1 adisreyaj.swagger-snippets-0.0.1 alefragnani.bookmarks-10.4.4 arjun.swagger-viewer-2.2.2 dotjoshjohnson.xml-2.5.0 fisheva.eva-theme-0.7.7 vscjava.vscode-java-dependency-0.5.1 deerawan.vscode-hasher-1.0.1 vscjava.vscode-java-debug-0.20.0 scala-lang.scala-0.3.4 eg2.vscode-npm-script-0.3.8 vscjava.vscode-maven-0.18.1 ms-vscode.go-0.11.4 lextudio.restructuredtext-113.0.0 pkief.material-icon-theme-3.8.1 ms-azuretools.vs
vscod常用插件
qq_45808765的博客
01-28 841
1. Codelf 安装次数：2万+ 在计算机科学中只有两件难事:缓存失效和命名。 我对这句话深有同感，当开发项目时，命名一直都是一种让我痛苦的事情。我想，应该不止我一个人有这样的感觉。 可是，命名又是开发过程中一项非常重要的事情，例如，一个好的函数命名，能够让你瞬间明白它实现的功能，这样就节省了很大一部分时间琢磨一段代码到底是什么含义。 所以，每当开发过程中遇到要命名的变量、函数、类时我就不得不停下开发，苦思冥想半天。 但是，CodeIf的出现让这个问题迎刃而解，它通过搜索GitHub
VS Code 必装插件
fy980654797的博客
07-21 3019
一、必备插件 View In Browser
vscode实用自用插件
娓娓道来
10-10 319
1.Bracket Pair Colorizer 用于区别中括号位置及层级 2.BookMarks 用于添加书签，方便找到上次标记位置 。。。后期持续更新
vscode 前端常用插件推荐
m0_61418075的博客
04-12 4210
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料一个人可以走的很快，但一群人才能走的更远。
你想要的vscod插件
qq_29352185的博客
05-31 480
vscode 常用插件整理 通用 Chinese (Simplified) Language Pack for Visual Studio Code：中文包 vscode-icons： 文件图标 Code Spellchecker : 代码拼写检查 Path Intellisense: 路径提示器 filesize : 会在左下角显示文件大小，很不错 Bracket Pair Colorizer ：对括号对进行着色 VSCode Great Icons: 对展开的文件有变色处理，很容易分辨 markdo
最新VisualStudioCode最全实用插件_vscode常用前端插件_vscode插件配置
zzy1998___的博客
04-20 1864
工欲善其事必先利其器，开发前先把提升效率的利器搭好会让今后慢慢的编程长路舒服很多，vscode如果把插件配置好，比jb家的差不了多少，在这里推荐一些自用插件，再使用作者的插件配置会让你的使用感觉强过其他任何编辑器！
vscod中python插件推荐
最新发布
04-03
### 推荐的 VSCode Python 插件 以下是针对 VSCode 的一些高质量 Python 插件推荐，这些插件能够显著提升开发效率并改善用户体验： #### 1. **Python** 这是官方支持的 Python 扩展，提供了丰富的功能集，包括调试、Linting、代码补全、片段和单元测试支持等功能[^1]。 ```json { "recommendations": [ "ms-python.python" ] } ``` #### 2. **Pylance** 由 Microsoft 提供的语言服务器扩展 Pylance 能够提供快速且精确的类型检查以及智能感知功能。它基于 Pyright 构建，适合大型项目中的复杂依赖关系管理[^3]。 #### 3. **Jupyter** 如果经常处理数据科学或者需要运行 Jupyter Notebook 文件 (.ipynb)，那么这个插件将是不可或缺的选择之一。它可以无缝集成到 VSCode 中，并允许直接编辑和执行 notebook 单元格[^2]。 #### 4. **AutoDocstring** 用于自动生成符合 Google 或 NumPy 风格文档字符串模板的工具，帮助开发者更轻松地编写清晰易懂的功能描述信息. #### 5. **Black Formatter** 通过安装 Black 插件来实现自动化的代码格式化操作，遵循 PEP8 编码标准，减少团队协作过程中因风格差异而产生的冲突问题. #### 6. **IntelliCode** 增强型 AI 辅助编码建议服务——Visual Studio IntelliCode 可以为用户提供上下文敏感的完成选项列表，在提高生产力的同时也降低了错误率. #### 7. **Remote Development (可选)** 对于那些希望利用远程机器资源进行本地开发的人来说，“Remote – SSH” 和 “Dev Containers” 是两个非常有用的附加组件集合. 它们使得跨平台工作变得更加简单快捷. --- ### 注意事项与最佳实践 为了获得更好的体验效果，请注意以下几点设置: - 确保已正确配置 `settings.json` 文件内的参数项比如 `"python.defaultInterpreterPath"` 来指定解释器路径. - 如果遇到类型提示无法正常显示的情况，则可能是因为缺少必要的库文件或者是环境变量未被加载完全所致; 此时可以通过调整 workspace settings 解决此状况. 另外还需要记得定期更新各个使用的 extensions 版本号至最新状态以便享受最新的修复改进成果。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Henry_ww

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值