vscode前端常用插件

已于 2022-06-16 15:03:53 修改
阅读量2k 收藏 19
点赞数 5
分类专栏： vscode 文章标签： 前端 vscode 编辑器
于 2022-06-14 23:39:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/myt2000/article/details/125287449
版权

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

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

myt2000
关注
专栏目录
VScode前端常用插件
代码青春
05-20 187
https://zhuanlan.zhihu.com/p/258762892
精选！必备的 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 前端常用必备插件汇总。
热门推荐
前端技术栈
01-14 4万+
持续更新，欢迎推荐好的插件。 1. vscode基础智能能提示类插件 2. vscode美化优化类插件 3. vscode各大框架辅助插件 4. markdown工具类插件
VSCODE前端VUE开发推荐插件和配置
最新发布
modaner的博客
10-04 340
12.Bracket Pair Colorizer（已内置）1.CHinese简体中文语言包。快捷键和黑白主题、字体。
vscode 前端常用插件
阿闷的博客
10-22 395
1. vscode 简介 vscode是微软开发的的一款代码编辑器，就如官网上说的一样，vscode重新定义（redefined）了代码编辑器。 当前市面上常用的轻型代码编辑器主要是：sublime，notepad++，editplus，atom这几种。 比起notepad++、editplus，vscode集成了许多IDE才具有的功能，比起它们更像一个代码编辑器； 比起sublime，vscode颜值更高，安装配置插件更为方便； 比起atom，vscode启动速度更快，打开各种大文件不卡。 .
【VScode】前端必备插件（全）
qq_45677671的博客
07-28 7985
vscode 全套前端必备插件，安装好合适的插件，能让你工作事半功倍
VSCode 前端常用插件集合
Yushia的博客
04-06 1万+
Visual Studio Code 是由微软开发的一款免费、跨平台的文本编辑器。由于其卓越的性能和丰富的功能，它很快就受到了大家的喜爱。 但工欲善其事必先利其器，以下是本人为前端开发收集的常用的vscode插件，有需要的话赶紧mark起来吧~
VS code 前端常见插件
weixin_40603062的博客
10-26 1257
VS code 前端常见插件
vscode-前端插件
weixin_44748599的博客
04-08 682
文章目录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_70275087的博客
05-04 2376
[配置教程 戳这里](() 4.Bracket Pair Colorizer (必备) 给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色 5.Debugger for Chrome (推荐) 映射vscode上的断点到chrome上，方便调试 [调试方法戳这](() 6.ESLint (推荐) js语法纠错，可以自定义配置，不过配置较为复杂，建议使用网上一些广泛使用的eslint配置，日后我也会专门针对eslint配置写一篇文章。 7.GitLens(使用git的必备)
vscode常用插件压缩包
07-13
这个"vscode常用插件压缩包"很可能是包含了多个为提升VSCode功能和效率而设计的扩展插件。接下来，我们将深入探讨VSCode插件系统以及一些常见的插件及其用途。 1. **代码高亮与美化**： - `Prettier`：这是一个...
vscode常用插件整理汇总
10-15
本文将详细讨论17个VSCode插件，这些插件能够帮助开发者提高编码效率，优化代码质量，并增强编辑器的用户体验。 1. Auto Close Tag：这个插件可以自动为HTML代码中的标签添加闭合标签，减少手动输入的错误和工作量...
前端VSCode常用插件-以及常用技巧
qq_47462646的博客
08-04 1766
刚才的插件是可以预览我们的页面，但是改完代码，浏览器必须要重新刷新，比较麻烦，因此推荐安装live sever这个插件，修改完代码，自动更新浏览器预览效果，爽歪歪~~刚开始学习前端，基本页面很少，就可以左编辑器，右浏览器，这样编写完毕代码，保存完毕后，浏览器自动更新了。我们写的less不能直接引入到HTML文件中，通过这个插件可以自动帮我们生成css文件。VSCode下载完毕是英文版的，先安装这个插件，改为中文版。编写完代码，需要浏览器预览，就可以安装这个插件。是的没有看错，这个插件的名字就是
前端开发常用的Vscode插件整理（持续更新）
Hei, Welcome To vickie's Blog，Good Good Study, Day Day Up ~
12-08 1282
记录前端开发中，常用的vscode插件
VScode前端开发常用插件
include_heqile的博客
04-27 371
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...
vscode最实用的插件
JIME_Y的博客
08-02 723
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_44809439的博客
05-30 529
vscode插件（前端）欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用M
vs code 前端插件
weixin_50587417的博客
06-02 315
vscode 前端插件
Vscode前端插件
m0_54069693的博客
08-01 273
选择自己想要的浏览器运行代码:在代码页面鼠标右键选择“Open In Other Browsers"或通过快捷键“Shift+ Alt+ B”在浏览器运行代码。安装完就能在代码页面鼠标右键选择“OpenInDefault Browser”或通过快捷键“Alt+ B”在浏览器运行代码。修改同步/自动闭合/完成提示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值