前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vscode前端常用插件

vscode前端常用插件

作者头像
全栈程序员站长
发布2022-09-17 10:06:00
7800
发布2022-09-17 10:06:00
举报

大家好,又见面了,我是你们的朋友全栈君。

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

作用:用于运行程序

在这里插入图片描述
在这里插入图片描述

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/164341.html原文链接:https://javaforall.cn

本文参与?腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客?前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与?腾讯云自媒体分享计划? ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • vscode前端常用插件
    • 文章目录
      • 1. Live Server
        • 1.1 Live Server的使用
      • 2. rest client
        • 3. GitLens
          • 4. CSS peak
            • 5. Quokka.js
              • 6. CodeSnap
                • 7. Auto Rename Tag
                  • 8. Bracket Pair Colorizer(已内置到vscode内部)
                    • 9. indent-rainbow
                      • 10. vscode-icons
                        • 11. prettier
                          • 12. Color Highlight
                            • 13. Code Runner
                            领券
                            问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
                            http://www.vxiaotou.com