Obsessed with React and teaching. I help people become Frontend Developers. Living with my fiancee and Yorkshire Terrier 🐶 in Poland.
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.
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
.prettierrcfile next to the
package.jsonfile 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):
.prettierignorefile 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.
Looking at the Cheat Sheet,
--save-devflag will add Prettier to
--save-exactflag 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:
.prettierrcfile 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.
.prettierignorefile works similar to the
.gitignorefile 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.
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.
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
"extends"array. Remember to put it last, so it gets the chance to override other configs.
Woof! It's an amazing tool to control git commands through the hooks, e.g. listen for
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-commithook and instead focus on the
pre-pushhook 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.jsonfile:And that's it! Every time someone will push to the remote repository, husky will run a
pre-pushcommand which executes pretty-quick on changed files.
When learning, you can never get enough. The following resources will help to expand your knowledge.
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!
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-quickcommand (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
Let's build a community that will help each other.