vscode前端常用插件

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • tcp洪水攻击_udp编程socket

    tcp洪水攻击_udp编程socket#include/**UDP洪水攻击:不停的向目的主机发送UDP包,让目的主机接收端口拥塞,以达到攻击的目的**/#defineMAXCHILD2#defineK1024#defineDATUML1*KstaticintPROTO_UDP=-1;//UDP协议类型staticunsignedlongdest=0;//目的地址,32位二进制staticintdest_po…

  • 2018以太坊编程语言solidity最佳IDE

    2018以太坊编程语言solidity最佳IDE

  • 作为测试负责人如何规范测试团队建设_测试人员如何开展测试工作

    作为测试负责人如何规范测试团队建设_测试人员如何开展测试工作前言:今天是2021年11月17日,我入职新公司工作的第20天,工作也确实比较忙,准确的来说在公司大家都忙,我基本上都是早上7点半起床,晚上12点到家,睡午觉的时间忙中偷闲更新下博客!作为测试负责人如何规范测试团队?一、我的提问二、你会发现存在的问题1、流程不规范2、缺乏沟通3、没有共享文档4、没有输出三、如何做好流程规范1、测试进度及计划面板2、技术评审3、提测规范4、测试用例评审四、如何做好流程规范1、测试进度及计划面板一、我的提问当你来到一个项目不规范的技术团队,你会怎么处理呢?二、你会发现存

    2022年10月24日
  • pycharm设置作者和时间[通俗易懂]

    pycharm设置作者和时间[通俗易懂]pycharm设置作者和时间,每次新建代码时,字段在代码开头新增这几行内容。示例:#-*-coding:utf-8-*-#@Author:作者名#@Time:${DATE}${TIME}

  • python和java哪个值得学-Python和Java学哪个好?大家是怎么选的

    python和java哪个值得学-Python和Java学哪个好?大家是怎么选的Python和Java学哪个好?很多开始学习编程的同学就很难选择,过去几年选择Java无话可说,近年来大家都开始关注人工智能这一方向,都觉得人工智能是未来的趋势,选择Java就会和人工智能失之交臂,确实,但大家要知道,想从事人工智能方面的工作,学的可不只有Python,更需要你会各种复杂的计算,数据分析,推演,超强的思维等等。Java是一门成熟发展20多年编程语言,开发使用率极高,目前java市场…

  • bc04蓝牙模块_戴尔蓝牙鼠标怎么打开

    bc04蓝牙模块_戴尔蓝牙鼠标怎么打开一、简介BT401支持双模蓝牙,所以可以很轻松的支持蓝牙BLE。因为支持了BLE,所有就支持了BLE的HID。也就是蓝牙的键盘、鼠标设备注意,这里BLE的HID是可以回连手机的2.1串口指令和测试的效果1、AT+HD123456789aBcS其中:AT+HD是命令,123456789aBcS是需要发送的数据2、其他所有的指令参考标准的即可,包括设置波…

发表回复

您的电子邮箱地址不会被公开。

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