How to use Prettier to automatically format your code to reduce formatting differences

From working on different projects created by different teams and colleagues you may have seen different code formatting styles which differ between projects. It could be having semi colons at the end of each line, to the tab vs spaces rules, and how many spaces a tab equals to. 

These sort of things should be agreed at a team or company level to improve the developer experience when colleagues use various projects within the business. 

This post is going to go over adding prettier to project so you format your code. In this example I will use a NextJS project but it should be easily adaptable to any project that requires prettier. 

Installing Prettier

As you know with the npm registry, installing packages is very easy and prettier is not any different.

To install prettier run the following command 

If using yarn then use the yarn equivalent (yarn add prettier)

npm install prettier@2.x

Locked to major version v2 which this post is written forever how you may be able to use the latest once it is available 

Setting up the Required Files

Similar to eslint and other tooling files, prettier allows you set up an "RC" file which prettier will read from for project specific configuration.

Firstly, create the RC file ".prettierrc.js" at the root directory and add the following

// .prettierrc.js

module.exports = {
    arrowParens: 'avoid',
    singleQuote: true,
    semi: true,
    bracketSameLine: true,
    trailingComma: 'all',
    tabWidth: 4,
    endOfLine: 'auto',
};

What does the configuration shared do?

The configuration I have shared does the following

1. Ensures all javascript/typescript code has a trailing semi colon (semi)
2. Detects trailing line on the end of each file and maintains existing line endings (endOfLine)
3. Removes unnecessary paranthesis from anonymous function calls if it isn't required (arrowParens)
4. Ensures all strings are single quotes instead of double quotes (singleQuote)

More can be found at https://prettier.io/docs/en/options.html

How can I get Prettier to ignore certain files?

Forcing prettier to ignore certain files is easy, create a ".prettierignore" file at the root directory

# .prettierignore

.next
node_modules
.env
public

As you can see because I am using a NextJS project I have specifically ignored ".next", "node_modules", ".env", and "public" folder as these are either files I don't want prettier to run against or generated files from NextJs that being formatted does not make sense. 

Running Prettier

To run Prettier the quickest way is to create a script command inside of your package.json

# package.json (Inside Scripts)

"prettier": "./node_modules/.bin/prettier --write . --fix",

Adding the following command will target the prettier file added via Node Modules.

It will also do the following:

• Will be able to write to the files and update them due to the "--write" argument
• Will target all files wherever ran due to the "." package. However, ".prettierignore" will be abided by. 
• Will automatically fix any issues it can automatically fix due to the "--fix" argument. 

 

Once added all you need to do is run "npm run prettier" and your project will now start formatting code. To simplify this you could add git pre push/commit hooks to automate it so all code that is pushed up abides by the prettier rules.