Image by Sara Torda from Unsplash
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.
- 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.it should require an extensive brainstorming with all the developers what the flow should be and when to run tests, linters, formatters, etc.
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. ❤️
