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 folders, 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},