Writing clean and readable code is essential, whether you’re working alone or with a team of developers.
While many factors contribute to code readability, one of the most important is consistent code formatting.
But here’s the problem: manual code formatting can be an absolute pain and very prone to error.
Tools like Prettier make formatting HTML, CSS, JavaScript, and other languages, so much easier.
Installing Prettier
Before proceeding, ensure that you have Node.js installed on your setup.
you might plant the latest version from theofficial Node.js downloads page.
It comes withthe node package manager (npm)built-in, which youll use to manage your Node.js packages.
After confirming that Node.js is installed locally, start by creating an empty directory for your project.
you’ve got the option to name the directoryprettier-demo.
Create anindex.htmlfile in the same directory asscript.js.
This works well whencontributing to open source.
Integrating Prettier Into Visual Studio Code
Using Prettier via the command line can be a pain.
Luckily, Visual Studio Code (VS Code) has a way built-in to do this for you.
Go to theExtensionstab in VS Code and search forPrettier.
Click onPrettier - Code formatter, install it, then enable it.
Go into your VS Code parameters by navigating toFile > Preferences > parameters.
In the search box, search forPrettier.
You’ll find a ton of options to help you configure the Prettier extension.
Typically, you could get by with the default controls.
Otherwise, everything is set to default, but you’re able to change it however you want.
To enable it, just search forformatonsaveand tick the box.
This runs the command to format the code anytime you change the file.
But you shouldn’t be wasting time formatting other peoples code!
To get around this problem, create a.prettierignorefile and include the termnode_modulesin the file.
you might also ignore files with a specific extension.
For example, if you want to ignore all HTML files, simply add*.htmlto.prettierignore.
One way is to add aprettierkey to yourpackage.jsonfile.
This file will allow you to do all sorts of customizations.
Let’s say you don’t like semicolons.
If you’re using Prettier, you probably wouldn’t want to use ESLint for formatting as well.
To use them together, you’ll need to install and set upeslint-config-prettier.
This tool turns off all the ESLint configurations for things that Prettier already handles.
Setting it to work with VS Code means its always within reach.
ESLint is a must-have JavaScript tool that goes hand-in-hand with Prettier.
It provides a ton of features and customization options that go beyond basic formatting.
Learn how to use ESLint with JavaScript if you want to be a more productive developer.
