Visual Studio Code for Moodle and other PHP developers
Last month, we covered some useful tools for Moodle development. This month, we will go a little deeper, specifically in creating your ultimate IDE using Visual Studio Code. VS Code, as it is commonly referred to, is a very popular, flexible and well-supported cross-platform code editing tool found in many Moodle developers’ tool chests. One of its greatest strengths is the ever-increasing number of extensions created and maintained by thousands of developers around the world. Don’t let the free price tag fool you. Over 30,000 extensions enable you to take this code editor to the next level, making it a free, open source and lightweight alternative to commercial IDE products such as PhpStorm by JetBrain. This month we look at some of the extensions to help you level up your installation of VS Code and make Moodle development a little easier.
For Moodle-Specific Coding
While most of the Visual Studio Code extensions mentioned in this article will help enhance your development environment, the following two are specifically made for Moodle development. A quick search of the Visual Studio Marketplace will reveal extensions made specifically for other PHP development environments such as Drupal, WordPress, Laravel and more.
Moodle Snippets – Make your life easier as a Moodle developer using these snippets. Imagine creating a whole Moodle page skeleton in seconds by simply typing the word “mpage”. This extension also includes skeletons to create Moodle form fields, a Table SQL, a version.php file and notifications.
Moodle Pack – This extension adds Moodle-specific snippets, autocompletion, Emmet and syntax to your VS Code editor. It includes snippets for the common $CFG, $DB, $OUTPUT, $PAGE, $USER objects as well as functions for Moodle forms and moodlelib.php. There are even several snippets to help you code your Mustache and XML files.
For General PHP helpers
Whether you are coding in Moodle or some other PHP-based application, these tools can significantly enhance your development experience.
PHP Debug – Old coders programmed on punch cards but modern developers love their debugging tools. Xdebug is one of my favourites, especially when trying to sift through over one million lines of PHP code in Moodle LMS. Installation is a little more involved than simply installing this extension. However, when configured correctly in VS Code and on your web server, this tool enables you to set breakpoints (where the debugger will pause), trace through the execution of PHP code in your theme, plugins, Moodle core code, etc. and watch the values of properties and variables as you go. If you have never used a debugger before, you are in for a real treat my friend.
PHP DocBlock – Finding it a pain to add PHP documentation blocks to your code? Do you avoid commenting your code? Once installed, simply add /** in a blank line right above your function, method or class, press ENTER and see half the work will be done right before your very eyes.
PHP Snippets from PHPStorm – Whether you are coming from PHPStorm or not, these snippets will speed up your code development. By the way, there are extensions available to remap keyboard shortcuts if you are used to other editors. Just keep in mind that you may no longer be able to follow tutorials on using VS Code if you do this. Did you know? You can view a list of all the keyboard mappings in VS Code by going to File > Preferences > Keyboard Shortcuts.
Better Comments and Todo Tree – Better Comments is great at highlighting different types of comments in your code. For example, I like to have my TODOs stand out more than general comments in my code. What it lacks is a way to easily see a list of all my TODOs and navigate them. That’s where Todo Tree comes in. Todo Tree can also highlight some comments like Better Comments but the latter is so much better and more flexible which is why I use both.
Rewrap – This extension can save you a lot of time by reformatting your comments to the right length per line.
Thunder Client – If you develop Moodle web services or REST endpoints, hopefully, someone has introduced you to Postman. Thunder Client is similar to Postman but integrated into VS Code.
Managing and GITting Your Code Online
If you use Git, you owe it to yourself to look into these two tools.
GitLens – Oh how I love GitLens, especially being able to see who to blame for coding decisions right in the source code. Ok, I don’t love it so much when my name appears beside the line of code but we are not going to talk about that today 😉. But seriously, it is not so much who to blame as much as understanding what issue they were trying to solve or what feature they were adding when they made those decisions. If the developer is still around, you can even talk to them about it. When you understand why a developer made certain choices in their code, hopefully, you won’t go re-introducing the bug that was previously fixed. That said, there is so much more to Git Lens that you may be hard-pressed to only find one useful feature in this extension. I could write a whole article just listing its useful features.
Git Graph – What a web we sometimes weave with git branches. This extension gives you a visual representation of your branches, where they branched off and where they were merged. It even includes tools to perform many Git actions, view commit details, compare commits and more. It has some overlap with GitLens but you may find it well worth installing both of these extensions. If you only want to install one, go with GitLens.
For Mustache Files
Mustache – Reveal what you missed with syntax highlighting for Moodle’s .mustache files.
For HTML
Auto Rename Tag – This extension helps you by changing the corresponding opening or closing HTML tags for you. For example, if you change a <ul> to an <ol>, the closing HTML </ul> will automatically also be changed to </ol>. Works in Mustache and PHP files too.
For README.md and Other Markdown Files
Markdown All in One – This extension adds keyboard shortcuts, a table of contents generator, auto preview and more for all your markdown needs.
More Visual Studio Code Enhancements
Duplicate Selection or Line – When I first started using Visual Studio Code, I had been using Notepad++ for many years. One keyboard shortcut that I really missed was pressing Ctrl + D to duplicate the current line. Of course, VS Code has its keyboard shortcut for doing this (Ctrl + Shift + D). However, since I also still use Notepad++, I installed this little extension for consistency. If you are used to phpStorm, you will appreciate this one too.
Sort Lines and Sort Lines by Selection – These two extensions enhance VS Code’s sorting ability. Sort Lines works as you might expect but with several additional options such as case insensitive and line length sorting, while Sort Lines by Selection lets you sort lines by whatever text you selected in each line.
Numbered Bookmarks – This little puppy enables you to bookmark multiple lines of code making it super easy to jump around multiple sections of your source code instantly.
You may be wondering at this point “Do I really need all of these?” Of course not. This is just a curated list of some of the extensions that I use. Every developer will have some different ones to address his or her own needs. I encourage you to install and explore each of these one at a time in order to get to know what works for you.
Did I miss your favourite VS Code extension? Which do you find helpful in your Moodle development process? Please share in the comments.
See you next month!
Michael Milette
- Moodle LMS Email Deliverability in 2024: Best Practices, Authentication Standards and Troubleshooting – 23rd February 2024
- Terminology for Those New to Moodle LMS – 20th January 2024
- Enhancing E-Learning in Moodle LMS with an AI Chat Block and FilterCodes – 20th November 2023
Not being and software developer (like most people who read ElearningWorld) this is great background / overview material, to ohelp me understand the tools and techniques that developers use when creating plugins etc. 🙂