Developing for Magento 2 and LAMP in 2020 can feel… lackluster when compared to some of the newer JS stacks (think JAMStack and MEAN). That doesn’t mean that Magento 2 developers are left in the dust. In this post, I’m going to highlight some of the tools I use in my daily life when working on Magento 2 projects.
PhpStorm
PhpStorm was the tool of choice for most Magento developers long before Magento 2 was released. It has held up well thanks to continued upgrades and it’s vast plugin repository.
Recommended Plugins
- Magicento – This plugin saves you time (not as much time in Magento 2 compared to the Magento 1 version) by automating module creation, enhancing code completion, checking conflicts, and more. Make sure to enable this plugin after installing it. From there, you can use Option + M to view its context menu.
- Magento PhpStorm – The official Magento 2 plugin for PHPStorm created by Magento. This plugin helps by adding type hinting relevant to your XMLs as well as line markers referencing any plugins overriding functions in classes.
Things to configure
- Xdebug – While the plugins above help a lot with knowing what functions exist and what data you can expect to get from said functions, configuring Xdebug will save you countless hours and let you focus on coding instead of figuring out why things aren’t working. Something to note is that this plugin will slow down Magento 2 (a lot). Once you have Xdebug setup, you’ll want to get familiar with how to use it, here.
- URN Highlighter – Magento XMLs use XSD Schemas as Universal Resource Names (URNs). Configuring URN highlighting makes working with XMLs much easier by suggesting valid nodes and attributes relevant to the layout being worked on.
Useful functions
- Code Navigation (Command + Click) – In my opinion, the most important feature of PHPStorm (and most IDEs) is code navigation which allows you to easily move through your code. For example, holding command and clicking a function will bring you to the class and line that said function is declared allowing you to easily see what the code is doing without having to search through the code.
- Find In Path (Command + Shift + F) – Sometimes you need to search for a string (or regex pattern) throughout your whole project, this is when find in path comes to the rescue. It presents the results cleanly and with a preview of the section of code where the string can be found. You can also double click on a result and it will take you to the file and line of the result.
PhpStorm has a lot more to offer than I’ve listed here but this is a great starting point that will help you be a smarter and more efficient Magento 2 developer. Once you get more comfortable with developing in PhpStorm, I recommend setting up Xdebug to debug JS files, remote servers, and Magento ECG coding standards.
If you find PhpStorm to be too costly, VS Code is also a great free alternative with tons of plugins.
N98-Magerun2
N98-Magerun2 is the self-proclaimed swiss army knife for Magento developers, sysadmins and DevOps. It’s full of useful features that extend and improve Magento 2’s built-in command-line tools.
Useful functions
- Stripped Database Dumps – When working with production websites that have sensitive user data, it’s important to sanitize your database dumps. I find this to be one of the most useful functions of N98-Magerun. It also supports wildcards for table names to exclude. Here’s an example command that I use often:
n98-magerun2.phar db:dump -t --strip="your_custom_table_* @stripped @sales @trade @development" --compression="gzip". - Fast User Administration – From the command line, you can easily change Administrator user passwords and delete user accounts. Changing a user password is as simple as this:
n98-magerun2.phar admin:user:change-password [username] [password]. - Change Setup Versions – When creating modules that use CRUD (save data to the database) you have to create install and upgrade scripts. Rather than continually increasing your module version, you can use this command to downgrade the version listed in the database to trigger your module to be re-setup which allows you to more easily make changes to install and upgrade scripts:
n98-magerun2.phar sys:setup:change-version [your_module] [version] - Clear Static View Files – Regenerating static content can be time-consuming depending on your theme. n98-magerun2 speeds this process up by allowing you to clear your static view files for a specific theme so that you can then regenerate content for a specific theme rather than all of your themes. These are the commands you can use to achieve this:
n98-magerun2.phar dev:asset:clear --theme="your_theme" && bin/magento setup:static-content:deploy --theme Vendor/your_theme
As you can see, N98-magerun2 helps to automate common developer tasks. All of these functions can be achieved without N98-magerun2 but this tool makes it incredibly easy. On top of this, I usually use bash aliases to shorten these commands to a single word to make it even faster.
As with PhpStorm, this tool has many more features and even has plugins to extend its features but, this is a good starting point to help you work smarter.
Grunt
While slightly dated, grunt is still a great tool to use when developing on the frontend of Magento 2. Similar to n98-magerun2 this tool automates or simplifies common developer tasks. The difference being that Magento 2 comes with specific configurations for grunt.
Before you can use the commands below, you’ll need to configure grunt, refer to the official docs, here.
Useful functions
grunt watch– When correctly, configured (see above), this grunt command will automatically recompile your .css files from your .less files and reload those styles in your browser. This saves you a ton of time because you don’t have to make your changes, recompile your changes, clear your cache, then reload the browser to see them. It happens almost like magic. When you start working just rungrunt watch.grunt exec– In developer mode, you’re not required to recompile static content but I find sometimes my changes aren’t recognized. This command allows you to easily do this for just your theme using the following command:grun exec:your_theme
Other tools
- MageSpecialist DevTools – This tool helps you to understand which templates are being used when viewing your Magento 2. The information can be found in Chrome’s Developer Tools when you inspect an element – starting out in Magento 2 I found this tool especially useful until I better knew the templates. It’s very similar to the built-in template path hints but this tool doesn’t distort or break anything rendered on the front end. It’s a combination of a Magento 2 module and a chrome extension. The guide to set it up is here.
- Mage2Gen – This is an online tool that simplifies module creation by creating your modules skeleton so that you don’t have to. It’s also useful because it helps remove human error especially if you’re forgetful. It’s a much more in-depth module creator than the one that comes with Magicento and it’s also more visual. I tend to only use this tool for more complex modules but it can be used for smaller modules just the same. Many of these module creators exist with roughly similar features such as this one from Silk Software.
- Magento 2 UI Components Library – Magento 2 comes with a bunch of built-in UI components that will make your life easier as a developer. This documentation is built into Magento 2’s codebase, you can access it by viewing your_magento_root/lib/web/css/docs/index.html from your browser.
- Knockout JS – I personally love JS libraries like Knockout, React, Vue, and Node because of the performance benefits they bring to web applications. Knockout JS in Magento 2 allows for Automatic UI Refreshing using declarative bindings. It’s very useful on pages like cart and checkout where slow page loading can cause an increase in user abandonment. The following tutorials and documents are a great starting point if you’re new to Magento 2’s knockout implementation: Learn Knockout, How to write a page using Knockout JS (MageStore), Magento 2 Custom Knockout JS bindings.
Magento 2 can be a real monolith of a platform, especially if you’re new to it. Thankfully, the community behind the platform provides us with some fantastic tools to ease development.
If you enjoyed this post, please use the buttons below to share on social media platforms. If you have any questions about any of my posts, feel free to contact me using my contact form, here.
