欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vscode 几个前端常用的插件

程序员文章站 2022-07-12 20:53:50
...
  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
vscode 几个前端常用的插件
2.自动添加html闭合标签
Auto Close Tag

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

4.代码格式化
Beautify
vscode 几个前端常用的插件
使用方法:
01.外置键盘直接按f1 笔记本内置键盘fn+f1 (出现如下图)
vscode 几个前端常用的插件
02.选中 Beautify file 如果没有就手动输入(点击之后如下图,选择对应要格式的文件)
vscode 几个前端常用的插件
5.在 html 标签上写class 智能提示当前项目所支持的样式
HTML CSS Support

6.html 代码片段提示
HTML Snippets

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

8.vue 代码片段提示
VueHelper

9.本地服务器
Live server
vscode 几个前端常用的插件
右下角出现(Go Live)
vscode 几个前端常用的插件
进行配置:
01.文件-首选项-设置
02.选中工作区设置 点击进入settings.json
vscode 几个前端常用的插件
03.进入之后,将右侧箭头处的地方改为左侧工作区文件夹的名字

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

vscode 几个前端常用的插件
04.点击右下角Go Live启动本地服务器 (如下图表示启动成功,地址变为http://127.0.0.1:5500)
vscode 几个前端常用的插件
vscode 几个前端常用的插件
05.让别人也访问到你本地服务器的东西
需要在同一个局域网 (同一个路由器网络)
访问http://127.0.0.1:5500/加上自己的路径

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

10.智能提示文件路径
Path Intellisense
vscode 几个前端常用的插件
11.实时观看 javascript 的变量的变化
Quokka.js
vscode 几个前端常用的插件
12.生成假数据 手机号 图片路径等
vscode-faker
vscode 几个前端常用的插件
使用方法:
01.将鼠标光标移入到字符串内
vscode 几个前端常用的插件
02.外置键盘直接按f1 笔记本内置键盘fn+f1 输入faker
vscode 几个前端常用的插件
03.选择要生成假数据的类型,自动填充到光标处
vscode 几个前端常用的插件