前端常用的Vscode插件🔖

前端常用的Vscode插件🔖

1. Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code -- Vscode中文插件

Vscode中文插件,这个一般都会装,这里不叙述。

2. Code Runner -- 快速运⾏调试代码

Code Runner插件主要就是可以快速运⾏调试代码,⽆需配置繁杂的环境,直接通过此插件就可以直接运行对应语言的代码,非常适合学习或测试各种开发语言。

3. Live Server -- 实时重新加载本地开发服务器

Live Server能够启动一个具有静态和动态页面实时重新加载功能的本地开发服务器

4. Image preview -- 图片图像预览

Image preview可以在引入图片左侧导航条显示图像预览

5. Color Highlight -- 颜色设置明显

Color Highlight可以让设置颜色直接显示在color位置,更加明显,方便开发。

6. Turbo Console Log -- 快速Log工具

Turbo Console Log这个插件对于经常要log的调试的可以说是十分好用的。

选中变量之后,使用快捷键:ctrl + alt + L 就可以直接log这个变量。

其他快捷键:shift + alt + c 注释

​ shift + alt + d 删除Turbo Console Log

​ shift + alt + u 取消注释

注意这些快捷键是对当前代码页面所有Turbo Console Log起效果,也就是说在你开发完当前页面后,就可以shift + alt + d直接删除当前页所有Turbo Console Log。

7. Console Ninja -- Log显示在Vscode页面中

Console Ninja插件,先说结论很好用的一个插件,可以直接在Vscode内部就看到log的东西,配合上面Turbo Console Log 简直是完美的搭配。但是有一点不好的就是,很多时候都会失效,这个具体原因也不是很清楚。下面的Gif图为官方配图,我目前使用看来,一部分项目能使用,一部分就是用不了。

8. Highlight Matching Tag -- 显示标签作用范围

Highlight Matching Tag插件主要作用是给标签前后设置下划线好区分作用范围。这个在写界面的时候,更加方便了去找到对应的范围。

9. Auto Close Tag -- 自动闭合双向改变标签

Auto Close Tag编写 HTML 或者 JSX 代码过程中,如果我们有这样的需求:输入<div> 时自动补全为<div></div>;将<div>修改为<section>,与之匹配的标签名称也随之更改,最终成为<section></section>。虽然 H5 中对未闭合的标签在有些时候可以显示,但还是鼓励所有标签都能主动闭合。Auto Close Tag能帮我们在编码过程快速实现这两个诉求。

10. any-rule -- 正则库

any-rule一个正则库,大部分正则都可以从这里面找到。

11. DotENV --.env文件高亮

DotENV在编辑.env文件时添加了便捷的语法高亮显示功能

12. Git History -- Git相关

Git History查看git日志,文件历史,比较分支或提交

相关推荐
玩电脑的辣条哥3 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452183 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52353 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
Moon.93 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
垚垚 Securify 前沿站3 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺6 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
mosquito_lover17 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt
柴柴的小记9 小时前
前端vue引入特殊字体不生效
前端·javascript·vue.js
柠檬豆腐脑10 小时前
从前端到全栈:新闻管理系统及多个应用端展示
前端·全栈
bin915310 小时前
DeepSeek 助力 Vue 开发:打造丝滑的颜色选择器(Color Picker)
前端·javascript·vue.js·ecmascript·deepseek