2021-前端-VsCode插件

2023-05-16

此乃吾习前端,VsCode之插件,个人所装,喜着自拿,不足之处还望海涵,多加批评。

1.Auto Close Tag——自动闭合尾部的标签
在这里插入图片描述

2.Atuo Rename Tag——修改 html 标签

自动帮你完成头部和尾部闭合标签的同步修改

在这里插入图片描述

3.Bracket Pair Colorizer——用于颜色匹配括号

在这里插入图片描述
在这里插入图片描述

4.Chinese (Simplified)Language Pack for Visual Studio Code——汉化VsCode在这里插入图片描述

5.Code Spell Checker——代码拼写检查器
一个与camelCase代码配合良好的基本拼写检查程序。
此拼写检查程序的目标是帮助捕获常见的拼写错误,同时保持误报数量较低。
在这里插入图片描述
6.CodeIf——变量取名神器
在这里插入图片描述
在这里插入图片描述

7.CSS Peek——
查看 css 定义
在这里插入图片描述

8.Easy LESS——less动态样式语言,极大的提高了我们书写css样式的效率在这里插入图片描述
在这里插入图片描述

9.Error Lens —— 代码错误立即提示

有时编码过于认真,可能看不到 vscode 报出的错误,或者有时候 vscode 不能提示代码中潜在的错误。这个插件可以帮助你

在这里插入图片描述
10. ESLint

ESLint 是一个语法规则和代码风格的检查工具,可以用来保证写出语法正确、风格统一的代码。

不管是多人合作还是个人项目,代码规范是很重要的。这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。这所谓工欲善其事,必先利其器,推荐 ESLint+vscode 来写 vue,有种飞一般的感觉。

每次保存,vscode就能标红不符合ESLint规则的地方,同时还会做一些简单的自我修正。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

11.gitlens —— 一款好用的vscode插件

gitlens插件可以直接在光标处显示代码编写人以及时间;方便共同开发时候git做版本控制时候的相关代码管理。

在这里插入图片描述
在这里插入图片描述

12.Guides——显示代码对齐辅助线,很好用

在这里插入图片描述
在这里插入图片描述

  1. Highlight Matching Tag —— 高亮匹配标签 在这里插入图片描述
    .-在这里插入图片描述

  2. HTML CSS Support —— CSS 类名感知
    在这里插入图片描述
    这货和下边那货不用说了,看这安装量也得装。自行体会……

15.HTML Snippets——完整的HTML代码提示,包括HTML5

在这里插入图片描述

在这里插入图片描述

16.HTMLHint——html代码检测,支持html5

在这里插入图片描述
17.Debugger for Chrome——从VS Code调试在Google Chrome中运行的JavaScript代码。
用于在Google Chrome浏览器或支持Chrome DevTools协议的其他目标中调试JavaScript代码的VS Code扩展。

在这里插入图片描述
18.Image Preview——预览图片

在这里插入图片描述
在这里插入图片描述

19.Import Cost——对引入的计算大小

在这里插入图片描述
在这里插入图片描述

20.Indent-Rainbow——用四种不同颜色交替着色文本前面的缩进
在这里插入图片描述
在这里插入图片描述

21.JavaScript(ES6) code snippets (必备)——

ES6语法智能提示,以及快速输入,不仅仅支持.js,还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间
在这里插入图片描述
22.jQuery Code Snippets——jQuery代码提示

超过130个用于JavaScript代码的jQuery代码片段。
只需键入字母’jq’即可获得所有可用jQuery代码片段的列表。

在这里插入图片描述
在这里插入图片描述

23.Live Server——本地服务器
在这里插入图片描述
24.Npm Intellisense——用于在 import 语句中自动填充 npm 模块
require 时的包提示(最新版的vscode已经集成此功能)

在这里插入图片描述
25.One Dark Pro —— 主题插件(在用😎)
在这里插入图片描述
26.open in browser (必备)——vscode不像IDE一样能够直接在浏览器中打开html,而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件,支持自定义打开指定的浏览器,包括:Firefox,Chrome,Opera,IE以及Safari
在这里插入图片描述
设置默认浏览器
在这里插入图片描述

27.Path Intellisense——智能路径提示

在这里插入图片描述
28.Prettier-Code formatter / Beautify —— 两个都是代码格式化插件,看自己选择

  • beautify:格式化代码工具
    美化javascript,JSON,CSS,Sass,和HTML在Visual Studio代码。

在这里插入图片描述

  • Beautify-使用方法:
    在这里插入图片描述

在这里插入图片描述
29. Project Manager —— 多个项目之间快速切换

安装这个插件之后会在你的左栏中新建一个图标
在这里插入图片描述
在这里插入图片描述

30.TODO Highlight —— 代办事项高亮,配合 Todo Tree 使用
在这里插入图片描述
31. Todo Tree —— 代办事项树

在这里插入图片描述
32.Vetur (推荐)(vue必备)——
Vue多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,debugger。vscode官方钦定Vue插件,Vue开发者必备。
在这里插入图片描述
33. Vue 3 Snippets —— Vue 智能感知

在这里插入图片描述
34.Visual Studio IntelliCode —— .辅助开发
说实话,我也没看懂啥意思,但就这安装量,并且还是微软官方推出的。装上之后确实好用了。
在这里插入图片描述
35.vscode-icons
显示Visual Studio代码的图标,目前该插件已被vscode内部支持:“文件” -> “首选项” -> “文件图标主题”
在这里插入图片描述
在这里插入图片描述

就先到这里了,后面有好玩的东西的话会更新上去,大佬多指点😁

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

2021-前端-VsCode插件 的相关文章

  • VScode使用PlatformIO IDE时PIO Home一直loading的问题

    近来刚接触 Arduino 想做个小项目 网上都都说 Arduino 自带的IDE不人性化 推荐的是用 VScode搭配 PlatformIO 但是这个插件非常不稳定 各种坑 有的时候安装 Library 点击了 Add 以后会一直转 等半
  • vscode go mod报错(萌新)

    出现如下报错信息 gopls was not able to find modules in your workspace When outside of GOPATH gopls needs to know which modules y
  • 在 vscode 上刷力扣 Leetcode 可以这样来

    背景 神奇的算法网站 LeetCode 值得驻留 网页版似乎不太方便 作为习惯于在编译器上敲代码的你 如何 vscode 上优雅的刷力扣 Leetcode 在本地配置 记录下来方便备查 环境前置 电脑具备 NodeJs环境 第一步 安装插件
  • 【VSCode】推荐一款Microsoft Visual Studio Code能在编辑器内智能补全代码的插件 - Tabnine AI

    Tabnine AI Autocomplete for Javascript Python Typescript PHP Go Java Ruby more Tabnine是一个AI代码补全插件 支持JavaScript Python Ja
  • 解决VSCode中查看ESP32日志乱码

    问题现象 在VSCode的Monitor中查看ESP32输出的日志乱码 如下图 原因 在VSCode中IDF默认的Monitor串口波特率为460800 然而ESP32输出Log的串口波特率默认为115200 因串口波特率不匹配导致Moni
  • Jupyter Error “bad file descriptor“ in VSCode

    Jupyter Error bad file descriptor in VSCode 直接跑这一行 pip install upgrade force reinstall no cache dir jupyter
  • 8种常见的 代码 编译 软件 !!

    VS Code Source Insight Vim UltraEdit eclipse Understand Atom Sublime Text 接下来详细为大家讲解一下它们各自的用途 目录 1 VS Code 2 Source Insi
  • VSCode连接WSL2及VMware,WSL2安装GUI应用

    一 VScode 连接WSL2 参考文章 巨硬官方文档 知乎大佬教程 知乎大佬教程2 1 开启WSL2 支持 使用管理员权限的 Shell 才能安装 WSL2 按 Win X 找到 Windows PowerShell 管理员 并复制执行命
  • Win10环境下配置VScode远程开发ssh-remote(免密登录)

    问题背景 在开发或者做实验的过程中 我们经常会用到远程服务器或者Github的项目 而我服务器上的项目只能在Jupyter Notebook上编写 或许可以在其他IDE上写 但我不知道 而我们喜欢用的IDE比如Pycharm 轻量级的VSc
  • Ubuntu20.04中VSCode配置C++以及分文件编写配置

    网上搜索了很多文章 一直显示找不到自定义的头文件 今天总算捣鼓出来了 参考文章 https www cnblogs com icmzn p 16244665 html https blog csdn net qq 39048131 arti
  • 在命令行运行 VSCode(macOS)

    在命令行运行 VSCode macOS系统 Windows 版 VSCode 的安装脚本带着一个是否把 Code 加入 PATH 的选项 而 macOS版却没有 有的人想到给 VSCode 做一个符号链接加入 PATH 中 但实际上这样做会
  • Verilog中if- else if语句和case语句用法:

    一 if语句 1 两种情况 if 条件语句 begin end else begin end 2 多种情况 if 条件语句 begin end else if 条件语句 begin end else if 条件语句 begin end el
  • VScode配置文档

    vscode配置 常用插件 View In Browser 预览页面 ctrl F1 vscode icons 侧栏的图标 对于一个有视觉强迫症的人是必须要的 HTML Snippets 支持HTML5的标签提示 JS CSS HTML F
  • TensorFlow.js预测鸢尾花种类

    源码连接 TensorFlow js实现鸢尾花种类预测 机器学习文档类资源 CSDN下载 一 加载IRIS数据集 创建index html入口文件 跳转到script主文件 在script js文件夹中利用预先准备好的脚本生成鸢尾花数据集
  • vscode配置clangd和clang-format

    vscode安装和配置 如何安装和配置vscode以搭建c 开发环境 可以查看我的另一篇博客 Windows上最轻量的vscode C 开发环境搭建 在这篇博客中 详细介绍了如何安装vscode以及应该安装哪些插件 这里不再赘述 vscod
  • settings.json是什么?VS Code的“用户”和“工作区”

    setting json settings json是VS Code众多配置文件中的一个 可以对VS Code进行页面风格 代码格式 字体颜色大小等的编辑设置 比如可能编辑器默认的一个tab为4个空格 用户可以在setting json里面
  • 3WebGL shader准备工具

    VSCode安装 VSCode 全称 Visual Studio Code 是一款由微软开发且跨平台的免费源代码编辑器 该软件支持语法高亮 代码自动补全 又称 IntelliSense 代码重构 查看定义功能 并且内置了命令行工具和 Git
  • VSCode『SSH』连接服务器『GUI界面』传输

    前言 最近需要使用实验室的服务器训练带有 GUI 画面的 AI 算法模型 pygame 但是我是使用 SSH 连接的 不能很好的显示模型训练的效果画面 所以下面将会讲解如何实现 SSH 连接传输 Linux GUI 画面的 注 我们没有采用
  • vscode调试mit6s081Lab

    环境 mit6 s081的实验环境 gdb multiarch 用于gdb调试 vscode调试实质上就是提供个图形化页面 底层还是这个 安装 gdb multiarch sudo apt get install gdb multiarch
  • VSCode中如何查看EDI报文?

    VSCode是开发人员常用的一款软件 为了降低EDI报文的阅读门槛 知行的开发人员设计了EDI插件 可以在VSCode中下载使用 如何打开一个EDI报文 VSCode EDI插件介绍 EDI插件下载流程 进入VSCode 打开Extensi

随机推荐

  • 虚拟机可以ping通IP,但是ping通不了域名

    今天用VMware安装了一个centos7系统 xff0c 正常安装上去 xff0c 编辑了ifcfg ens33网卡信息 在物理机上ping虚拟机地址和百度的域名 xff0c 测试可以ping通 又去虚拟机上ping一下百度域名www b
  • 笔记(STM32篇)day12——USART串口介绍、串口初始化结构体

    目录 一 USART介绍 1 USART简介 2 USART功能框图 二 串口初始化结构体 参考 一 USART介绍 1 USART简介 通用同步异步收发器 Universal Synchronous Asynchronous Receiv
  • 京东Java后台开发岗社招面试经验分享,4面的面经!

    前言 正好最近我一朋友面试京东回来 xff0c 和我聊了他的面试经过 xff0c 最后经过四面成功斩获offer xff01 下面我把他所得经验毫无保留的分享给大家 xff01 希望对正准备面试小伙伴们能有所帮助 xff01 xff01 x
  • 关于系统架构

    系统架构 1 系统架构包括什么形式2 C S架构2 1 C S架构的软件或者系统2 2 C S架构的特点2 3 C S架构的优缺点 3 B S架构3 1 优缺点3 2 B S结构的系统的通信原理关于域名 4 WEB服务器软件4 1 WEB服
  • Jmeter性能测试(10)--参数化

    参数化是自动化测试脚本的一种常用技巧 简单来说 xff0c 参数化的一般用法就是将脚本中的某些输入使用参数来代替 xff0c 在脚本运行时指定参数的取值范围和规则 xff1b 这样 xff0c 脚本在运行时就可以根据需要选取不同的参数值作为
  • AT指令1

    我之前认为手机号码与SIM卡是一一对应的 xff0c 后来想想不对 xff0c 因为有换卡不换号的情况啊 xff0c 所以SIM卡应该只是一个电话号码的储存介质 xff0c 而与SIM卡一一对应的是另一个编码 IMSI xff08 国际移动
  • Keil5 的常见错误

    1 C Source led c 22 warning 69 D integer conversion resulted in truncation 这个是由于实际值的范围超过了定义值的范围 2 C Source main c 15 err
  • c语言实现FTP

    这个实现了客户端和服务端文件的相互传输 xff08 只在本机上运行过 xff09 xff0c 如果是要两台计算机相互传数据要改ip 给大家看一下实现过程 xff08 exe文件要先开服务端的 xff09 输入1 直接将快捷方式拖拽上去就有绝
  • 2021 => 手把手搭建dhcp服务(详细)

    架构解析 dhcp服务器配置 配置实验环境 关闭VMware的dhcp服务 给虚拟机添加网卡为VMnet1 安装与配置dhcp服务 给新添的网络配置IP 配置dhcp服务 在真实的主机系统上查看dhcp配置 为真实主机系统分配固定的IP 修
  • 2021 => 手把手教你NFS部署(实用)

    NFS服务 原理 xff1a 供文件共享服务 为Web Server 配置集群中的后端存储 支持多节点同时挂载以及并发送与写入 架构解析 这是一张大型网站高并发架构图 xff0c 我们只需注意图中圈红的地方 建立NFS文件系统本质就是用来进
  • 2021最新阿里云部署k8s集群(篇1 购买服务器)

    实验kubernetes版本 xff1a v1 22 1 x1f947 阿里云地址 阿里云开发者社区 阿里云官网开发者社区 云计算社区 注意 xff1a 做此实验先准备100RM xff0c 本实验为抢占实例 CentOs版本 xff1a
  • 七层负载均衡HAproxy生产环境LVS+Keepalived+HAproxy(三)

    LB Haproxy Nginx x1f4af 解析 xff1a 七层负载均衡器 xff0c 为与七层模型上的应用层 xff0c 通过URL地址 xff08 应用层 xff09 进行负载均衡 优点 xff1a 详细地址 xff0c 数据精准
  • Kubeadm-K8s1.20-高可用部署-详细-生产环境(四)

    文章目录 kubeadm部署高可用集群注意事项k8s部署 二进制与高可用的区别 一 环境配置1 所有节点修改主机名2 所有节点进行域名解析3 所有节点关闭相关应用3 1 防火墙关闭3 2 dnsmasq关闭3 3 NetworkManage
  • k8s Pod简介与探针实现零宕机发布

    目录 一 Pod简介 Pod的退出流程 1 什么是Pod 2 定义一个Pod 二 探针 零宕机发布 1 Pod探针 2 Pod探针的检测方式 3 探针检查参数配置 4 startupProbe 5 liveness 6 readiness
  • VmWare克隆 CentOS7

    问题1 xff1a 无法启动图形化界面 背景 xff1a 搭建 Zookeeper 集群需要多台服务器 xff0c 于是参考 VmWare 克隆 CentOS7 xff0c 但是克隆后启动无法进入 图形化界面 报错现象 xff1a 分析过程
  • 【Opencv】CV_* was not declared in this scope 的部分解决方法

    问题描述及原因分析 Opencv在更新到 新版本 后 xff0c 在运行有些 旧版本 的代码时会出现此类情况 解决方案 xff1a error CV AA was not declared in this scope 在头文件中添加 inc
  • Jmeter性能测试(11)--JDBC Request之Query Type

    工作中遇到这样一个问题 xff1a 需要准备10W条测试数据 xff0c 利用jmeter中的JDBC Request向数据库中批量插入这些数据 xff08 只要主键不重复就可以 xff0c 利用函数助手中的Random将主键的ID末尾五位
  • UE4C++UI平滑曲线图绘制

    UE4C 43 43 UI平滑曲线图绘制 前言 UE4的曲线在UMG上面绘制的时候总是和麻烦的 xff0c 这里我们采用UE4曲线FRichCurve中的绘制方法 xff0c 传入对应的Key值 xff0c 然后差值获取俩个点之间的数据 x
  • 从底层了解IO操作,文件描述符和文件流指针

    目录 一 库函数 二 系统调用 三 文件流指针和文件描述符 我们最早接触IO操作函数应该就是c语言了吧 xff0c 所有今天我们从c语言中的函数出发 xff0c 逐层剥离 xff0c 回归到IO操作的本质 一 库函数 1 fopen FIL
  • 2021-前端-VsCode插件

    此乃吾习前端 xff0c VsCode之插件 xff0c 个人所装 xff0c 喜着自拿 xff0c 不足之处还望海涵 xff0c 多加批评 1 Auto Close Tag 自动闭合尾部的标签 2 Atuo Rename Tag 修改 h