How to Set Up Prettier in IntelliJ IDEA

Code indention affects the readability of a codebase. Your code should follow the same indentation rules throughout the project for consistency reasons.

Prettier is one of the most popular code formatter. Specifically, it supports JavaScript, JSX, Angular, Vue, Flow, TypeScript, CSS, Less, SCSS, HTML
Ember/Handlebars, JSON, GraphQL, Markdown, GFM, MDX, and YAML files.

Let’s now learn how to configure Prettier in IntelliJ IDEA/WebStorm to automatically format your code for you!

1. Install Prettier

Install prettier locally on your project by launching the following npm command in the IntelliJ embedded terminal:npm install –save-dev prettier

This command will add prettier to your project’s dev dependencies.

2. Install the IntelliJ Prettier Plugin

It is time to install the Prettier plugin in IntelliJ. Reach the “Settings” popup window by clicking on “File” > “Settings…”

Here, click on the “Plugins” menu option on the left, select the “Marketplace” tab at the top, and type “prettier” in the search bar.

Click on “Install” to install the Prettier plugin for IntelliJ. Then, click “OK” to close the “Settings” window.

If you have problems installing the Prettier plugin, follow the official IntelliJ guide on installing plugins.

3. Configure the Prettier Library

Now, you need a valid Prettier configuration file. For example, you can create a .prettierrc.json file in the root folder of your project and initialize it as follows:

{
  "trailingComma": "all",
  "tabWidth": 2,
  "printWidth": 120,
  "semi": false,
  "singleQuote": false,
  "bracketSpacing": true
}

As explained in the official documentation, the Prettier configuration file can be a JSON, YAML, TOML, or JavaScript file. This configuration file defines the rules Prettier will follow when formatting your code.

4. Configure the IntelliJ Prettier Plugin

Again, click on “File” > “Settings…” to open the IntelliJ “Settings” window. Type “prettier” in the search bar and select the “Language & Frameworks” > “JavaScript” > “Prettier” option.

You should now be seeing the following window:

If you followed the standard procedure above, IntelliJ IDEA should be able to automatically locate the prettier package. In other words, IntelliJ IDEA will automatically fill the “Prettier package” field for you.

Otherwise, click on “…” on the left of the “Prettier package” field and select the “prettier” folder in “node_modules” as below:

Click “OK” to close the “Select prettier Package Directory” popup window.

Now, mark the “On code reformatting” and “On save” checkboxes to specify the actions that will trigger Prettier.

This way, every time you launch the IntelliJ “Reformat Code” action code manually or through the shortcut, or save a file, Prettier will automatically format it for you.

If you want to learn more, see the run Prettier automatically on save official guide.

5. Prettier in Action

Since the IntelliJ Prettier plugin was configured to work on any .{js,ts,jsx,tsx}, prettier will automatically format any JavaScript, TypeScript, JavaScript/Typescript XML file for you.

Let’s see how this works:

After breaking the code indentation by pressing the “Tab” button several times, I used the “Ctrl + Save” shortcut to force IntelliJ to save the file and trigger the code formatting operation by prettier. As you can see, Prettier automatically indented and formatted the code.

Congrats! You just learned how to set up Prettier in IntelliJ IDEA. From now on, your code will always look cool!

Conclusion

Code indentation and formatting play a key role when it comes to readability. You want your code to look cool and be consistent throughout the project, and the “Reformat Code” feature offered by IntelliJ may not be the best solution. For this reason, you need a more effective code formatter, and Prettier is an opinionated code formatter. Here, you learned how to configure Prettier in IntelliJ to make it automatically format code for you.

Thanks for reading! I hope that you found this article helpful.