Visual Studio Code Support
This plugin allows you to use Microsoft’s evolutionary code editor Visual Studio Code. To get started, you’ll want to download it from https://code.visualstudio.com and be sure to follow our Installation instructions below.
Microsoft has recently made leaps and bounds into open source code development and that’s been reflected in their latest acquisition of GitHub and their absolutely free and open source code editor known as Visual Studio Code. It has solid features that have been refined from their premium flagship product that debuted over two decades ago. Only now it is free and better than ever.
Visual Studio Code is based on Electron; the same foundation used in the popular GitHub Atom editor. Like the Atom editor, Microsoft’s editor has been quickly adopted by open source developers and features a wide set of plugins and community driven enhancements. We’ve found it more polished and speedy compared to Atom and feel that it’s one of the best cross platform editors that just happens to be free to use. To make things even easier, we’ve developed a plug-in for DesktopServer to automatically configure your WordPress website projects for use inside Microsoft Visual Studio Code.
You will need to already have DesktopServer installed and will need to install both the Visual Studio Code Support plug-in and Microsoft Visual Studio Code itself to effectively work on your website projects.
Install Visual Studio Code Support Plug-in
Before being able to open your website projects, you will want to download and install the DesktopServer Visual Studio Code Support plugin. This design-time plugin will automatically create the project files for opening your new and existing WordPress websites in Visual Studio Code. You can download the plugin at:
https://github.com/ServerPress/visual-studio-code-support/releases
Unzip the file and move the “Visual Studio Code Support” folder to your “ds-plugins” folder; located at c:\xampplite\ds-plugins on Windows or /Applications/XAMPP/ds-plugins on Mac. Then fire up DesktopServer and use the first option to “Stop or restart… services”, followed by ensuring the checkbox for “Visual Studio Code Support” is checked.
Click next to start services. Now any websites you create, copy, or import will have automatically have Visual Studio Code project files created for them. Likewise, any existing sites that you have created prior can have their own preconfigured Visual Studio Code created when clicking the “VS Code” button on your localhost page.
Install & Configure Visual Studio Code
To install Microsoft Visual Studio Code, download and install it for your computer platform at:
Installation is easy; simply run the installer on Windows or drag the downloaded program icon to the /Applications folder on Macintosh.
There is one easy additional step to make editing your WordPress files more convenient in Visual Studio Code; simply install the “PHP Extension Pack”. You can install extensions by selecting the Extensions pull down menu; located under the Code -> Preferences -> Extensions menu on Macintosh and at File -> Preferences -> Extensions on Windows. Type “PHP Extensions Pack” in the search text field and locate the extension author by Felix Becker. Click the install button and you’re done.
Lastly, be sure to configure the Visual Studio Code Terminal feature to fully leverage using Visual Studio Code with WordPress. Instructions are in the next section.
Troubleshooting Visual Studio Code Support
Here is a list of known issues using Visual Studio Code with DesktopServer along with their common resolutions and/or work arounds. You can also check our GitHub issues list to review any new/breaking issues. Please do not use the issues section for general support questions; as it is intended for bug submission/tracking and/or feature requests. General questions should be referred to support at ServerPress.com.
Cannot validate because no PHP executable is set.
The DesktopServer server plugin sets the PHP executable on a per-project basis; but if you wish to use Visual Studio Code to edit arbitrary PHP files outside of your project, Visual Studio Code won’t be aware of which PHP interpreter to use. Macintosh systems come with PHP built in as default, but Windows does not have a native PHP interpreter. You can use the DesktopServer PHP executable for all your PHP editing needs by setting the path; here is how:
- Click on the pull down menu for File -> Preferences -> Settings
- Type “PHP Executable Path” in the Search Settings textbox
- Click “edit in settings” and ensure the following JSON keys are set:
{ "php.validate.executablePath": "c:\\xampplite\\php\\php.exe", "php.executablePath": "c:\\xampplite\\php\\php.exe" }Be sure to save the settings.json file.
Exception has occurred. Notice: Constant WP_DEBUG already defined
This is a known compatibility issue that can occur if the Debug and Trace plugin is activated. To workaround this issue, simply deactivate the plugin using DesktopServer’s first option to “Stop or restart… services”; under the “Enable Developer Plugins” uncheck the “Debug and Trace” item in the listbox.
wp: The term ‘wp’ is not recognized
bash: wp: command not found
Powershell appears instead of bash
This issue can occur if you do not click the “Allow” button in the notification dialog followed by restarting the terminal instance. This is described in the Using Terminal Features section above. Use the notifications icon in the lower right hand corner of Visual Studio Code to review any notifications and scroll to the bottom to locate the “Allow” button.
Clicking the “VS Code” button opens a blank page
Visual Studio Code fails to appear when clicking “VS Code” from the localhost page
This issue occurs if Visual Studio Code is not assigned as the default editor for the ds.code-workspace file. This should have occurred during installation. You can create the association on Windows by locating the ds.code-workspace file and double clicking it from within Explorer. Locate your website files for a given project (aka the site root folder). By default this would the location at:
c:\Users\[ username ]\Documents\Websites\example.dev.cc\.vscode\ds.code-workspaceWhere [ username ] is your Windows login name and example.dev.cc as your project’s domain name. After double-clicking the ds.code-workspace file, Windows will prompt you for the application to open the file up with; be sure to specify Visual Studio Code and select the checkbox for “Always use this app…”.