前端常用的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日志,文件历史,比较分支或提交

相关推荐
小小小小宇2 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊2 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习3 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖4 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖4 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水4 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐4 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06274 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿121385 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴5 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript