1. 全栈程序员必看首页

vscode前端常用插件

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

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


相关推荐

  • CriticalSection_introducing critical thinking

    CriticalSection_introducing critical thinking

    CriticalSection_introducing critical thinkingEnterCriticalSection

    全栈程序员-站长的头像 全栈程序员-站长
    2022年9月20日
    3
  • JS 暂时性死区

    JS 暂时性死区

    JS 暂时性死区JS暂时性死区ES6暂时性死区引用ES6暂时性死区只要块级作用域内存在let命令，它所声明的变量就“绑定”（binding）这个区域，不再受外部的影响。vartmp=123;if(true){tmp=’abc’;//ReferenceErrorlettmp;}上面代码中，存在全局变量tmp，但是块级作用域内let又声明了一个局部变量tmp，导致后…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月30日
    25
  • Pycharm Pro 2021.12.13激活【2021.10最新】「建议收藏」 idea

    Pycharm Pro 2021.12.13激活【2021.10最新】「建议收藏」

    (Pycharm Pro 2021.12.13激活)2021最新分享一个能用的的激活码出来，希望能帮到需要激活的朋友。目前这个是能用的，但是用的人多了之后也会失效，会不定时更新的，大家持续关注此网站~https://javaforall.net/100143.htmlIntelliJ2021最新激活注册码，破解教程可免费永久激活，亲测有效，上面是详细链接哦~00…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年3月30日
    49
  • 前端 — HTML

    前端 — HTML

    前端 — HTML1.HTML结构1.1HTML文件基本结构<html><head><title>第一个html程序</title></head><body>helloworld!</body></html>html标签是整个html文件的根标签(最顶层标签)head标签中写页面的属性.body标签中写的是页面上显示的

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月5日
    38
  • rpm 卸载软件_linux删除rpm卸载密码

    rpm 卸载软件_linux删除rpm卸载密码

    rpm 卸载软件_linux删除rpm卸载密码查看所有的java安装包rpm-qa|grepjava卸载安装包，忽略依赖rpm-e–nodepsopenjdkxxx

    全栈程序员-站长的头像 全栈程序员-站长
    2022年9月22日
    3
  • Scripting.FileSystemObject对象不能创建的原因「建议收藏」

    Scripting.FileSystemObject对象不能创建的原因「建议收藏」

    Scripting.FileSystemObject对象不能创建的原因「建议收藏」www.u8686.com-信息发布平台Scripting.FileSystemObject对象不能创建的原因        可能是是由于FSO没有注册，或是注册后由于使用专杀工具等提供的解除注册功能。  　　解决方法：Windows 2000、XP可使用regsvr32 scrrun.dll命令注册。Windows 98使用c:/windows/system/re

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月14日
    19

发表回复

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

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