Automatically Execute Bash Commands on Save in VS Code
“What if I could automatically run specific terminal commands for different kinds of files whenever I save?”
I recently got tired of writing HTML code. Perhaps I just decided it’s too verbose, damn repetitive, or I’m simply too lazy. Either way, I started searching for an HTML preprocessor I’ll use consistently in all my projects. I’d used a couple in the past on Codepen like HAML and Slim, but I fell in love with Pug and decided to use it for my projects.
Here’s the problem, though: Pug doesn’t have a file watcher extension to automatically compile the pug files to HTML on save in VS Code like the myriad such extensions available for SASS/SCSS.
I also experienced a similar problem when I was using EJS to create a mail template for emails to be sent on an API built with NestJS. I couldn’t test my EJS templates easily. I had to install the ejs-cli npm package and run the command each time I saved the code. For a person who got tired of simply writing plain HTML code, you can imagine how increasingly frustrated I felt each time I had to run the command to compile so I could test my changes — it happened a lot.
While thinking of a solution, I had a thought: “What if I could automatically run specific terminal commands for different kinds of files whenever I save? I would never need a file watcher extension again.” After a few seconds of searching for an automatic way to run terminal commands on save, I stumbled onto the Run on Save VS Code extension by emeraldwalk. In this article, I’ll walk you through setting up this extension to solve these problems.
Go to the settings.json File on VS Code
If you don’t already know how to, you can get there by going to File > Preferences > Settings or hitting Ctrl + ,(Cmd + , if you’re on a Mac). Then click the Extensions tab on the left side menu, look for the extension Run On Save, and click Edit in settings.json.
Set the Commands to Run
In the settings.json file, there’s an object containing the commands that the extension would automatically run whenever a file is saved. The best part is by using regex, you can set it to match specific file extensions. To solve the pug and EJS issue I mentioned earlier, we’ll just edit the settings.json file to look like this:
With these set in place, your files should automatically compile when you save without a hitch.
In addition to plain commands like this, the extension also provides some cool variables for making more fine-grained commands like commands that involve file names, containing directories, etc. A complete list of these variables can be found on the extension’s landing page right there in VS Code or in the link below if you’re too lazy to check.
Conclusion
It’s important to find ways to make work as automatic as possible and make our code editor that much more fun to live in. The possibilities of making such commands on save are endless, from small compiles like the ones covered here to automatic deployment and pushing to remote repositories on save. It’s limitless.
I hope you found this article helpful.
