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


相关推荐

  • 风中有朵雨做的云解析_MySQL comment

    风中有朵雨做的云解析_MySQL comment

    风中有朵雨做的云解析_MySQL comment其实就是告诉mysql解释器，该段命令是否已经结束了，mysql是否可以执行了。默认情况下，delimiter是分号;。在命令行客户端中，如果有一行命令以分号结束，那么回车后，mysql将会执行该命令。DELIMITER$$DROPTRIGGERIFEXISTS`updateegopriceondelete`$$CREATETRIGGER`updateego

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月23日
  • dreamweaver添加表单_dreamweaver网页制作代码

    dreamweaver添加表单_dreamweaver网页制作代码

    dreamweaver添加表单_dreamweaver网页制作代码表格创建列表单元格的合并一、创建列表1，表格标签2，表格的基本结构3，表格的属性1、表格标签table:用来定义表格，整个表格包含在table里，成对出现；tr：用来定义表格中的行，成对出现；td：表格的列标记，也是表格的单元格，成对出现；th：表头元素（特征加粗，居中）；caption：表格的标题标签，好处，标题是定义在表格内部的，跟随表格移动。2、表格的基本结构<table> <tr> <th></th> &

    全栈程序员-站长的头像 全栈程序员-站长
    2022年8月11日
  • IIS  发布  dedecms  网站教程

    IIS  发布  dedecms  网站教程

    IIS  发布  dedecms  网站教程

    全栈程序员-站长的头像 全栈程序员-站长
    2021年9月22日
  • 企业微信通讯录回调密文解析及微信支付回调密文解析异常处理

    企业微信通讯录回调密文解析及微信支付回调密文解析异常处理

    企业微信通讯录回调密文解析及微信支付回调密文解析异常处理企业微信通讯录回调密文解析及微信支付回调密文解析异常处理产生异常表现：javax.crypto.IllegalBlockSizeException:Inputlengthmustbemultipleof16whendecryp原因：因为某些国家的进口管制限制，Java发布的运行环境包中的加解密有一定的限制解决方案：替换jdk和jre中的local_policy.jar，US_export_policy.jar具体目录：1、jre目录/lib/security/policy/

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月18日
  • python聊天室（tkinter写界面，treading,socket实现私聊群聊查看聊天记录，mysql存储数据）

    python聊天室（tkinter写界面，treading,socket实现私聊群聊查看聊天记录，mysql存储数据）

    python聊天室（tkinter写界面，treading,socket实现私聊群聊查看聊天记录，mysql存储数据）一、前言我用的是面向对象写的，把界面功能模块封装成类，然后在客户端创建对象然后进行调用。好处就是方便我们维护代码以及把相应的信息封装起来，每一个实例都是各不相同的。所有的界面按钮处理事件都在客户端，在创建界面对象是会把客户端的处理事件函数作为创建对象的参数，之后再按钮上绑定这个函数，当点击按钮时便会回调函数二、登录界面实现登录界面模块chat_login_panel.pyfromtkinterimport*#导入模块，用户创建GUI界面#登陆界面类classLoginPane

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月27日
  • 导出Excel在GridView1.RenderControl报错

    导出Excel在GridView1.RenderControl报错

    导出Excel在GridView1.RenderControl报错导出Excel在GridView1.RenderControl报错(2008-11-2412:24:42)标签：导出excel问题 it  今天做Gridview导出Excel时，出现了以前没有的问题，我以前做过很多次导出Excel的工作，知道出现报错类型“GridView”的控件“GridView1”必须放在具有runat

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

发表回复

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

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