Obsessed with React and teaching. I help people become Frontend Developers. Living with my fiancee and Yorkshire Terrier 🐶 in Poland.
Discover Mentorship
Obsessed with React and teaching. I help people become Frontend Developers. Living with my fiancee and Yorkshire Terrier 🐶 in Poland.
Home/Blog/ Article - Autoformat Code With Prettier/
Home/Blog/Article - Autoformat Code.../
Image by Sara Torda from Unsplash

Autoformat Code With Prettier

Sep 27, 2020
5 min read

DESCRIPTION

Prettier saves a lot of time and automates code formatting. Learn how to integrate with it, ESLint, Husky integration, and recommended setup is also included.

Prerequisites

  • Node.js and NPM installed.
  • Terminal and Editor of your choice, I use iTerm and VSCode.
  • Create a project e.g. through CRA and connect it to git.
  • Best if you have at least Junior Frontend Developer knowledge, but everything will be explained step by step.

Cheat Sheet

1Run the following command in the terminal to install Prettier locally. Make sure you're at the root of your project, where you have a package.json file.
2Create a .prettierrc file next to the package.json file and add the following setup. (mostly defaults with an exception for quotes, you can experiment with what fits you the best by checking the documentation):
3Create a .prettierignore file with the following setup: (extend it if you have any specific files or directories in your project to ignore)
4Last but not least, Integrate Prettier with your Editor. For me, automatic formatting whenever I save a file works the best.
5For a more in-depth explanation and integration with ESLint and Husky, please read the full article.

Installation

Looking at the Cheat Sheet, --save-dev flag will add Prettier to devDependencies in the package.json file. --save-exact flag will install an exact version rather than using npm's default semver range operator.
For the purpose of this article, npm is used, but personally I prefer yarn over npm, and the command to install Prettier with it would be:
The .prettierrc file is not the only possible place for your configuration. Check out the documentation for different options. Default settings are well thought, thus I only added one custom override.
The .prettierignore file works similar to the .gitignore file but in the context of which files, Prettier should format. It's helpful for the Prettier CLI and your Editor to omit the formatting of the files and/or directories (e.g. node_modules, package.json).
You could have a keyboard shortcut in your Editor to auto-format code and execute it manually whenever you need it. You could, but I'll try to explain why you shouldn't 😅. I use Prettier a lot and autoformatting became almost invisible to me. It feels so good to write code and don't bother with formatting at all, I often save my file with Command + S (it's for Mac, on Windows it would be Ctrl + S) shortcut which refreshes the latest changes thanks to Hot Reloading ( in Webpack, Parcel, etc.) and yes, automatically formats my code very often. I recommend that approach, in no time you will love it.
Let's learn how you could use Prettier for more exciting things and what to avoid when integrating with other tools.

Integrations

Use Prettier for code formatting concerns, and linters for code-quality concerns as stated in the documentation. In other words, Prettier should add a semicolon at the end of the line, break a long line into multiple ones, and linter should catch potential bugs, e.g. highlight using a variable that is not declared.

ESLint

When using both ESLint and Prettier, they might clash, luckily eslint-config-prettier comes to the rescue, and turns all off the conflicting/unnecessary rules. Let's install it first by executing the following command:
Then, in the .eslintrc file add "prettier" to the "extends" array. Remember to put it last, so it gets the chance to override other configs.

Husky

Woof! It's an amazing tool to control git commands through the hooks, e.g. listen for git commit or git push. You already guessed it, we can add a hook to automatically run Prettier in order to have our code properly formatted, always. Just in case some developers will have their own opinion on Auto-format code locally, but in the end, code should always have unified formatting rules before pushing to the remote repository.
There is a mention about lint-staged in the official documentation, but this tool might be a bit of overkill for starting, I'll do it a bit differently. It's used to optimize the hook speed by affecting only changed files, the ones that are staged in git, but it can also cause unwanted behavior. I'll use pretty-quick to run Prettier on changed files instead.
Let's start by installing the following libraries:
There is a lot to consider when properly configuring the automation of tools, but I wouldn't force too much on the pre-commit hook and instead focus on thepre-push hook to allow more flexibility.
Next, add a new property to the package.json file:
And that's it! Every time someone will push to the remote repository, husky will run a pre-push command which executes pretty-quick on changed files.

Resources

When learning, you can never get enough. The following resources will help to expand your knowledge.

Closing Notes

In my honest opinion, automating manual work is exciting, but also challenging. The entire process needs to be well thought and discussed with all developers in the team. If you're working alone, Prettier will be a great addition.
I prepared the list of thoughts based on my experience. I hope it'll be useful!

Final Thoughts

1When integrating Prettier in the existing project, pretty-quick could solve the headache of formatting an existing code, make sure you've ignored all files that shouldn't be formatted and just run pretty-quick command (e.g. through npm script) to format the entire codebase.
2It's hard to decide on which git hook particular tool should be executed, don't force too much on pre-commit and focus more on pre-push.
3When starting a new project, always configure automation tools first, such as ESLint, Prettier, Husky, Jest, etc.
4Talk with other developers if not working alone, everyone has a different opinion and unique code style, but it's good to set some common rules and work them out together.
Big thanks for reading the article, you're awesome! 🙇‍♂️
You can also find me on:
Thanks for all the support. ❤️
THE GUIDE TO BEAT FRONTEND INTERVIEW
From time to time, I'll send you messages about new blog posts, knowledge pills, and mentoring promotions. Only valuable information, no spam included. You can unsubscribe at any time.
slack
Let's build a community that will help each other.
spread the word
You don't need to, it's okay...