vscode前端常用插件

原创 已于 2022-06-16 15:03:53 修改 · 2.1k 阅读 · 19 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #vscode #编辑器

于 2022-06-14 23:39:11 首次发布
本文介绍了Visual Studio Code（VSCode）中对于前端开发者非常实用的插件，包括LiveServer实现实时预览，RestClient进行HTTP请求，GitLens增强Git管理，CSSpeak查看样式，Quokka.js实时代码错误检查，CodeSnap快速截图，AutoRenameTag同步修改HTML标签，BracketPairColorizer高亮代码块，indent-rainbow彩色缩进，vscode-icons美化文件图标，prettier自动格式化代码，ColorHighlight显示颜色，以及CodeRunner运行程序。这些插件极大地提高了前端开发效率。

vscode前端常用插件

文章目录

1. Live Server

作用：可以自动页面，用于调整布局的时候
在这里插入图片描述

1.1 Live Server的使用

点击编辑器下方的go live
在这里插入图片描述
这时候会打开一个5500的端口， 主要针对html+css页面，不适合具有框架的页面
在这里插入图片描述
ctrl+s 保存页面，可以实时更新，点击下面端口号，取消实时更新
在这里插入图片描述

2. rest client

作用：用于进行轻量级的http请求
在这里插入图片描述
使用方式，创建一个http或者rest后缀名的文件
比如，请求百度
在这里插入图片描述
输入GET或者POST + url
点击图中Send Request 就可以发送请求了
右侧就是请求的返回了

3. GitLens

作用：用于git管理
在这里插入图片描述
使用的时候， 每行代码会显示什么时候做了修改，点击提示框可以出现对比

4. CSS peak

作用：用于查看样式，切换html和css页面
使用：按住ctrl, 鼠标移动到样式名称，就可以看到样式了
在这里插入图片描述

5. Quokka.js

作用：实时提醒代码编写错误，完全不依赖
使用：ctrl+shift+P 输入quokka, 选择new file, 选择js
在这里插入图片描述

6. CodeSnap

作用：在编辑器里直接截图
使用：选中截图代码，右键选择 codesnap
在这里插入图片描述

使用效果
在这里插入图片描述
代码截图效果
请添加图片描述

7. Auto Rename Tag

作用：直接成对自动修改的html标签
使用：直接修改
clg == 输出为console.log
注意：可能会跟其他缩写代码导致冲突，需要禁用其他代码缩写插件

在这里插入图片描述

8. Bracket Pair Colorizer(已内置到vscode内部)

作用：区分代码块，js代码的代码块

在这里插入图片描述
需要在settings里面进行设置
在这里插入图片描述

9. indent-rainbow

作用：用于缩进管理
彩虹色缩进
在这里插入图片描述

10. vscode-icons

作用：用于多种文件后缀名的查找
使用：
在这里插入图片描述

11. prettier

作用：格式化代码

在这里插入图片描述

settings中输入format on save 打钩
在这里插入图片描述
按下保存，就可以自动整理格式了

12. Color Highlight

作用：显示 #FFFFFF #AA2A00 这种标示对应的颜色
在这里插入图片描述
这样就可以显示颜色了
在这里插入图片描述
修改提示方式，选择dot-before
在这里插入图片描述
会显示在前面
在这里插入图片描述

13. Code Runner

作用：用于运行程序
在这里插入图片描述

精选！必备的 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常用插件压缩包
07-13
这个"vscode常用插件压缩包"很可能是包含了多个为提升VSCode功能和效率而设计的扩展插件。接下来，我们将深入探讨VSCode插件系统以及一些常见的插件及其用途。 1. **代码高亮与美化**： - `Prettier`：这是一个...
vscode 前端常用插件
阿闷的博客
10-22 531
1. vscode 简介 vscode是微软开发的的一款代码编辑器，就如官网上说的一样，vscode重新定义（redefined）了代码编辑器。 当前市面上常用的轻型代码编辑器主要是：sublime，notepad++，editplus，atom这几种。 比起notepad++、editplus，vscode集成了许多IDE才具有的功能，比起它们更像一个代码编辑器； 比起sublime，vscode颜值更高，安装配置插件更为方便； 比起atom，vscode启动速度更快，打开各种大文件不卡。 .
VSCode插件开发实战：从零开始打造你的第一个生产力工具
最新发布
小二丶的博客
10-30 1088
本文详细介绍VSCode插件开发全流程，指导开发者创建"CodeHelper"实用工具插件。该插件可实现一键生成时间戳注释、快速插入代码模板和TODO管理三大功能。文章涵盖环境搭建（Node.js/Yeoman）、核心功能实现（命令注册/Webview）、调试测试方法及发布流程，适合具备前端基础的开发者学习。通过实战案例，读者能掌握VSCode扩展开发的核心技术，并了解如何将个人需求转化为生产力工具。
【VScode】前端必备插件（全）
qq_45677671的博客
07-28 8780
vscode 全套前端必备插件，安装好合适的插件，能让你工作事半功倍
VSCode 前端常用插件集合
Yushia的博客
04-06 1万+
Visual Studio Code 是由微软开发的一款免费、跨平台的文本编辑器。由于其卓越的性能和丰富的功能，它很快就受到了大家的喜爱。 但工欲善其事必先利其器，以下是本人为前端开发收集的常用的vscode插件，有需要的话赶紧mark起来吧~
VS code必备前端插件
m0_54210051的博客
01-05 2546
VS code必备前端插件
VScode前端常用插件
代码青春
05-20 321
https://zhuanlan.zhihu.com/p/258762892
VScode前端常用插件推荐
我好菜啊
03-21 2357
前端开发中常用的vscode插件及其使用方法等
vscode的前端常用插件
ranweidaoke的博客
02-19 836
为 PostCSS 提供高亮、格式化、语法检查等功能，适用于 Vue、React 项目。CSS 代码规范检查工具，支持 SCSS、LESS，类似 ESLint 之于 JS。SCSS（SASS）代码智能提示，支持变量、混入（mixin）和继承等功能。结合 Prettier 使用，自动格式化 CSS 代码，提高可读性。自动同步修改 HTML/Vue 代码中的标签对，提高开发效率。自动补全 HTML 标签，减少输入错误，提高开发速度。路径自动补全，适用于导入图片、CSS、JS 文件等。
vscode前端开发常用插件汇总
丑小鸭变黑天鹅的博客
03-04 707
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最实用的插件
JIME_Y的博客
08-02 856
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
VS code 前端常见插件
weixin_40603062的博客
10-26 1391
VS code 前端常见插件
vscode-前端插件
weixin_44748599的博客
04-08 825
文章目录Auto Close TagAuto Rename TagBeautifyBracket Pair ColorizerDebugger for ChromeESLintHTML CSS SupportHTML SnippetsJavaScript(ES6) code snippetsjQuery Code SnippetsMarkdown Preview EnhancedmarkdownlintMaterial Icon Themeopen in browserPath IntellisenseRe
2025前端vscode必备插件(持续更新)
weixin_60053942的博客
01-18 4万+
2025前端vscode必备插件，包含vue、html、css、ai、调试等等，提高你的开发效率
vscode 前端常用必备插件汇总。
热门推荐
前端技术栈
01-14 4万+
持续更新，欢迎推荐好的插件。 1. vscode基础智能能提示类插件 2. vscode美化优化类插件 3. vscode各大框架辅助插件 4. markdown工具类插件
vs code 前端插件
weixin_50587417的博客
06-02 498
vscode 前端插件
前端开发常用的Vscode插件整理（持续更新）
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
12-08 1674
记录前端开发中，常用的vscode插件
VScode前端开发常用插件
include_heqile的博客
04-27 428
Auto Close Tag Auto Rename Tag Beautify Bracket Pair Colorizer ESLint GitLens HTML CSS Support HTML Snippets JavaScript(ES6) code snippets jQuery Code Snippets Markdown Preview Enhanced Material Icon...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值