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

Question

\n

我有

\n

我的 VSCode 的这些设置

\n

设置.json

\n

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

\n

.prettierrc

\n

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

\n

现在，它完美地美化了 JS 和 HTML 的保存。\xe2\x9c\xa8

\n

\n

我想

\n

使其与 Vue.js 一起使用。

\n

我试过

\n

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

\n

它不起作用。

\n

Vue.js 如何做到这一点？

\n

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"
    }
}

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