Prepare the format environment with "Rails" (VScode)

How did you write this article?

When developing with Rails, I was developing with VScode, The format didn't work as I expected with Rubocop alone, and I struggled. Under Rails environment, at least .rb file and .erb file format is required. Furthermore, it is convenient to be able to extend formatter support to other languages (JavaScript, yaml, etc.).

I don't know about other editors, but I feel that building with VScode has a point.

I made a mistake because I am a beginner, but I hope you can kindly point out.

Purpose of this article

--Prepare a stable Rails coding environment (Ruby, erb format environment) --Can be used with the analysis tool formatter Rubocop --Introduction of formatter that can be extended to other languages and stable operation

Verification environment

Rails v6.0.3.3 Ruby v2.6.6 Rubocop v0.89.1

・ Extension function Ruby v0.27.0 Prettier v5.6.0 Prettier+ v4.2.2 Beautify v1.5.0

・ Installation prettier/plugin-ruby v0.20.0

1. VS code setting (setting json)

Before formatting, I put the following settings in the editor. The editor settings screen can be displayed with Command +,. Open the settings.json file and insert the following settings. settings.json is an icon that is displayed as "Settings (JSON)" when you match it with the icon at the top right of the settings screen. If you click the icon and enter the following settings

--Setting to remove trailing whitespace and insert a new line in the last line --Automatic format

Is reflected.

settings.json

{
  "files.trimFinalNewlines": true, #Trimming new lines after the last line when saving the file
  "files.insertFinalNewline": true, #Add the latest line to the end when saving the file
  "files.trimTrailingWhitespace": true, #Trim trailing whitespace
  "editor.formatOnSave": true, #Automatic format when saving file
}

1. Ruby format environment

As a procedure, first, assuming that rubocop is installed with gem, With VScode extensions

• Prettier
• Prettier+
  To install. * Don't forget to install both.

Then install the prettier plugin within the rails development project.

The formatters Prettier and Prettier + do not support Ruby by default, but are supported by plugins.

Immediately, I will install and execute the plugin as described on the official website. Official site: plugin-ruby

My environment is Rails6, so I installed it with yarn.

yarn add --dev prettier @prettier/plugin-ruby`

Simultaneous execution under Rails environment can be executed with the following command.

./node_modules/.bin/prettier --write '**/*.rb'

This completes the formatting of the existing Ruby file. After saving, please restart all related software such as editor and Docker.

After restarting, open some rb file and check that Prettier and Prettier + are checked at the bottom right of the editor.

Then, add whitespace characters and some line breaks to the file, save it, and check if the format is executed. If you can run it well, Ruby formatting is complete.

2. erb format

Install the extension beautify. Why is there a Prettier? I think there is an opinion, Actually, that's fine, but if you set as below, some layouts will be deleted and erb will be difficult to understand. This happens because erb is recognized by html.

Prettier sample example

settings.json

"files.associations": {
   "*.html.erb": "html"
}

Display example in Prettier (highlights disappear and are difficult to understand)

Install beautify with the extension and enter the settings in settings.json as follows.

  "beautify.language": {
    "html": ["htm", "html", "erb"]
  },

Now the html format is adapted to erb, and the highlights of erb are displayed so that you can work in an easy-to-understand manner.

3. JavaScript format

To format the JavaScript, just reflect the Prettier settings in json.

settings.json

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

Additional notes

I introduced an example of Rails format environment in VScode. Details of various settings have been omitted, so please refer to the official website for detailed settings. If the above settings do not work, other extensions may be in the way, so Please disable the extension and check the operation.

Finally

I don't think the environment I built is the best way to build it, As an example of building a Rails environment, I hope that the built format environment will be helpful to other people as much as possible.