How to Set Up Prettier in IntelliJ IDEA
Tags: javascript, programming, softwaredevelopment, tipsandtricks
Published: 2024-01-19 21:29:32

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

[Prettier](https://prettier.io/) 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

![Launching the prettier installation command in IntelliJ](https://writech.run/wp-content/uploads/2023/08/1MwkxGH7yx2X0j-oO1twEBQ.png)

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…"

![The IntelliJ ](https://writech.run/wp-content/uploads/2023/08/image-50.png)

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

![Searching for the Prettier plugin](https://writech.run/wp-content/uploads/2023/08/image-51.png)

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](https://www.jetbrains.com/help/idea/managing-plugins.html#install_plugin_from_repo).

## 3\. Configure the Prettier Library

Now, you need a valid [Prettier configuration file](https://prettier.io/docs/en/configuration.html). For example, you can create a `.prettierrc.json` file in the root folder of your project and initialize it as follows:

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

As explained in the [official documentation](https://prettier.io/docs/en/configuration.html#basic-configuration), 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:

![The Prettier configuration window in IntelliJ](https://writech.run/wp-content/uploads/2023/08/image-52.png)

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:

![Selecting the folder where prettier is located in](https://writech.run/wp-content/uploads/2023/08/image-53.png)

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.

![Note that the ](https://writech.run/wp-content/uploads/2023/08/image-54.png)

This way, every time you launch the IntelliJ "[Reformat Code](https://www.jetbrains.com/help/idea/reformat-and-rearrange-code.html)" 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](https://www.jetbrains.com/help/idea/prettier.html#ws_prettier_run_automatically_in_current_project) 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:

![The Prettier auto-formatting code operation in action](https://writech.run/wp-content/uploads/2023/08/1_pI-MRw3s9VydEIJ3B7QmEga.gif)

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.
  
***
_The post "[How to Set Up Prettier in IntelliJ IDEA](https://writech.run/blog/how-to-set-up-prettier-in-intellij-idea-a9560a06f4bd/)" appeared first on [Writech](https://writech.run)._