Installing the Ruby Plugin for Prettier in VS Code

Prettier is the premier code formatter extension for front-end languages in VS Code, at least if you go by the number of downloads in the extension marketplace. I found it to be extremely helpful while learning JavaScript and React, both to improve my formatting and typing efficiency as well as to teach me what well-formatted code actually looks like.

When I started to learn Ruby, I was sorely missing the ease of use of prettier and finally decided to install the Ruby plugin for Prettier to try to get the same functionality. However, the installation proved trickier than I expected and I had to recruit some additional help from TA Wills Blake. Together, we figured it out. The instructions are below.

The plugin should be installed globally so that it is automatically available to any new projects opened in VS Code. However, the instructions provided by Prettier for installing the plugin are vague and seem to imply that the plugin must be installed as a dependency with each new project. This requires creating a gemfile, adding in the dependency, etc.....nah, we want to do what they're describing on the Prettier Plugins page. As it says on that page: "plugins are automatically loaded if you have them installed in the same node_modules directory where prettier is located"; so let's find that directory.

Steps to follow:

1. Make sure that you have already installed the Prettier extension in VS Code
2. Navigate to your home directory by entering cd into the command line, or opening a new CLI window
3. Enter ls -a to show all directories, including hidden ones
4. If you are on Windows using WSL, you should see a .vscode-server directory. If you're on macOS, it should be simply .vscode. Use cd to navigate into whichever of the two applies to your system
5. cd into extensions
6. There should be a directory titled esbenp.prettier-vscode-<version> (ie, mine was esbenp.prettier-vscode-9.5.0). cd into it
7. Enter npm install --save-dev prettier @prettier/plugin-ruby in the CLI
8. Wait for it to finish installing, then restart VS Code

You should now be able to right-click in any ruby document in VS Code and select "format document". You may also be able to format on save by default. If not, you can navigate to the VS Code Settings file using the following steps:

1. Hold down ctrl (or cmd for macOS) + shift + P
2. Type settings.json and select "Preferences: Open Settings (JSON)"
3. Scroll down the json file. You should already have an object specifying prettier as the default formatter for javascript code:

"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},

Add the following below it:

"[ruby]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
},

Your final result should include both settings:

"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[ruby]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
},

Comments

[Ben Halpern]

Great guide!

[Dylan Raye-Leonard]

Thanks Ben!

[Hubert Jakubiak]

I would add this step:

gem install bundler prettier_print syntax_tree syntax_tree-haml syntax_tree-rbs

I missed that during my setup.

[Dylan Raye-Leonard]

Hi Hubert, I didn't perform that during my installation. Did you find it necessary for yours? What does it do?

[Hubert Jakubiak]

From readme github.com/prettier/plugin-ruby

You'll also need to add the necessary Ruby dependencies. You can do this by running:

gem install bundler prettier_print syntax_tree syntax_tree-haml syntax_tree-rbs

Yes, it was necessary for my setup to get it work.

[Thomas Bnt]

Hello !
Probably better if you share this on VSCodeTips, part of the Forem network of communities dedicated to this IDE. You could find interesting topics, sharing about plugins and themes, and any other kind of topic around this software.