Mini-Tut: Setting Up Prettier in RubyMine

Recently at work, I spent some slack time getting Prettier setup and working in RubyMine. I thought it is an excellent opportunity to write up a quick guide to gather everything I needed to do to get it to work on a project I was working with.

Let's dive in!

Installing RubyMine Prettier Plugin

To get started, you will need to install the Prettier plugin from the plugins marketplace. Open up your Preferences > Plugins > Marketplace on the top bar. Search Prettier and install it.

Installing Prettier Package

There are two paths you can take from here for installing Prettier:

1. Installing Prettier globally
   1. You can skip to number 2 if you can install Prettier directly as a project developer dependencies
2. Installing Prettier locally to project

Installing Prettier Globally

In certain situations, you might want to have Prettier installed globally or cant install Prettier on a project you are working with. Don't fret; it's easy enough to install it globally and have RubyMine use it just fine.

First, install Prettier globally:

    npm install -g prettier

If you are using Yarn in your project, I found that you still need to use npm to install prettier, or else RubyMine will not find it in later steps.

Installing Prettier locally to project

Let's install Prettier locally to the project! Use the appropriate command if your project is using NPM or Yarn:

    npm install -D prettier

    yarn add -D prettier

Sweet, now you need to tell RubyMine where to find Prettier.

Configuring RubyMine

Next, you need to go back to RubyMine so you can tell it where Prettier is. Go to Preferences > Language & Frameworks > Prettier. There will be two drop-down fields, one for selecting the version of node your project is using, another for selecting where Prettier is.

Here you will select the global or local version of Prettier to was installed. RubyMine will go and find Prettier, and you just have to make sure the correct one is selected.

In the screen capture below, you can see a selection for the globally installed version of Prettier for my selected node version and the one local to my project

Now you should have Prettier working! Go to a JavaScript file and use the command shortcut to run Prettier on your file Ctrl + Alt + Shift + P PC or Cmd + Alt + Shift + p for macOS.

BUT WAIT! If you have ESLint in your project, you might notice the Prettier is formatting everything against your rules. AH! You will need to tell Prettier how you want it to format your code to fix this.

Configuring Prettier

To tell Prettier how you want it to format your code, you will need to make a .prettierrc file and add your setting.

Create your .prettierrc in the root of your project directory if you have Prettier installed in your project or in your home directory if it's installed globally. If you are on bash you can do this in the command line using touch.

    touch .prettierrc

Next, open the file with your favorite editor or IDE. I like to use the open command on my macOS.

    open .prettierrc

Now configure Prettier with how you want it to format your code. Below is just an example using the JSON format. You can find all the configurations here https://prettier.io/docs/en/options.html.

    {
      "trailingComma": "all",
      "tabWidth": 2,
      "semi": true,
      "singleQuote": true,
      "arrowParens": "always",
      "printWidth": 120
    }

There, after configuring Prettier it should start formatting just how you want it to.

Bonus: Configuring Prettier to play even mo'betta with your project's ESLint

Prettier comes with a couple of helpful ESLint plugins to make it easier to integrate with ESLint, and they don't get into a cat fight. Here is the recommended configuration taken straight from the Prettier site https://prettier.io/docs/en/integrating-with-linters.html.

Install the ESLint plugins using the appropriate command for your project:

    yarn add --dev eslint-config-prettier eslint-plugin-prettier

    npm install -D eslint-config-prettier eslint-plugin-prettier

Then add the following to your .eslintrc, so it starts using the recommended settings.

    {
      "extends": ["plugin:prettier/recommended"]
    }

Now Prettier should be all setup to used with RubyMine. Have fun!

Please leave any comments if you run across any issue, or I am missing anything.