Enable automatic html tag generation in erb when working with VS Code

Introduction

It briefly explains how to enable the function to automatically generate html tags in erb.

When I first started programming I had the experience of saying, "Even though the tag was automatically generated in html, it will not be like before when developing with erb." So I tried to summarize the solution. ..

procedure

Include Ruby extensions.

I think that it is included if it is developed with rails, but it is a confirmation.

Open setting.json

Press commnad + shift + p and search for setting.json to open setting.json. It's a file like this.

setting.json


{
    "editor.tabSize": 2,
    "editor.renderWhitespace": "all",
    "files.autoSave": "onFocusChange",
    "explorer.confirmDragAndDrop": false,
    "window.zoomLevel": 0,
    "emmet.triggerExpansionOnTab": true,
    "files.trimFinalNewlines": true,
    "files.trimTrailingWhitespace": true,
    "editor.suggestSelection": "first",
    "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
    "[json]": {

        "editor.quickSuggestions": {
            "strings": true
        },
        "editor.suggest.insertMode": "replace"
    },
    "[jsonc]": {

        "editor.quickSuggestions": {
            "strings": true
        },
        "editor.suggest.insertMode": "replace"
    },
}

Add code

Add the following description.

settings.json


 "emmet.includeLanguages": {
    "erb": "html",
 }

in conclusion

With rails, as learning progresses, some people may adopt haml notation and not use erb. If you want to be able to use not only ruby but also other languages, I thought that it would be an option to write in erb, so I summarized it.

Recommended Posts

Enable automatic html tag generation in erb when working with VS Code
Write beautiful code with indentation in mind (rails, html)
Lombok with VS Code
Workspace setting location when connecting remotely with VS Code and working on a Docker container
Docker management with VS Code
Format Ruby with VS Code
Hello World with VS Code!
Summary of steps for developing in Docker container with VS Code
Convert line feed code to html line feed tag with Thymeleaf and output
Settings to delete unused Java imports when saving with VS Code