DEV Community

Cover image for Installing the Ruby Plugin for Prettier in VS Code
drayeleo
drayeleo

Posted on • Updated on

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"
},
Enter fullscreen mode Exit fullscreen mode

Add the following below it:

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

Your final result should include both settings:

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

Discussion (4)

Collapse
ben profile image
Ben Halpern

Great guide!

Collapse
drayeleo profile image
drayeleo Author

Thanks Ben!

Collapse
thomasbnt profile image
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.

Collapse
hubertjakubiak profile image
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.