前端常用的Vscode插件🔖
文章目录
- 前端常用的Vscode插件🔖
- 1. Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code -- Vscode中文插件
- 2. Code Runner -- 快速运⾏调试代码
- 3. Live Server -- 实时重新加载本地开发服务器
- 4. Image preview -- 图片图像预览
- 5. Color Highlight -- 颜色设置明显
- 6. Turbo Console Log -- 快速Log工具
- 7. Console Ninja -- Log显示在Vscode页面中
- 8. Highlight Matching Tag -- 显示标签作用范围
- 9. Auto Close Tag -- 自动闭合双向改变标签
- 10. any-rule -- 正则库
- 11. DotENV --.env文件高亮
- 12. Git History -- Git相关
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日志，文件历史，比较分支或提交
