vue.js - 保存时 VSCode Prettier - 用于 Vue.js

Question

我有

我的 VSCode 的这些设置

设置.json

{
    "workbench.sideBar.location": "left",
    "window.zoomLevel": 1,
    "workbench.colorTheme": "Monokai Pro",
    "workbench.iconTheme": "Monokai Pro Icons",
    "editor.formatOnSave": true,
    "editor.renderWhitespace": "none",
    "breadcrumbs.enabled": true,
    "editor.minimap.enabled": false,
    "prettier.tabWidth": 4,
    "prettier.vueIndentScriptAndStyle": true,
    "prettier.useTabs": true,
    "prettier.configPath": "/Users/alpha/Sites/notes/VSCode/.prettierrc",
    "[javascript, vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "redhat.telemetry.enabled": true,
    "liveServer.settings.donotShowInfoMsg": true,
    "explorer.confirmDelete": false,
    "editor.tabSize": 4,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "vue-html": "html",
        "vue": "html"
    }
}

.prettierrc

{
    "semi": false,
    "singleQuote": false,
    "useTabs": true,
    "trailingComma": "none",
    "printWidth": 80,
    "tabWidth": 4
}

现在，它完美地保存了 JS 和 HTML。✨</p>

我想

使其适用于 Vue.js。

我试过了

添加vue--> "[javascript, vue]":

它不工作。

Vue.js 如何做到这一点？

Answer 1

将此代码块添加到我的主要设置中似乎可行。

"[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
},

最终设置

{
    "workbench.sideBar.location": "left",
    "window.zoomLevel": 1,
    "workbench.colorTheme": "Monokai Pro",
    "workbench.iconTheme": "Monokai Pro Icons",
    "editor.formatOnSave": true,
    "editor.renderWhitespace": "none",
    "breadcrumbs.enabled": true,
    "editor.minimap.enabled": false,
    "prettier.tabWidth": 4,
    "prettier.vueIndentScriptAndStyle": true,
    "prettier.useTabs": true,
    "prettier.configPath": "/Users/alpha/Sites/notes/VSCode/.prettierrc",
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "[vue]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
    },
    "redhat.telemetry.enabled": true,
    "liveServer.settings.donotShowInfoMsg": true,
    "explorer.confirmDelete": false,
    "editor.tabSize": 4,
    "emmet.includeLanguages": {
        "javascript": "javascriptreact",
        "vue-html": "html",
        "vue": "html"
    }
}

注意：我不确定我所做的是否是正确的方法，但它现在正在工作。