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"
    }
}

• ${workspaceRoot} ： 当前工作空间根目录
• out ：css文件的存放路径
• main ：less 文件所在目录

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

4、翻译(英汉词典) – 选中单词翻译成中文

英语小白救命良药！！

VSCode 搜索 翻译(英汉词典)，直接安装即可。

安装之后，在页面中，选中任意单词，即可在下方状态栏查看翻译结果。

贼好用！

5、Image preview – 图片实时预览

为避免在输入完图片路径之后，不知道图片的具体详情或路径是否正确。
Image preview 能够在输入完图片路径之后在VSCode 的侧边栏实时展示图片。
VSCode 搜索 Image preview，直接安装即可。

效果：