vscode 几个前端常用的插件

1. vue 代码高亮
2. 自动添加html闭合标签
3. 自动重命名匹配 改变前后任何一个标签 前后标签自动同步
4. Beautify 代码格式化
5. 在 html 标签上写class 智能提示当前项目所支持的样式
6. html 代码片段提示
7. javaScript 代码片段提示
8. vue 代码片段提示
9. 本地服务器 live server
10. 鼠标划过图片路径出现预览图片
11. 智能提示文件路径
12. 实时观看 javascript 的变量的变化
13. 生成假数据 手机号 图片路径等

1.vue 代码高亮插件
Vetur

2.自动添加html闭合标签
Auto Close Tag

3.自动重命名匹配 改变前后任何一个标签 前后标签自动同步
Auto Close Tag

4.代码格式化
Beautify

使用方法：
01.外置键盘直接按f1 笔记本内置键盘fn+f1 （出现如下图）

02.选中 Beautify file 如果没有就手动输入（点击之后如下图，选择对应要格式的文件）

5.在 html 标签上写class 智能提示当前项目所支持的样式
HTML CSS Support

6.html 代码片段提示
HTML Snippets

7.javaScript 代码片段提示
JavaScript Snippet Pack

8.vue 代码片段提示
VueHelper

9.本地服务器
Live server

右下角出现（Go Live）

进行配置：
01.文件-首选项-设置
02.选中工作区设置 点击进入settings.json

03.进入之后，将右侧箭头处的地方改为左侧工作区文件夹的名字

		{
    		"path":"填文件夹路径"
    	}
    	// 填入启用服务器的文件名
    	"liveServer.settings.multiRootWorkspaceName": "liveServer"

04.点击右下角Go Live启动本地服务器 （如下图表示启动成功，地址变为http://127.0.0.1:5500）


05.让别人也访问到你本地服务器的东西
需要在同一个局域网 （同一个路由器网络）
访问http://127.0.0.1:5500/加上自己的路径

9.鼠标划过图片路径出现预览图片
Image Preview

10.智能提示文件路径
Path Intellisense

11.实时观看 javascript 的变量的变化
Quokka.js

12.生成假数据 手机号 图片路径等
vscode-faker

使用方法:
01.将鼠标光标移入到字符串内

02.外置键盘直接按f1 笔记本内置键盘fn+f1 输入faker

03.选择要生成假数据的类型，自动填充到光标处