其他分享
首页 > 其他分享> > VSCode篇 -- 前端很好用的插件集

VSCode篇 -- 前端很好用的插件集

作者：互联网

1、Live Server 实时更新页面

VSCode 搜索 preview，出现 live server之后，直接安装即可。
在这里插入图片描述
安装成功之后，就可以在编辑的 HTML 页面上，鼠标右键点击 Open With LiveServer。
在这里插入图片描述
LiveServer 默认端口号 5500，开启 LiveServer 服务器之后，即可实现页面边编辑边切换查看页面的实时更新效果展示。
在这里插入图片描述
关闭，只需鼠标右键点击 Stop LiveServer 即可。

2、Live Server Preview 页面实时预览

VSCode 搜索 preview，出现 live server preview 之后，直接安装即可。
在这里插入图片描述
安装成功之后，每次编辑页面，打开命令面板，输入 Show Live Server Preview 就会出现该插件，点击即可实现在 VSCode 内实时预览页面效果。
在这里插入图片描述
运行效果：
在这里插入图片描述
感觉命令面板打开太难受，可以在命令面板选择编辑打开 Live Server Preview 的快捷键。
在这里插入图片描述
在此输入快捷键，按下 Enter 键即可。
在这里插入图片描述

3、Easy Less – Less 自动编译

在做项目时，每次改动完 .less 文件都要在控制台输入 lessc 命令更新 css 文件，比较麻烦。
VSCode 提供了 Easy Less 插件，可以实现在每次编辑完 .less 文件保存之后，自动编译出相应的 css 文件。

VSCode 搜索 Easy Less ，直接安装：
在这里插入图片描述
安装完之后，在当前项目的目录下建立 .vscode 目录，创建 .setting.json 配置文件，输入以下配置信息：

{
    "less.compile": {
        "compress": true,
        "sourceMap": true,
        "out": "${workspaceRoot}\\css",
        "main": "${workspaceRoot}\\less"
    }
}

编辑完 setting.json 文件之后，即可实现 less 文件自动编译效果。

标签：文件,插件,less,VSCode,Less,--,LiveServer,页面
来源： https://blog.csdn.net/weixin_42995152/article/details/119118901