前端vscode必备插件(强烈推荐)

目录

一、前言

二、工具推荐

1.《Chinese (Simplified) (简体中文) Language》

2.《ESLint》

3.《Git History》

4.vscode-icons 

5.Path Intellisense

6.《Vetur》

7.《GitLens — Git supercharged》

8.《Image preview》

9.Debugger for Chrome

10.Prettier

11.AnyRule 

13.Vue Language Features (Volar)

14.Vite

15.Code Spell Checker

16.Error Lens

17.Angular Language Service。

18.Angular Files

19.《小霸王》


一、前言

VSCode 是我们前端开发的一个强大的IDE,因此选择趁手好用的插件能事半功倍,也能能更好地编码以及获得更丝滑的开发体验。然后剩下的时间用来摸鱼是很有必要滴。

二、工具推荐

1.《Chinese (Simplified) (简体中文) Language》

首先呢,我先推荐的就是最基础的语言包,没办法,英语水平太捞了哈哈哈,弄起来后就舒服多了,汉语yyds~。

2.《ESLint》

这个其实真的是又爱又恨,有时候一些写法自己觉得很舒服,他就给你提示不规范,看个人开发习惯吧哈哈哈。

3.《Git History》

查看git的分支管理、提交记录等。

4.vscode-icons 

该插件会基于文件扩展名在 the tree view 中的文件名旁添加图标,让你更容易地识别文件。

效果图如下:

 5.Path Intellisense

该扩展可以自动补全代码中的路径和文件名。例如前端的静态文件引入路径填写修改。

 

 效果图如下:

6.《Vetur》

这个vue开发者必备的扩展就不多做解释了,代码高亮,补齐等等。

7.《GitLens — Git supercharged》

git团队项目管理工具。

这个工具可以清楚的看见哪些bug是谁写的,还有很多功能,也是团队开发中必安的插件。

效果如下:

8.《Image preview》

图片是否正确引入的显示工具,在图片连接上按住ctrl,鼠标悬浮即可看见是否正确找到路径下的图片文件,非常有用!

效果如下:

9.Debugger for Chrome

映射vscode上的断点到chrome上,方便调试。

10.Prettier

Prettier 是目前 Web 开发中最受欢迎的代码格式化程序。安装了这个插件,它就能够自动应用Prettier,并将整个 JS 和 CSS 文档快速格式化为统一的代码样式。如果你还想使用 ESLint,那么还有个 Prettier – Eslint 插件,你可不要错过咯。

11.AnyRule 

这是一个用来快速检索常用正则表达式的插件,希望能给大家在繁忙的开发过程中带来一丁点的效率提升。

 

 效果图如下:

13.Vue Language Features (Volar)

相信使用 VSCode 开发 Vue2 的同学一定对 Vetur 插件不会陌生,作为 Vue2 配套的 VSCode 插件,它的主要作用是对 Vue 单文件组件提供高亮、语法支持以及语法检测。

而随着 Vue3 正式版发布,Vue 团队官方推荐 Volar 插件来代替 Vetur 插件,不仅支持 Vue3 语言高亮、语法检测,还支持 TypeScript 和基于 vue-tsc 的类型检查功能。

14.Vite

Vite 插件可以让我们打开项目后,就能自动启动开发服务器,允许开发者无需离开编辑器即可预览和调试应用。支持一键启动、构建和重启项目。

15.Code Spell Checker

Code Spell Checker 是在VSCode中的一款插件,能够帮助我们检查单词拼写是否出现错误,检查的规则遵循 camelCase (驼峰拼写法)。

16.Error Lens

可以将代码中不符合规范或者逻辑不通顺的错误提示信息展示在代码行内 。

 

 效果图如下:

17.Angular Language Service。

超好用的从模板 html F12一键定位变量定义位置.。

18.Angular Files

使用angular框架开发项目的同学,可以安装一键生成angular需要的文件。

19.《小霸王》

在线支持几十款游戏,实乃上班娱乐摸鱼的必备插件!!!!!

上有超级玛丽下有坦克大战 开箱即用 点开即玩 可放大放小 娱乐无穷!!!!

就先介绍这几款常用的插件,让大家更好地编码和获得更丝滑的开发体验。也欢迎各位朋友补充推荐哈。

如果文章对你有所帮助,❤️关注+点赞❤️鼓励一下博主会持续更新。。。。

来源于:程序员摸鱼导航

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微服务中间件--Ribbon负载均衡

Ribbon负载均衡 a.Ribbon负载均衡原理b.Ribbon负载均衡策略 (IRule)c.Ribbon的饥饿加载 a.Ribbon负载均衡原理 1.发起请求http://userservice/user/1,Ribbon拦截该请求 2.Ribbon通过EurekaServer拉取userservice 3.EurekaServer返回服务列表给Ribbon做负载均衡 …

【云驻共创】华为云之手把手教你搭建IoT物联网应用充电桩实时监控大屏

文章目录 前言1.什么是充电桩2.什么是IOT3.什么是端、边、云、应用协同4.什么是Astro轻应用 一、玩转lOT动态实时大屏(线下实际操作)1.Astro轻应用说明1.1 场景说明1.2 资费说明1.3 整体流程 2.操作步骤2.1 开通设备接入服务2.2 创建产品2.3 注册设备2.4…

上海交大ACM班总教头团队重磅新作,带你动手学机器学习(文末赠书4本)

目录 0 写在前面1 什么是机器学习?2 ACM 班总教头:俞勇3 动手学习机器学习赠书活动 0 写在前面 机器学习强基计划聚焦深度和广度,加深对机器学习模型的理解与应用。“深”在详细推导算法模型背后的数学原理;“广”在分析多个机器…

stm32之5.长按按键(使用时钟源)调整跑马灯速度

------------------------------ 源码 #include <stm32f4xx.h> #include "led.h" #include "delay.h" #include "my_str.h" #include "beep.h" #include "key.h" int main(void) { key_init(); Led_init();…

redis高级----------主从复制

redis的四种模式&#xff1a;单例模式&#xff1b;主从模式&#xff1b;哨兵模式&#xff0c;集群模式 一、主从模式 单例模式虽然操作简单&#xff0c;但是不具备高可用 缺点&#xff1a; 单点的宕机引来的服务的灾难、数据丢失单点服务器内存瓶颈&#xff0c;无法无限纵向扩…

7-42 整型关键字的散列映射

题目链接&#xff1a;这里 题目大意&#xff1a;就是写一个线性探测的散列 然鹅&#xff0c;我不会写(?)我一共错了两个地方 有冲突的情况下&#xff0c;就是线性探查然后往后找&#xff0c;但是我之前写的是t&#xff0c;应该是t (t1)%p;…在有重复关键字的时候&#xff0c…

运行flutter doctor命令窗口直接闪退

在cmd中输入flutter doctor后闪退了。 使用高速摄像机可以看到报错信息。 报错信息的意思是git的文件夹不能删掉&#xff0c;请保留flutter中git文件。

数据结构——栈和队列OJ题

栈和队列小提升&#xff01; 前言一、用队列实现栈队列接口实现&#xff08;1&#xff09;栈的接口定义&#xff08;2&#xff09;栈的初始化&#xff08;3&#xff09;入栈函数的定义&#xff08;4&#xff09;出栈函数的定义&#xff08;5&#xff09;查找栈顶元素&#xff0…

vue3 计算两个表单得到第三个表单数据

<el-formref"ruleFormRef"label-width"150px"label-suffix":":rules"rules":disabled"drawerProps.isView":model"drawerProps.rowData"><el-form-item label"云平台名称" prop"cloudId&…

硬件知识积累 LED的介绍与选型 (简单电路)

1. LED 的介绍 1.1 LED 是什么 LED :是一种能发光的半导体电子元件。发光二极管&#xff08;LED&#xff09;于20世纪60年代问世。在20世纪80年代之前&#xff0c;LED主要作为指示灯使用&#xff0c;从其光色来看&#xff0c;只有红光、橙光、黄光和绿光等几种。这一时期属于…

游乐场vr设备虚拟游乐园vr项目沉浸体验馆

在景区建设一个VR游乐场项目可以为游客提供一种新颖、刺激和沉浸式的游乐体验。提高游客的体验类型&#xff0c;以及景区的类目&#xff0c;从而可以吸引更多的人来体验。 1、市场调研&#xff1a;在决定建设VR游乐场项目之前&#xff0c;需要进行市场调研&#xff0c;了解当地…

基于Spark+django的国漫推荐系统--计算机毕业设计项目

近年来&#xff0c;随着互联网的蓬勃发展&#xff0c;企事业单位对信息的管理提出了更高的要求。以传统的管理方式已无法满足现代人们的需求。为了迎合时代需求&#xff0c;优化管理效率&#xff0c;各种各样的管理系统应运而生&#xff0c;随着各行业的不断发展&#xff0c;基…

【LUBAN】【功能验证】至简投屏功能之Android有线连接方式测试

1、概述 至简投屏功能之Android有线连接方式支持至简自带应用至加的投屏功能和谷歌官方的Android auto功能。 支持的功能范围列举如下&#xff1a; 1、屏幕投屏&#xff08;支持自动旋转屏&#xff09;2、音视频播放&#xff08;抖音、百度地图等&#xff09;3、车机反控手机…

里式替换原则(LSP)

目录 简介: 作用: 过程: 总结: 简介: 里式替换原则&#xff08;Liskov Substitution Principle&#xff0c;简称LSP&#xff09;的提出者是美国计算机科学家Barbara Liskov。Barbara Liskov是一位计算机科学家&#xff0c;麻省理工学院教授&#xff0c;也是美国第一个计算机…

港联证券|油价上涨对股票影响大吗?利好还是利空?

石油是现代国家国民经济的血脉&#xff0c;直接影响国民经济的发展。那么&#xff0c;油价上涨对股票影响大吗&#xff1f;利好仍是利空&#xff1f;为大家准备了相关内容&#xff0c;以供参阅。 香港港联证券有限公司&#xff08;百度一下港联证券&#xff09;成立于2021年1月…

还是搞不懂Anaconda是什么?读这一篇文章就够了

文章目录 1 Anaconda介绍2 conda介绍3 安装Anaconda4 Anaconda的使用配置Anaconda源 5 创建虚拟环境并使用5.1 创建虚拟环境5.2 查看所有环境5.3 激活环境5.4 安装包5.4.1 conda方式5.4.2 pip方式5.4.3 从Anaconda.org安装包 5.5 查看该环境的所有包5.6 测试是否安装成功 6 退出…

Vue+Axios搭建二次元动态登录页面(mp4视频格式)

最近想做一个前端登录页面&#xff0c;背景好看的&#xff0c;格式中规中矩的&#xff0c;这么难&#xff1f;我自己创一个吧&#xff01; 效果图如下&#xff1a; 源码可以参考我的github&#xff0c;复制源码即可用&#xff1a;gym02/loginPage_Vue: 使用VueAxios搭建的动态…

Cadence软件屏幕显示问题

问题 就是今天打开Cadence软件想导出网表看一下&#xff0c;发现没有显示确定按钮什么的&#xff0c;那个窗口也是无语&#xff0c;不能移动&#xff0c;缩放也只能左右缩放&#xff0c;还不能缩小什么的&#xff0c;真的醉了&#xff0c;后面就是调整窗口的分辨率。 因为我最…

大型集团企业数据治理方案,以“应用驱动”的数据治理策略 | 行业方案

数据治理是推动大型集团企业转型升级、提升竞争优势、实现高质量发展的重要引擎。 通过搭建大数据平台&#xff0c;实现对业务系统数据的采集、清理、建模、整合&#xff0c;建立一个符合业务需求的数据决策平台&#xff0c;形成企业数字化转型关键能力&#xff0c;支撑数据赋…