VScode Vue project uses html code auto-completion plug-in

1. Download plugin: HTML Snippets

 

2. Configure the settings.json file

How to open the file: Press and hold Ctrl+Shift+P at the same time in VScode to search for the configuration file

 

3. Add the following code in settings.json

// HTML代码tab键自动补全
{
    "files.associations": {
        "*.vue": "html"
    },
    "emmet.triggerExpansionOnTab": true,
    "emmet.includeLanguages": {
        "vue-html": "html",
        "vue": "html"
    }
}

4. You can use it after saving

How to use:

(1) Single label: Enter the label name and press the tab key

(2) Multiple same tags: enter the tag name*5, press the tab key

 

 (3) Parent-child tags: Enter parent tag > child tag, press the tab key

(4) Brother label: enter brother label + brother label, press the tab key