How to Level Up and Use Auto Formatting to Do Less Work
One mistake that I see often with junior developers is that they are constantly flying around their code with arrow keys, hitting indent on every line and lining up whitespace. This is one of the worst uses of time for a developer. Especially when modern code formatters and VSCode work so well together, it makes no sense to be manually formatting code files.
Today I am going to show you how to setup Prettier with VSCode to auto format on save like the Gif showed above. Prettier is an awesome code formatting tool, and an even more awesome VSCode extension, that works with a half dozen or so languages out of the box. These include HTML, Javascript, Typescript, and many more.
I’m currently developing in Ruby, and it is not supported by default. I will be giving prettier the ability to understand and format Ruby Code by installing a plugin. There are many plugins out there for languages besides ruby and this tutorial should apply generally for all of them.
First we are going to setup the Prettier extension for VSCode. Head on over to this link or search for “Prettier” on the extensions tab.
Once installed, this allows you to setup an awesome development pipeline with two awesome VSCode features: Auto Format on Save and Auto Save (on focus change). Each time you click out of an editor window, the file will save and be formatted. Each time you switch files or run your code, Prettier will first automatically do its magic, formatting the file as you develop and making smaller individual changes to the formatting that you can follow easier.
This means that as you code, you don’t even have to worry about indentation, or even if certain statements should be single-line or multi-line. Prettier has tons of settings to configure, its own article in it’s’ entirety, but the main features I find appealing are whitespace control (not having too many new lines), indentation control (making sure code lines up vertically), and length control (auto-wrapping code, strings, and comments that are too long).
In order for prettier to support languages besides the defaults, one would have to install a prettier plugin for this. In order for it to work with the Prettier in our VSCode, we will have to install in the Prettier extension directory.
First, head on over to Prettier.io and find which plugin you would like to install. There are also tons more documentation here about Prettier and it is a great resource.
In order for our plugins to work with the installation of Prettier in VSCode, we will have to go about using NPM to install our plugin. NPM is a package manager for Node.js programs, similar to bundler in ruby. Go ahead and source a terminal to your VSCode extensions directory. The directory can be found by opening the command palette (Ctrl/Cmd-Shift-P) and typing open extensions folder. Then navigate to the Prettier directory. This will look something like this: esbenp.prettier-…….
As you may have seen from the picture above, our last steps are just to install the plugin using NPM and then rebuild the plugin.
And we are done! Next just hard reload VSCode and prettier should now be working for ruby files. You can change Prettier’s preferences, as well as turn on auto format on save under he VSCode settings window. Another neat feature is that in the bottom right corner, prettier will let you know when the syntax in the file is valid ruby, and display a hazard sign when it can’t be formatted (invalid syntax).
