B56-VSCode右键在浏览器运行PHP代码

# 教程说明
当我们在VSCode编写了PHP代码，右键默认只有一个`Run Code`，代码运行以后结果会在终端输出。

如果我们想要右键直接在浏览器运行代码（而不是自己输入地址），就需要安装插件进行配置。

# 一、安装插件

点击VSCode左侧扩展图标，输入`open php in`进行搜索，找到`Open PHP/HTML/JS In Browser`这个扩展，点击右侧的`Install`进行安装

![](/media/202409/2024-09-03_135517_3911050.004036739735186035.png)

# 二、配置插件

检查安装完成后，点击右侧的齿轮图标，打开`Extension Settings`，进入插件设置

![](/media/202409/2024-09-03_135720_7165200.3305450176043644.png)

## 1、配置浏览器

### Open-PHP-HTML-JS-in-browser: Selected Browser
这一项选择`Custom...`（自定义）

### Open-PHP-HTML-JS-in-browser: Custom Browser Path
这一项填写你的浏览器的完整路径（找不到的用everything搜索），例如：
`C:\Program Files\Google\Chrome\Application\chrome.exe`

Edge浏览器名称：`msedge.exe`
FireFox名称：`firefox.exe`

效果如图：

![](/media/202409/2024-09-03_140408_5036840.3497168472911152.png)

## 2、配置Apache服务器

### Open-PHP-HTML-JS-in-browser: Document Root Folder

这一项需要配置为你的Apache的根目录，也即小皮面板的网站根目录（WWW目录），例如：
`E:\dev_runApp\phpstudy_pro\WWW`

### Open-PHP-HTML-JS-in-browser: Url To Open

这一项配置为`http://localhost`

配置好了效果如图：
![](/media/202409/2024-09-03_135832_0514940.7742864282368684.png)

# 三、启动phpstudy里面的Apache

注意，接下来我们是通过Apache调用PHP程序去运行代码，所以这里必须要启动Apache。

![](/media/202409/2024-09-03_141009_7265180.2844096844026657.png)

# 四、右键在浏览器打开代码

切换到资源视图

![](/media/202409/2024-09-03_140038_3495650.8363849650353586.png)

双击打开需要运行的代码文件，比如`test.php`

在代码上右键点击`Open PHP In Browser`运行：

![](/media/202409/2024-09-03_140111_6680010.29842081681603605.png)

# 五、运行效果

![](/media/202409/2024-09-03_140209_3375030.8502789577313951.png)