[RAILS] VS Code plugin recommended for programming school students


My name is yuki and I am an engineer at a ** logistics x IT ** company after graduating from a programming school. I'm sure many of you reading this article are attending or thinking of going to a programming school.

What are you using as a text editor? What is a text editor? Please see here. (Hereafter, editor)

I'm sure some editors are recommended by programming schools, but I personally recommend VS Code. This time, I wrote an article for school students about the function "plug-in" that makes VS Code more convenient.

There is a great reference article on how to install it, so please browse from the bottom heading.

Target audience of the article

--For students who have Ruby / Rails in their main curriculum at a programming school --Those who have already installed VS Code --Mac users

What is a plug-in in the first place? How to put it?

A plug-in is a ** extension ** in Japanese. Think of it as an additional feature that makes VS Code more useful. The specific installation method is as follows.

① Start VS Code and click the icon below.


(2) A search window will appear. Find the name of the function you want to add and press the install button.


Then I will introduce it immediately.

Introduction of recommended plug-ins for programming school students

Items that require detailed explanation are marked with *, so please check the latter half.

Plugin name Contents
Japanese Language Pack for Visual Studio Code It translates VS Code into Japanese.
Beautify ※1 cmd+shift+Select Beautify with p and HTML/CSS/Choosing one of the JS will clean up the code.
Bracket Pair Colorizer When parentheses are nested in JS etc., they will color which one corresponds to which.
Color Picker When deciding the color with CSS etc., a color picker that can be visually selected is displayed.
HTML Snippets * 2 As will be described later, it makes HTML input convenient anyway.
Path Intellisense It will give you suggestions when you specify the path, such as the location of the file.
indent-rainbow * 3 Colors the width from the edge of the editor to the code.
vscode-icons Files and folders have icons to make them easier to understand.
zenkaku It visualizes double-byte space and prevents errors.

* Explanation

Other useful plugins have been developed, so please check "Is there such a thing?"!

Reference article (recommended article)

Procedure to install Visual Studio Code on MacOS

Recommended Posts

VS Code plugin recommended for programming school students
Introducing Smoulby, "Glittering Ruby Programming for Elementary School Students"
Create a VS Code Plugin.
Spring Boot programming with VS Code
Introduction to Programming for College Students: Introduction
Recommended learning method for programming beginners
Introduction to Programming for College Students: Variables
Make a snippet for Thymeleaf in VS Code
Recommended programming language
Introduction to programming for college students (updated from time to time)
Introduction to Programming for College Students: Making a Canvas
Specify VS Code as the default editor for jshell