What Is Prettier and How Do I Use It?

To put it simply, Prettier is a code formatter. The reason we format code is to make it readable, not only for others, but for yourself as well. Readable code is workable code and you can make your code easy to work with if you format it appropriately. The problem with formatting your code manually is that not only is it error prone, but it’s tedious and time consuming. Using a tool like Prettier can save you time, and prevent errors in your formatting. Your code will be more legible and you’ll have an easier time navigating your code if you haven’t looked at it in a while. You can even set up Prettier in VSCode to format your code whenever you save it. Configuring Prettier is not always a straight forward process. In this article I’m going to show you how to set Prettier up in VSCode to make your coding life easier.

Estimated reading time: 3 minutes

Prettier VS Code Extension

First, open up your VSCode editor and navigate to the extensions tab then search for Prettier like this:

Install it and then navigate to your Code > Preferences > Settings page.

Select the Open settings Json button as shown below:

Set Prettier as your default formatter

Paste this following code below as a top level line setting in settings.json

"editor.defaultFormatter": "esbenp.prettier-vscode",

Format Code On Save with Prettier

Check your settings.json file for the following setting. If it’s false, set it to true. If it’s not in your settings.json, paste it in as a top level line.

    "editor.formatOnSave": true,

Format your JavaScript on save with Prettier.

You can paste this code below in your VSCode settings.json file if it’s not already in there:

    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },

Format your JSON with Prettier

You can use Prettier to format your JSON on save by ensuring this is in your VSCode settings.json file as well:

    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },

To format your CSS;

Make sure this Prettier setting is in your settings.json file:

    "[css]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },

You can also format your SCSS code.

Set Prettier as the default formatter and to format on save in your settings.json file like so:

    "[scss]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": false,
    },

Some other cool settings to check for when it comes to Prettier are

Set your JSX formatting for React projects

    "prettier.jsxBracketSameLine": true,
    "prettier.jsxSingleQuote": true,

Want to find problems in your JSX and JS code as well? Check out how to use ESLint to find errors while you’re coding.

Handle Semi-colons automatically

In the VSCode -> Prettier settings, you can check this setting below to add a semicolon at the end of every line.

Unchecking this box, or setting this setting to false in your settings.json file will ensure that semicolons won’t be automatically set at the end of a line of code.

    "prettier.semi": false,

Find out more ways to make your coding life easier here.

Conclusion

Well, that’s it. If you followed these instructions when you save any CSS or SCSS or JavaScript file, you should see your code format itself once you hit save. Hopefully these prettier configurations in your VSCode will make coding a little, or a lot easier!

Photo by Nick Karvounis on Unsplash