WebStorm 配置类似 VSCode 的 Live Server在 WebStorm 中配置一个类似于 VSCode

在 WebStorm 中配置一个类似于 VSCode 的 Live Server 的功能，可以通过以下方式实现，通常是通过内置的 WebStorm 功能或者借助外部工具来实现实时刷新。

方法一：使用 WebStorm 自带的内置功能

WebStorm 已经内置了类似于 Live Server 的实时预览功能，你可以使用它来启动一个本地开发服务器并实时刷新页面。

打开项目：在 WebStorm 中打开项目。
配置运行/调试配置：
- 在右上角的 运行配置 菜单（Edit Configurations）中，选择 +（新建配置）。
- 选择 JavaScript Debug。
- 在 URL 输入框中填入你要访问的本地地址，例如：http://localhost:3000。
- 在 JavaScript File 中选择一个入口文件（通常是 index.html 或类似的 HTML 文件）。
启动本地开发服务器：
- WebStorm 提供了一些内置的支持，假如你没有配置自定义开发服务器，可以使用 WebStorm 自带的 File Watcher 或者 Live Reload，即：
  - 启动开发服务器后，WebStorm 会自动打开浏览器并刷新页面。
自动刷新：
- 启动后，页面会随着你在编辑器中的改动而实时刷新。WebStorm 会检测到 HTML/CSS/JS 文件的变化，并自动重新加载页面。

如果你更习惯 VSCode 中的 Live Server 插件，可以通过 Node.js 的 live-server 包来创建一个简单的本地开发服务器，并实现实时刷新。

安装 live-server：在项目根目录打开终端，运行以下命令来安装 live-server：
```
npm install -g live-server
```
启动 live-server：安装完成后，可以直接在项目根目录使用以下命令启动服务器：
```
live-server
```
这会自动打开浏览器并监听文件变化。每次你修改代码并保存时，页面会自动刷新。

你也可以通过 live-server 传入一些参数来配置，比如指定端口等。例如：
```
live-server --port=3000
```
配置 WebStorm 中的运行/调试配置：
- 打开 WebStorm 的 运行/调试配置，点击 + 新建一个配置，选择 npm。
- 在 Package 选项中选择 live-server 所在的 npm 包。
- 设置命令为 start，运行这个配置就可以在 WebStorm 中启动 live-server。
实时刷新：通过这种方式，live-server 会像 VSCode 中的 Live Server 一样，监视文件的变化并自动刷新页面。

BrowserSync 是一个更强大的工具，可以跨设备同步刷新页面。如果你希望支持多设备实时刷新，可以使用它。

安装 browser-sync：在项目根目录中安装 browser-sync：
```
npm install browser-sync --save-dev
```
配置 browser-sync：在 package.json 中添加一个启动脚本：
```
"scripts": {
  "start": "browser-sync start --server --files '**/*.html, **/*.css, **/*.js'"
}
```
这个脚本会启动一个本地服务器，并监控 HTML、CSS 和 JS 文件的变化。
运行 browser-sync：运行以下命令来启动服务器：
```
npm start
```
实时刷新：运行后，browser-sync 会自动打开浏览器并同步你的更改。如果你在不同的设备上访问这个开发服务器，所有设备的页面都会实时同步更新。

WebStorm 自带的功能：提供了内置的自动刷新和调试支持，可以通过 JavaScript Debug 配置实现类似的功能。
Live Server：通过 live-server 或 browser-sync 等工具，可以实现类似 VSCode 的实时刷新功能，并且可以通过 WebStorm 配置启动和调试。
BrowserSync：适用于需要跨多个设备或多个浏览器同步刷新的场景。

这样，无论是使用 WebStorm 自带的工具，还是第三方工具，都能实现类似于 VSCode 的 Live Server 功能，满足实时预览和自动刷新的需求。