前端开发常用的Vscode插件整理(持续更新)

本文记录用vscode进行前端开发时,常用到的有用的vscode插件,将不定时更新~

1、Chinese (Simplified) 将编辑器变成简体中文
在这里插入图片描述
2、vscode-icon 让 vscode 资源树目录加上图标,官方出品的图标库
在这里插入图片描述
3、Import Cost 引入包大小计算,对于项目打包后体积掌握很有帮助
在这里插入图片描述
4、gitLens 代码管理插件,多人协作开发必备神器,可以看到代码的作者,提供git相关便捷的操作。使用教程参考
在这里插入图片描述
5、Prettier 代码格式化
在这里插入图片描述
6、markdown all in one 为 Markdown 样式提供健康快捷键,列表的自动化处理,自动格式化表格,提供数学公式的支持,自动补全
在这里插入图片描述
7、HTML Boilerplate,html5自动补全
在这里插入图片描述
8、auto close tag 写标签时自动补全尾标签
在这里插入图片描述
9、Atuo Rename Tag 修改 html 标签,自动完成尾部闭合标签的同步修改
在这里插入图片描述
10、open in browser 在编辑器内鼠标右键,可以选择将html页面在浏览器中打开
在这里插入图片描述
11、css peek 快速跳转到样式的定义,按住ctrl键同时点击样式类的名称即可跳转到样式的定义。(注:仅仅对html中引用外部样式,即单独css文)件有用,对vue内部样式没有用)
在这里插入图片描述
12、css-auot-prefix 为了使页面能够在主流浏览器上显示,部分css属性就需要添加不同的兼容前缀,Css-auot-prefix可以自动补全css的前缀,适用于css、less、scss。
使用方法:在需要处理的css文件里按ctrl+shift+p,选择Autoprefixer:Run选项
在这里插入图片描述
13、Path Intellisense 在代码中引入文件或组件时自动补全路径
在这里插入图片描述
14、i18n Ally 轻量且功能强大的可视化编辑插件,提供了增删改查、视图审阅、在线翻译等功能,极大地提高了开发者翻译多语言的效率。更多使用指南
在这里插入图片描述
15、vue-helper vue代码进行代码提示
在这里插入图片描述
16、vetur vue语法高亮、智能感知、Emmet等(只适用于vue2语法),包含格式化功能: Alt+Shift+F 格式化全文
在这里插入图片描述
17、volar 同vetur,但是适用于vue3语法
在这里插入图片描述
18、Typescript Vue Plugin(Volar)适用于vue3+typescript可以用
在这里插入图片描述
19、Simple React Snippets 快速生成react代码片段, 官方说明
在这里插入图片描述
20、ES7+ React/Redux/React-Native/JS snippets 也是快速生成常用代码块
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/227826.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

hadoop安装与配置-shell脚本一键安装配置(集群版)

文章目录 前言一、安装准备1. 搭建集群 二、使用shell脚本一键安装1. 复制脚本2. 增加执行权限3. 分发脚本4. 执行脚本5. 加载用户环境变量 三、启动与停止1. 启动/停止hadoop集群(1) 复制hadoop集群启动脚本(2) 增加执行权限(3) 启动hadoop集群(4) 停止hadoop集群(5) 重启hado…

直播预告|StarRocks 3.2 全面解读:易用性和性能的双重提升

StarRocks 3.2 版本即将发布,这是 StarRocks 的又一次重大升级,除了进一步完善存算分离架构、数据湖分析和物化视图等重要特性,我们还聚焦于运维操作细节,大大提升了 StarRocks 的易用性,从建表、表变更、数据导入、查…

数据清洗、特征工程和数据可视化、数据挖掘与建模的应用场景

1.5 数据清洗、特征工程和数据可视化、挖掘建模的应用场景 视频为《Python数据科学应用从入门到精通》张甜 杨维忠 清华大学出版社一书的随书赠送视频讲解1.5节内容。本书已正式出版上市,当当、京东、淘宝等平台热销中,搜索书名即可。内容涵盖数据科学应…

给孩子选台灯需要注意什么?专业的学生台灯推荐

现在的孩子近视率非常高,不少还在上小学的都已经存在佩戴眼镜的现象了,这也让很多家长开始重视起了孩子的视力健康问题。其实孩子近视的主要原因用眼过度,细心的家长可能发现,现在的孩子作业都变多了,经常需要晚上挑灯…

Hive安装步骤

目录 1、安装前提:hadoop全分布 2、卸载MariaDB数据库 (1)设置防火墙服务开启不启动 (2)查看linux自带的MariaDB数据库 (3)卸载linux自带的MariaDB数据库 3、安装mysql数据库 &#xff0…

MySQL系列(十):主从架构

一:主从架构 常见的主从架构模式有四种: 一主多从架构:适用于读大于写的场景,采用多个从库来分担数据库系统的读压力。多主架构:适用于读写参半的场景,采用多个主库来承载数据库系统整体的读写压力。多主…

使用Notepad++编辑器,安装AnalysePlugin搜索插件

概述 是一款非常有特色的编辑器,Notepad是开源软件,Notepad中文版可以免费使用。 操作步骤: 1、在工具栏 ->“插件”选项。 2、勾选AnalysePlugin选项,点击右上角“安装”即可。 3、 确认安装插件 4、下载插件 5、插件已安装…

Leetcode—337.打家劫舍III【中等】

2023每日刷题(五十二) Leetcode—337.打家劫舍III 算法思想 实现代码 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeNode() : val(0), left(nullptr), right(null…

可视化工具Datart小妙招(1)——妙用计算字段

加gzh“大数据食铁兽”,了解更多Datart小妙招 作为目前国内开源版本最好用的可视化工具之一,Datart无疑是低成本高效率可供二开的可视化神兵利器。经过一段时间的使用及磨合,现在总结一些使用的小妙招分享给大家。本篇我们来讲一讲可视化工具…

基于Python guI的学生信息管理系统的设计与实现

基于Python guI的学生信息管理系统的设计与实现 摘要 讲述的是一个使用Python GUI的学习资料管理工具。通过使用Python的Tkinter库和mysql数据库,这个工具可以方便地记录、检索、更新学习资料。本文详细描述了系统的架构设计和实现过程,并对系统进行了功…

语聚AI知识库支持连接数据库,无需上传知识文档,数据分析更高效

数据库系统是企业信息技术基础架构的关键部分,它帮助企业管理和处理其数据,目前已有大量企业通过数据库保存数据,例如员工信息、客户数据、产品销售数据等等。但企业运营变得越来越复杂,数据库中的数据量也在持续增长,…

GPTs的创建与使用,自定义GPTs中的Actions示例用法 定义和执行特定任务的功能模块 通过API与外部系统或服务的交互

Name 等 Logo:自动生成 Name 介绍 Description 介绍 Instructions 要求或命令等 比如用中文回复,角色。 Knowledge 上传你的知识库,如果你有某一垂直行业的数据,基于数据来回答。比如我有某个芯片的指令集。 Capabilities 都要 Actions&…

分享 | 顶刊高质量论文插图配色(含RGB值及16进制HEX码)(第一期)

我在很早之前出过一期高质量论文绘图配色,但当时觉得搜集太麻烦于是就没继续做,后来用MATLAB爬了上万张顶刊绘图,于是又想起来做这么一个系列,拿了一个多小时写了个提取论文图片颜色并得出RGB值和16进制码并标注在原图的代码&…

Django的logging-日志模板的简单使用方法(配置并使用根日志记录器-不显示实例化logging对象)

扩展阅读: Python-Django的“日志功能-日志模块(logging模块)-日志输出”的功能详解 现在有下面的Python代码: # -*- coding: utf-8 -*-content "i love you" print(content)现在要把代码中print语句中的内容以日志文件的形式输出&#xff…

静电ESD整改:如何让企业避免损失?|深圳比创达电子EMC

一、静电ESD整改的背景 静电是指物体之间因摩擦或分离而产生的电荷,而静电放电ESD(Electrostatic Discharge)则是指静电在物体间突然放电的现象。静电放电造成的瞬态高电流和高电压可能会损坏电子设备,从而给企业带来损失。因此,进行静电ESD…

硬件开发笔记(十五):RK3568底板电路VGA显示接口原理图分析

若该文为原创文章,转载请注明原文出处 本文章博客地址:https://hpzwl.blog.csdn.net/article/details/134849296 红胖子网络科技博文大全:开发技术集合(包含Qt实用技术、树莓派、三维、OpenCV、OpenGL、ffmpeg、OSG、单片机、软硬…

html中一个div中平均一行分配四个盒子,可展开与收起所有的盒子

html中一个div中平均一行分配四个盒子&#xff0c;可展开与收起所有的盒子 1.截图显示部分 2.代码展示部分 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"wid…

OpenCvSharp从入门到实践-(07)绘制图形

目录 1、线段的绘制 1.1实例1-绘制线段拼成一个"王"字 2、矩形的绘制 2.1实例2-绘制一个矩形边框 2.2实例3-绘制一个实心矩形 3、圆的绘制 3.1实例4-绘制"交通灯" 4、多边形绘制 4.1实例5-绘制等腰梯形 5、文字的绘制 5.1实例6-绘制文字OpenCvS…

邀请函 | 合作发展,赋能增效--新架构下汽车电子软件研发技术研讨会

会议介绍 随着汽车智能化、网联化快速演进&#xff0c;“软件定义汽车、架构定义软件”愈发形成行业共识。汽车上的软件应用在提升用户体验、推动行业技术创新方面发挥着至关重要的作用。 在此背景下&#xff0c;如何有效地提升软件开发效率、更好地管理软件质量、满足行业安全…

m1通过源码编译xgboost4j的jar

1、下载源码 git clone --recursive https://github.com/dmlc/xgboost cd xgboost 编译xgboost的动态链接库dylib&#xff0c;m1源码编译xgboost的动态链接库dylib文件 2、编译XGBoost的jar文件&#xff1a; A、如果没有安装maven可以通过以下命令进行安装&#xff0c;如果安…