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

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. スクリーンショット 2020-09-05 16.22.48.png

スクリーンショット 2020-09-05 16.26.12.png

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. スクリーンショット 2020-09-05 17.01.41.png

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) スクリーンショット 2020-09-05 17.29.34.png


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

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

スクリーンショット 2020-09-05 17.30.32.png

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.

Recommended Posts

Prepare the format environment with "Rails" (VScode)
Prepare the security check environment for Rails 6
Prepare the JVM language development environment with WSL
Rails development environment created with VSCode and devcontainer
Prepare the environment of CentOS 8 with Sakura VPS
Prepare Python3 environment with CentOS7
[Docker] Rails 5.2 environment construction with docker
[Rails] Specify format with link_to
Prepare the environment for java11 and javaFx with Ubuntu 18.4
Debug the VSCode + Docker + PHP development environment with XDebug.
Rails + MySQL environment construction with Docker
Prepare Java development environment with Atom
Build PlantUML environment with VSCode + Docker
Build environment with vue.js + rails + docker
Build Rails environment with Docker Compose
[Environment construction with Docker] Rails 6 & MySQL 8
Ruby on Rails development environment construction with Docker + VSCode (Remote Container)
Super beginner builds Rails6 + Postgresql environment with Docker to the end
Prepare Java development environment with VS Code
Building Rails 6 and PostgreSQL environment with Docker
Create Rails 6 + MySQL environment with Docker compose
Check the processing contents with [rails] binding.pry
Format the contents of LocalDate with DateTimeFormatter
[Rails] Reset the database in the production environment
How to build Rails 6 environment with Docker
Launching the production environment with docker + rails (ver5.2) and errors that occurred
I rewrote the Rails tutorial test with RSpec
Build a Laravel / Docker environment with VSCode devcontainer
Rails6 [API mode] + MySQL5.7 environment construction with Docker
Publish the app made with ruby on rails
Implement the Like feature in Ajax with Rails.
Prepare a scraping environment with Docker and Java
Determine the current page with Ruby on Rails
[Rails] How to build an environment with Docker
Try to summarize the common layout with rails
[Rough explanation] How to separate the operation of the production environment and the development environment with Rails
Prepare the execution environment of Tomcat in IntelliJ Community
Limit files created with the rails g controller command
[Heroku] Associate AWS S3 with the deployed Rails app
Docker the development environment of Ruby on Rails project
Stable development environment construction manual for "Rails6" with "Docker-compose"
[Rails] I tried playing with the comment send button
I summarized the display format of the JSON response of Rails
Environment construction of Rails5 + MySQL8.0 + top-level volumes with docker-compose
[First team development ③] Share the development environment created with Docker
Solve the N + 1 problem with Ruby on Rails: acts-as-taggable-on
Challenge the settings for developing with vue.js on Rails 6
Note that I stumbled upon building the Rails environment
Addicted to the webpacker that comes standard with Rails 6
SSL in the local environment of Docker / Rails / puma
Roughly the flow of web application development with Rails.
[Rails] Put together the same code with controller actions
Build Rails (API) x MySQL x Nuxt.js environment with Docker
Beginners use ubuntu in windows to prepare rails environment
Created RSS / Atom format sitemap with Ruby on Rails
When the server does not start with rails s
Create Chisel development environment with Windows10 + WSL2 + VScode + Docker
Rails Docker environment construction
Rails deploy with Docker
[Rails 6] RuntimeError with $ rails s
Handle devise with Rails