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


相关推荐

  • SpringBoot集成Redis并实现主从架构「建议收藏」

    SpringBoot集成Redis并实现主从架构「建议收藏」

    SpringBoot集成Redis并实现主从架构「建议收藏」hello，你好呀，我是灰小猿，一个超会写bug的程序猿！今天这篇文章来和大家分享一下在springboot中如何集成redis，并实现主从架构，进行数据的简单存储。我的Redis是部署在Windows系统下面的，所以在这里附上Redis在Windows环境下的安装地址和安装说明。一、Windows环境下安装Redis首先去官网下载Redis的安装包，官方下载地址：https://github.com/tporadowski/redis/releases在其中选择当前版本即可。下载之后解压

    全栈程序员-站长的头像 全栈程序员-站长
    2022年9月16日
    5
  • 一文弄懂什么是Precision，Recall，F1score，以及accuracy[通俗易懂]

    一文弄懂什么是Precision，Recall，F1score，以及accuracy[通俗易懂]

    一文弄懂什么是Precision，Recall，F1score，以及accuracy[通俗易懂]近期在做实验的时候一直出现Precision，Recall，F1score，以及accuracy这几个概念，为了防止混淆，在这里写下学习笔记，方便以后复习。以一个二分类问题为例，样本有正负两个类别。那么模型预测的结果和真实标签的组合就有4种：TP，FP，FN，TN，如下图所示。TP实际为正样本你预测为正样本，FN实际为正样本你预测为负样本，FP实际为负样本你预测为正样本，TN实际为负样本…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年10月14日
    1
  • Vue:router的beforeEach是什么「建议收藏」

    Vue:router的beforeEach是什么「建议收藏」

    Vue:router的beforeEach是什么「建议收藏」来自：https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#全局守卫正如其名，vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的,单个路由独享的,或者组件级的。记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察$route对象来应对这…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月17日
    27
  • Latex角标(subscript/superscript)

    Latex角标(subscript/superscript)

    Latex角标(subscript/superscript)

    全栈程序员-站长的头像 全栈程序员-站长
    2021年9月12日
    274
  • django常用命令_java命令行参数的使用方法

    django常用命令_java命令行参数的使用方法

    django常用命令_java命令行参数的使用方法前言我们掌握了如何在命令提示符或PyCharm下创建Django项目和项目应用，无论是创建项目还是创建项目应用，都需要输入相关的指令才能得以实现，这些都是Django内置的操作指令。在PyChar

    全栈程序员-站长的头像 全栈程序员-站长
    2022年7月28日
    7
  • 2021 Pycharm汉化教程，两种方法，带图讲解，简洁明了

    2021 Pycharm汉化教程，两种方法，带图讲解，简洁明了

    2021 Pycharm汉化教程，两种方法，带图讲解，简洁明了方法一：软件内安装汉化包第一步：打开设置①点击‘File’——Mac系统settings/preferrnces②点击‘Settings’第二步：安装官网自带的中文插件①点击‘Plugins’②点击‘MarKetplace’③输入‘chinese’④选中‘Chinese(Sinplified)LanguagePack/中文语言包’⑤点击‘Install’等插件下载好之后，会显示‘RestartIDE’，点击‘RestartID

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月25日
    45

发表回复

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

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