There’s a new plugin available for DesktopServer users that makes WordPress code editing and development easier than ever. It 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.
My Website: Get Bunifu Framework 20% Off Use coupon kimtoo: https. Install via Extension Marketplace. Open Command on Visual Studio Code (Ctrl+Shift+P on Windows or Cmd+Shift+P on Mac/OSX) ext install wordpress-snippet. Wait until install complete and restart VS Code. Install by Packaged Extension (.vsix) You can manually install an.
Background
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.
How to Install
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:
Unzip the file and move the “Visual Studio Code Support” folder to your “ds-plugins” folder; located at c:xamppliteds-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.
Using Visual Studio Code with WordPress
Now that you have Visual Studio Code installed and the DesktopServer Visual Studio Code Support plug-in activated; it’s time to fire up your web browser and visit one of your websites in Visual Studio Code. If you haven’t created a WordPress website yet, just click through DesktopServer’s incredibly easy interface to create an example WordPress website. [link to Getting Started with DesktopServer steps 1 – 10] Next, click the “Sites” button in DesktopServer or open your favorite web browser and visit the http://localhost page. If everything is installed correctly you should now see the “VS Code” button next to your listed websites.
Launching Visual Studio Code
You can open up your WordPress project by simply clicking the “VS Code” button next to your listed website. Click the purple button and Visual Studio Code will automatically open up and pop you right into your website’s project folder. The editor should list all of your files that make up your WordPress project on the left hand side. Double click any PHP code file to have it open up inside Visual Studio Code’s text editing area.
The editor includes dozens of advanced features that make editing your code easy. “Intellisense” provides auto-completion suggestions and PHP syntax checking to reduce typos and accelerate code writing. “Code folding” helps simplify blocks of code and ease navigating large files (note lines 3-7 are temporarily hidden in the screenshot below). Formatting and keyword coloring enhances readability of comments and code.
If Visual Studio Code fails to start when you click the purple button; you will want to check out our Troubleshooting section at the end of this document.
Using Terminal Features
Visual Studio Code gives you integrated access to the DesktopServer Command Line Interface (DS-CLI) without having to leave the application or manually configure additional settings. You have full access to powerful command line tools such as WP-CLI, Composer for managing PHP packages, the NodeJS interpreter and a whole host of cross platform compatible scripting. To use the Terminal for the first time, simply click the pulldown menu for Terminal -> New Terminal followed by clicking the “Allow” button on the “workspace modification” dialog.
You will need to close and re-open the terminal window for changes to take effect; this is only important the first time you use the Terminal window in a given project. To close the window, use the “X” in the window’s upper right corner or simply type “exit” in the terminal window. Re-opening the terminal window will present to you a proper bash command line shell with the current working directory that is associated with your project. From here you can execute commands such as “wp” to view the WP-CLI help prompt.
The git command line is also included as apart of the pre-configured bash command line on Windows. On Macintosh, you will simply need to type “git” and press enter to automatically install the git command line interface. A prompt will guide you with the option to install the larger, Apple x-code development system. Xcode is not needed to develop effectively with WordPress and Macintosh users may simply “Install” to just obtain the git functionality.
There are lots of resources for working with the git command line tool; here are two that cover basics:
Debugging PHP Code
Debugging with Visual Studio Code and DesktopServer is incredibly straight forward. If you are new to the debugger, we can walk you through the basics of this incredibly handy programming tool. Normally the web server will “read” PHP files line by line and execute each instruction written by the author; the position (which line number) that is being read is referred to as the “instruction pointer”. The instruction pointer is not unlike a needle on a record, playing back musical notes one-by-one. With the debugger, we can “pause” playback and examine which notes have been played and their values.
Let us begin by opening up your WordPress project for a given website by clicking the “VS Code” button on your http://localhost page. With your files listed on the left-hand side, select a given file such as the file “wp-blog-header.php” from the site root folder.
Within any PHP file you can place a breakpoint on a given line number. In our example above, we place a breakpoint on line 16 of the file wp-blog-header.php. Place the breakpoint by clicking the empty area just left of the line number. A red dot will appear that represents a “stop sign”. This is where the instruction pointer, the execution of the PHP script, will halt and allow us to examine WordPress’ internal variable values and see program flow. Next, switch the editor to debug mode by clicking the “debug” icon on the far left hand side. This will replace the file view windows with four different windows with the following titles:
- Variables – see all of your project’s global variables and their values
- Watch – a list of explicitly defined variables that we can add or remove to see their values
- Call Stack – a “breadcrumb” list of all the files and functions that have been executed
- Breakpoints – a list of breakpoints that have been set
The contents of these windows will be empty until you start debugging. Start debugging by clicking the green “play” button at the top left by the “DEBUG” label. You may also initiate debugging by one of the following other methods:
- Selecting the pull down menu for Debug -> Start Debugging
- Clicking the green debug arrow button
- Pressing F5 on the keyboard
When debugging starts, your web browser will launch and attempt to take you to your WordPress website’s home page. However, execution will stop because we have set a breakpoint on line 16 inside the file wp-blog-header.php. This will result in your web browser “hanging” on a blank white page awaiting for the web server to deliver the page. Switching back to Visual Studio Code will reveal that execution has stopped on line 16 with a solid yellow bar highlighting the line number.
In addition, the left sidebar windows will populate; namely “Variables” listing all the global variables that are being used. You may examine the contents by clicking the tree-control like structure to reveal variable values. Scrolling to $wp_query -> posts will reveal the value of “null” in the Variable window.
With line 16 highlighted, you should see a small floating window with following buttons:
- Continue – to continue “reading” past the breakpoint and execute subsequent lines of code, stopping on any additional breakpoints (if present).
- Step Over – to continue to the next line of code, processing any additional files or functions but not “stepping through them” line-by-line.
- Step Into – to continue like step over but automatically open and/or reveal additional lines of code and functions line-by-line.
- Step Out – to continue back up the list of files and/or functions in the “breadcrumb” like list of the Call Stack window.
- Restart – stop execution and restart the debugger.
- Stop – stop execution and stop debugging mode, clearing all debug windows.
Visual Studio Wordpress Development
Use the “Step Over” button or press F10 on your keyboard to step over line 16 which reads:
The wp function is the heart of the WordPress engine and is responsible for retrieving the post data from the database. After stepping over using F10, noticed that the Variable window will update and show that the formerly “null” value for $wp_query -> posts will now populate with the contents of the first post. In the default installation of WordPress, you should see the “Hello World” post, it’s date, title, etc.
You can continue debugging and finish delivering the web page to the web browser by using the Continue (pressing F5, the Continue button, or using the pull down menu for Debug -> Continue). Without any other breakpoints set, the web page should delivered to the web browser and you should see the homepage complete. Congratulations! You’ve just successfully used the debugger in Visual Studio Code. You can stop debug mode altogether by clicking the stop button.
Visual Studio Vs Wordpress
Now you have a functional development editor that is above and beyond any plain text editor. You’ve also gotten a taste of several powerful features with many more to help you with your WordPress development and design needs. Enjoy!
Troubleshooting
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:
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:
Where [ 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…”.
Visual Studio Wordpress Download
As the Founder of ServerPress, LLC and creator of DesktopServer, Stephen J. Carnam continues to invent new ways to improve developer Workflow through technology. As a huge Advocate of Open Source Software, he promotes Creativity, Community and Collaboration.
Wordpress Visual Studio Code
This is a collection of WordPress snippets and autocompletions for Visual Studio Code
FeaturesAutocomplete for: Install instructionsInstall via Extension Marketplace
Install by Packaged Extension (.vsix)
Changelogs
Special thanks
|