It can get annoying when you're writing code and have to worry about indenting a line and putting semicolons at the end to make your code look cleaner. There's a way around that and it's called a code formatter. A code formatter parses your code and reprints it with its own rules. There are many code formatters out there but the one I'm currently using is called Prettier. It's a code formatter that works for many languages and editors.
Installation:
There are two ways that I know of to install Prettier in VS Code.
First Option -
Open VS Code and type the command Mac(Command + P), Windows(Ctrl + P) and paste the following command, and press enter.
ext install esbenp.prettier-vscode
Second Option -
Open VS Code and on the left side, you should be able to see five options and a settings option at the bottom left. You would want to click on the fifth option and that takes you to the extensions and package place in VS Code. You should then see a search on the top left. Type in Prettier in the search bar. You should see Prettier - Code Formatter as your first option. Click that and install it on the right.
Setting Prettier as your Code Formatter:
After you have Prettier installed, now it's time to set it as your code formatter. There should be a settings tab on the bottom left. Click that choose the settings options. There should be a screen that's popped up to the right. That's the settings page. You would then click on Text Editor on the left. Click that and scroll down until you see an option that says Default Formatter. Click the option right under that and scroll until you see the name, esbenp.prettier-vscode. Select that option.
Now that you've set prettier as your default formatter, you won't notice any changes until you've set prettier to format on save. On the Text Editor area where we found the place to set default formatter. You would want to click Formatting. This takes you the place where you can set prettier to format your code on save. There should be an option under Formatting that says Format On Save. Check that box and that is all.
Now that you've set Prettier as your default formatter and also make it format on save, you can now let Prettier handle the rest. For example,
This is your text editor before saving.
This is the result after saving.
See? Isn't this much better? It even adds a semicolon to the end of a line and all you have to do is save your editor. Now you can go and write code without worrying about formatting your text to look nice. Instead, Prettier will do it for you!
Top comments (0)