Settings to be done when changing from Sublime Text to VScode (when writing Ruby On Rails)

Migrated the editor from Sublime Text to VScode. Therefore, we will introduce settings and extensions that allow people who used Sublime Text to use VS code without any discomfort.

Premise

--The environment is macOS --VScode is already installed

Initial setting

If you open VScode, you will see a screen like this, so use command +, to open the settings screen. Let's set it.

__ · Files: Changed Auto Save to "after Delay" __ This will automatically save the file after you edit it.

__ · Editor: Change Font Size to "13" __

__ · Editor: Changed Tab Size to "2" __

__ · Editor: Change Word Wrap to "on" __ This will wrap the line and display it.

Change the color scheme

Then change the color scheme theme to something similar to Sublime Text. If you change it, it will look like an image, and I think it's infinitely similar to Sublime Text.

If you are OK with the default theme, you can skip to (Next Step). Let's change it.

Open Command Pared with command + shift + P, type color in the form, and when you see Preferences: Color Theme selected, press Return.

Then type monokai and press return when you are sure that Monokai is selected.

Now you can change the color scheme theme.

Plugin installation

Next, install the necessary plug-ins.

Click on the icon that looks like four squares in the left sidebar. This will bring up a form to search for plugins. (* In the above picture, I have already installed the plug-in, so the installed plug-ins are listed in the INSTALLED column, but don't worry.)

Enter the name of the plugin you want to install in the form, select it and install it.

Here are some recommended plug-ins.

・ Japanese Language Pack for Visual Studio Code

It is a plug-in that translates into Japanese.

・ Ruby

Ruby language support. This is a must-have plugin for writing Ruby code.

・ VSCode Ruby

If you install the above plugin Ruby, it will be installed automatically. ERB syntax highlighting is enabled.

・ Endwise

It will automatically insert end.

Ruby settings

Finally, set up Ruby.

Open the settings screen again with command +, and click the file-like icon in the upper right to open settings.json.

As shown in the image, add the following at the end. (Don't forget to write, between the end of the original setting item and the setting to be added.)

"files.associations": {
    "*.erb": "erb"
},
"emmet.includeLanguages": {
    "erb": "html"
}

This completes the settings. If you restart VScode, all the settings will be reflected.

Reference site

• https://wemo.tech/1006
• https://qiita.com/sensuikan1973/items/219a843e4654e6c2e10d
• https://teratail.com/questions/163008