When it comes to maintaining clean and consistent code in Ruby on Rails applications, proper linting is crucial. Prettier is a popular code formatter that can be used to enforce consistent code style and formatting in your Ruby files. In this blog post, we will guide you through the process of setting up Prettier as a code formatter for your Ruby files in Visual Studio Code (VSCode).

Step 1: Install the Prettier Extension in VSCode
The first step is to install the Prettier extension in VSCode. Open the Extensions sidebar, search for "Prettier - Code Formatter", and click the Install button.

Step 2: Install Prettier for Ruby on Rails
Next, we need to install the Prettier package for Ruby on Rails. Open your project's terminal and run the following command:

npm install --save-dev prettier @prettier/plugin-ruby

Step 3: Install Ruby Dependencies for Prettier
To ensure Prettier works seamlessly with Ruby, we need to install some Ruby dependencies. Run the following command in your terminal:

gem install bundler prettier_print syntax_tree syntax_tree-haml syntax_tree-rbs

Step 4: Create a Default Prettier Configuration File
Prettier allows you to customize the formatting options according to your preferences. Create a file named .prettierrc.yml in the root directory of your Rails application and add the following content:

tabWidth: 2
semi: false
singleQuote: true
trailingComma: "none"

rubyArrayLiteral: true
rubyHashLabel: true
rubyModifier: true
rubySingleQuote: true
rubyToProc: false

All the ruby properties are available here so feel free to modify these options based on your desired code style.

Step 5: Update VSCode Settings
To set Prettier as the default formatter for Ruby files in VSCode, we need to update the settings. Open your VSCode settings file (settings.json) and add the following configuration:

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

These settings specify that Prettier should be the default formatter for Ruby files and that formatting should be applied automatically on save. Additionally, we enable the RuboCop linter for Ruby files to ensure both code style and quality are maintained.

Tip: You can add node_modules, package.json and package-lock.json to .gitignore to not commit them to git.

Extra

From plugin-ruby repo we can use Prettier and Rubocop.

Prettier provides a RuboCop configuration file to disable the rules which would clash. To enable this file, add the following configuration at the top of your project's .rubocop.yml:

inherit_from:
  - node_modules/@prettier/plugin-ruby/rubocop.yml

If you don't have a .rubocop.yml file in your project the default plugin-ruby will use the default ones present on the plugin.

Conclusion

By following these steps, you can easily set up Prettier as a code formatter for your Ruby files in VSCode. With Prettier's powerful formatting capabilities, you can enforce consistent code style and improve the readability of your Ruby on Rails applications. Happy coding!

Source: https://github.com/prettier/plugin-ruby