1. 全栈程序员必看首页

vscode前端常用插件

全栈程序员-站长 • • 未分类 • 阅读 8

vscode前端常用插件vscode前端差用插件

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

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.net/164341.html原文链接：https://javaforall.net

赞 (0)
全栈程序员-站长的头像全栈程序员-站长
0 0


相关推荐

  • Google地图路线规划

    Google地图路线规划

    Google地图路线规划

    全栈程序员-站长的头像 全栈程序员-站长
    2022年2月22日
    53
  • 二代身份证号码验证器[超简单]

    二代身份证号码验证器[超简单]

    二代身份证号码验证器[超简单]一代身份证号码是十五位，2013年1月1日开始，咱们中国全面停止使用一代身份证了。二代身份证号码：1-6位：表示行政区划的代码。 1、2位，所在省（直辖市，自治区）代码； 3、4位，所在地级市（自治州）代码； 5、6位，所在区（县，自治县，县级市）的代码； 7-14位：表示出生年、月、日 15-16位：所在地派出所代码 17位：性别。奇数（1、3、5、7、9）男性，偶数（2、4、6、8、0）女性 18位：校验位，存在十一个值：0,1,2,3,4,5,6,7,8,9,X，..

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月27日
    53
  • vue-router 2.0 常用基础知识点之router.push()[通俗易懂]

    vue-router 2.0 常用基础知识点之router.push()[通俗易懂]

    vue-router 2.0 常用基础知识点之router.push()[通俗易懂]除了使用创建a标签来定义导航链接，我们还可以借助router的实例方法，通过编写代码来实现。router.push(location)想要导航到不同的URL，则使用router.push方法。这个方法会向history栈添加一个新的记录，

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月11日
    13
  • freemarker自己定义标签（二）

    freemarker自己定义标签（二）

    freemarker自己定义标签（二）

    全栈程序员-站长的头像 全栈程序员-站长
    2022年1月21日
    36
  • layui弹出框php,layui弹出层怎么使用

    layui弹出框php,layui弹出层怎么使用

    layui弹出框php,layui弹出层怎么使用layui弹出层的使用方法：首先引入jQuery1.8以上的任意版本；然后引入laery.js；最后通过“functionshow(){vara=layer.open({…});}”方式使用laery.open弹出层即可。本教程操作环境：Windows7系统、layui2.4&&jquery2.2.1版，DellG3电脑。layer在layui体系中的位置比较特…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月9日
    31
  • js动画和css动画_js文件怎么引入html

    js动画和css动画_js文件怎么引入html

    js动画和css动画_js文件怎么引入html在做页面中，多数情况下都会遇到页面上做动画效果，我们大部分做动画的时候都是使用框架来做(比如jquery)，这里我介绍下如何让通过原生的js来实现像框架一样的动画效果！1、匀速动画效果说明：匀速动画就是动画的效果从开始到结束每次执行的速度都是一致的匀速动画html,body{margin:0;padding:0;}div{margin:0;padding:0;}.odiv{width:200px;…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月15日
    0

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号