What is Microsoft Visual Studio Code?
Visual Studio Code is a streamlined code editor with support for development operations like debugging, task running, and version control. It aims to provide just the tools a developer needs for a quick code-build-debug cycle and leaves more complex workflows to fuller featured IDEs, such as Visual Studio IDE.
code.visualstudio.com
What is Microsoft Visual Studio Code PHP Server?
PHP Server is a Microsoft Visual Studio Code extension that enables you to:
Host / serve current workspace (or subfolder) with PHP.
marketplace.visualstudio.com
Prerequisites
PHP Server requires some servers and Microsoft Visual Studio Code to be installed.
PHP Server needs Live Server Web Extension installed on the browser it will be using.
Live Server Web Extension
What is Live Server Web Extension?
Live Server Web Extension is a browser extension that allows PHP Server (via Live Server) to update your browser. It will do this whenever you save your code in VS Code.
Why use Live Server Web Extension?
Used with Microsoft Visual Studio Code, this is very convenient. It allows you to immediately see how your local website looks and works. You do not have to click over and refresh your browser each time. It also avoids the annoying issue of forgetting to refresh your webpage and wondering why your working code is not working!
How to Install Live Server Web Extension
Install Live Server Web Extension on the browser VS Code will be using. Often, this is the default browser.
If you are planning on installing Live Server Web Extension on Safari or Microsoft Edge, click the appropriate + sign below for important information.
Are You Using Safari or Microsoft Edge?
Safari – Don’t, Just Don’t!
Safari – Don’t, Just Don’t!
It is complex to add Live Server Web Extension to Safari. It is for advanced users only, and is not covered in this blog.
To use Live Server Web Extension, use another browser instead. You may have to make this other browser the default browser.
Prepare Microsoft Edge For Chrome Extensions
If you are installing Live Server Web Extension on Microsoft Edge, we need to set up Edge to be able to install Chrome extensions.
Microsoft Edge uses Chrome extensions. We will tell Edge to use extensions from other stores, and then we will install the Live Server Web Extension.
Using Microsoft Edge, click on the “Settings and more” icon which is the three horizontal dots (…).
Click on Extensions.
Click on Manage Extensions.
In the left column, enable “Allow extensions from other stores”.
Click the Allow button. In Windows 10, the Cancel and Allow buttons might be placed differently than shown here.
If clicking the Allow button does not appear to do anything, exit Microsoft Edge and open Edge again. “Allow extensions from other stores” is enabled.
Search for Live Server Web Extension
For instructions about searching for the Live Server Web Extension, click the tab for the appropriate browser.
Using Google Chrome, go to google.com and search for “live server web extension for chrome”, without the quotes (“”).
Check that the search result you pick is for chrome.google.com, then click on the link.
Using Firefox, go to google.com and search for “live server web extension for chrome”, without the quotes (“”).
Check that the search result you pick is for addons.mozilla.org, then click on the link.
Ensure you have the add-on that is appropriate for your country. For Canada, it is en-CA, for the United States it is en-US.
Using Opera, go to google.com and search for “live server web extension for opera”, without the quotes (“”).
Check that the search result you pick is for chrome.google.com, then click on the link.
Using Microsoft Edge, go to bing.com and search for “live server web extension for chrome”, without the quotes (“”).
Check that the search result you pick is for chrome.google.com, then click on the link.
At this point, the procedure for each browser is basically the same. The differences are minor and straightforward to figure out. The exact procedure for a specific browser is shown under the corresponding tab.
Add Live Server Web Extension to Browser
Click on the Add to Browser button.
Click the Add Extension Button.
Remove the “Live Web Extension has been added to Browser” message.
This means clicking an X or an Okay button.
Pin the Live Server Web Extension
Some browsers pin the Live Server Web Extension automatically. Others don’t.
Click on the Extensions icon.
Firefox pins the Live Server Web Extension for you, so this step is not needed.
Firefox is awesome!
Microsoft Edge for Windows 10 pins the Live Server Web Extension for you, so this step is not needed.
This step is needed for Microsoft Edge for Mac.
Pin Live Server Web Extension.
Firefox pins the Live Server Web Extension for you, so this step is not needed.
Firefox is awesome!
Microsoft Edge for Windows 10 pins the Live Server Web Extension for you, so this step is not needed.
This step is needed for Microsoft Edge for Mac.
Enter the Live Server Web Extension Settings
Click on the Live Server Web Extension icon.
Set Live Server Web Extension to the following settings:
Enable Live Reload.
Leave a checkmark for “I don’t want proxy setup (recommended)”.
Enter http://localhost:3000/ for “Actual Server Address”.
Enter http://127.0.0.1:5500/ for “Live Server Address”.
Click the Apply button.
Live Server Web Extension is now installed. If you are finished setting up your browsers, install PHP Server for VS Code.
PHP Server
What is Microsoft Visual Studio Code PHP Server?
PHP Server is a Microsoft Visual Studio Code extension that enables you to:
Host / serve current workspace (or subfolder) with PHP.
marketplace.visualstudio.com
How to Install PHP Server in Microsoft Visual Studio Code
Open Microsoft Visual Studio Code.
Click on the Extensions icon.
Add the Live Server Extension in VS Code
In the Search Extensions in Marketplace box, enter live server. Several choices will be shown.
Find the one called Live Server by Ritwick Dey. Click on its Install button.
Wait several seconds for the Live Server extension to install. When the installation is done, you will see this:
Add the PHP Server Extension in VS Code
In the Search Extensions in Marketplace box, enter php server. Several choices will be shown.
Find the one called PHP Server by brapifra. Click on its Install button.
Wait several seconds for the PHP Server extension to install. When the installation is done, you will see this:
At the bottom left, click on the Manage icon.
Then click on Settings.
Remove all text from the Search Settings search box. Set Files: Auto Save to either off or afterDelay.
If Auto Save is off, you will have to press Cmd-S to save the file before the browser will update.
If Auto Save is set to afterDelay, then the browser will update about one second after you made a change to the file. This is the setting I prefer. Sometimes, I press Cmd-S if I want a browser update without changing my file.
Enter browser in the Search Settings search box. Then put a checkmark on Live Server – Settings: No Browser.
In the text field for “Phpserver: Browser”, enter the browser you want VS Code to use. I entered opera.
For Google Chrome, enter chrome. For Firefox, enter Firefox. For Opera, enter opera. For Chromium, enter chrome.
If you leave it blank, the default browser will be used. I am going to blank Phpserver: Browser to go back to the default browser.
Enter php into the Search Settings search box.
In the field for Phpserver: PHP Config Path, enter the file path to the PHP initialization file.
In the field for Phpserver: PHP Path, enter the file path to the PHP executable file.
Note that the / must be used.
For Mac, change the 8.0.8 to the number for your PHP version.
For Ubuntu, change the 8.1 to the number for your PHP version.
Go to the part for PHP > Validate Executable Path, and click on the “Edit in settings.json” link.
You will see the following.
The line for phpserver.browser is optional and may not be there. That is okay. In my case, it is there and is blank (“”). This due to me entering opera into the Phpserver: Browser field and then deleting it.
We want to change it to this:
We want to add two lines before the closing curly brace. The “php.executablePath” line, and the “php.validate.executablePath” line.
The easiest way is to simply replace everything with the following code, and adjust it to your preferences and settings.
Save the settings.
Quit VS Code.
Visual Studio Code is now configured.
Start Live Server
Open Microsoft Visual Studio Code.
Wait for Go Live to be displayed in the status bar. This can take a few seconds. If it doesn’t show up, click on an HTML or PHP file and then wait a few seconds for Go Live to show up.
You may not see all the following text because the startup is fairly quick. I literally had to go through frame-by-frame through the video to get these pictures.
First, Plain Text is displayed.
Then JSON with Commentsis displayed. This normally goes away quickly. If it does not go away after several seconds, click on an HTML or PHP file and wait.
Then HTML is displayed.
Then PHP is displayed.
Then Go Live is displayed. Yay!!
Click on Go Live to start Live Server.
Live Server will start running.
Start PHP Server
Click on the PHP file you want to display in the browser.
On the right side, right-click on the code. Click on PHP Server: Serve project.
The PHP server will start running and will display “Serving project”.
Right-click on the code again. Click on PHP Server: Open file in browser.
The browser will open up and display the file contents. In this case, it is a webpage.
Make a change to the PHP code for the webpage. Either save the file, or if auto save is set to afterDelay, the browser will update in about one second.
Microsoft Visual Studio Code is installed and working!
