Tabs or spaces? Double or single quotes? Trailing commas and whitespace? It doesn’t matter, while you’re being consistent and using the same pattern throughout your code. However, getting warnings and errors about these small things can get pretty annoying pretty fast. That’s why you should use a code formatter and configure it to format a file as soon as you save it, and then you can take care of the important stuff. There are a lot of options out there but this week I want to talk about prettier, a light and simple tool that offers support to a lot of languages and most editors.

1. Install prettier in your project

npm:npm install --save-dev --save-exact prettier

yarn:yarn add --dev --exact prettier

After installing, create a json file to store your custom configurations:

echo {}> .prettierrc.json

You should also create a .prettierignore file for everything that you don’t want to format. You can use your .gitignorefile as a reference for this step.

2. Install the prettier extension in your editor

Search and install this extension on vscode:

You can configure it to format on save, which is really useful. For this, open the palette with ctrl shift P and go to user settings. Go to formatting and select option format on save.

3. Set up your format options

Now let’s come back to our prettierrc.json file and add our new configs. Prettier doesn’t have a huge amount of options, but that’s precisely the point — avoiding endless debates and optimizing time. For this example, let’s see how to set up tabs instead of spaces, single quotes, trailing comma and bracket spacing:

Use tabSize to define how many spaces should occupy a tab, and if you want you can use the option “parser” — but prettier automatically infers it from the input file path, so this isn’t super important. Check the documentation for the full list of options.

#web-development #programming-tips #code #junior-developer #javascript