确保有这个软件


打开这个软件



以上我就在这个软件里面安装了vue，打开设置里面的这个

{
    "workbench.iconTheme": "vscode-icons",
    "editor.fontSize": 20,
    "editor.renderIndentGuides": false,
    "files.autoSave": "afterDelay",
    "liveSassCompile.settings.formats":[
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/css"
        },
        {
            "extensionName": ".min.css",
            "format": "compressed",
            "savePath": "/css"
        }
    ],
    "liveSassCompile.settings.excludeList": [
       "**/node_modules/**",
       ".vscode/**"
    ],
    "liveSassCompile.settings.generateMap": true,
    "easysass.formats": [
        {
            "format": "expanded",
            "extension": ".css"
        },
        {
            "format": "compressed",
            "extension": ".min.css"
        }
    ],
    "easysass.targetDir": "./css/",
    "background.customImages": [
        "file:///D://222.png"
    ],
    "background.useDefault": false,
    "background.style": {
        "content": "''",
        "pointer-events": "none",
        "position": "absolute",
        "z-index": "99999",
        "width": "102%",
        "height": "100%",
        "background-position": "0%",
        "background-repeat": "no-repeat",
        "opacity": 0.3
    },
    "editor.quickSuggestions": {
        "strings": true
    },
    "cssrem.rootFontSize": 12,
    "cssrem.autoRemovePrefixZero": false,
    "cssrem.fixedDigits": 3,
    "beautify.language": {
        "js": {
            "type": [
                "javascript",
                "json"
            ],
            "filename": [
                ".jshintrc",
                ".jsbeautify"
            ]
        },
        "css": [
            "css",
            "scss"
        ],
        "html": [
            "htm",
            "vue",
            "html"
            
        ]
    },
    "workbench.colorTheme": "Dark-Dracula",
    "vetur.format.defaultFormatter.html": "js-beautify-html",
    // "emmet.syntaxProfiles":{
    //     "vue-html":"html",
    //     "vue":"html"
    // },
    // "files.associations": {
    //     "*.vue":"html"
    // },
    // "eslint.validate":["javascript","javascriptreact","html"]


    "emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "html"
      },
     
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "html",
        "vue"
    ],
     
    "eslint.options": {
        "plugins": ["html"]
    }

   
}

将这个复制到设置里面，那么就配置好了，我们创建的目录，或者文件，就会以这样的形式进行展示