How to use Prettier to lint Ruby files
Tags: ruby, rails, vscode, tutorial
Published: 2023-06-27 11:16:04

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](https://github.com/prettier/plugin-ruby). Open your project's terminal and run the following command:

``` bash
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:

```bash
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:

```yaml
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](https://github.com/prettier/plugin-ruby) 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:

```json
{
	"[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](https://github.com/prettier/plugin-ruby) 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`:

```yaml
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