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


相关推荐

  • Pytest（2）使用和调用方法

    Pytest（2）使用和调用方法

    Pytest（2）使用和调用方法Pytest执行用例规则Pytest在命令行中支持多种方式来运行和选择测试用例1.对某个目录下所有的用例pytest2.对模块中进行测试pytesttest_mod.py3.对文件夹进行

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月30日
    3
  • HTTP500内部服务器错误_服务器内部错误500

    HTTP500内部服务器错误_服务器内部错误500

    HTTP500内部服务器错误_服务器内部错误500解决运行.asp出现“http500内部服务器错误”及“数据库连接出错，请检查Conn.asp文件中的数据库参数设置。”问题经过N久的尝试，终于解决了winXP不能运行.asp的问题了…..1、运行.asp出现“http500内部服务器错误”出现这个问题的主要原因是因为MSDTC启动失败，解决方法：[1]：检查你的DTC服务（全…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年8月11日
    4
  • java中static关键字的作用_java中static关键字的作用

    java中static关键字的作用_java中static关键字的作用

    java中static关键字的作用_java中static关键字的作用java中static关键字主要有两种作用：第一：为某特定数据类型或对象分配单一的存储空间，而与创建对象的个数无关。第二，实现某个方法或属性与类而不是对象关联在一起简单来说，在Java语言中，static主要有5中使用情况：成员变量、成员方法、代码块，内部类和静态导包。基本用法：static修饰成员变量：该成员变量属于类变量，可以通过ClassName.attributeName直接引用，而不…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月7日
    17
  • HDU1160(LIS)

    HDU1160(LIS)

    HDU1160(LIS)

    全栈程序员-站长的头像 全栈程序员-站长
    2022年1月9日
    38
  • java mqtt服务器搭建「建议收藏」

    java mqtt服务器搭建「建议收藏」

    java mqtt服务器搭建「建议收藏」MQTT服务器搭建和客户端代码编写(java实现)服务器关于linux系统，可以在阿里云购买云服务器或者利用虚拟机安装CentOs系统。我用的就是阿里云的云服务器，比较方便吧安装Emqx服务器安装必要的依赖：$sudoyuminstall-yyum-utilsdevice-mapper-persistent-datalvm2设置稳定的仓库，比如CentOs7的例子：$sudoyum-config-manager–add-repohttps://repos.emqx.io

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月12日
    26
  • vue-router路由懒加载_vue数据懒加载

    vue-router路由懒加载_vue数据懒加载

    vue-router路由懒加载_vue数据懒加载什么是路由懒加载官方的解释：当打包构建应用时，JavaScript包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更

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

发表回复

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

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