3

![enter image description here

I had

these settings for my VSCode

settings.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
}

Right now, it prettifies on save for JS & HTML, perfectly. ✨

enter image description here

I want

to make it works with Vue.js.

I tried

add vue --> "[javascript, vue]":

It is not working.

How would one do that do Vue.js ?

code-8
  • 54,650
  • 106
  • 352
  • 604

1 Answers1

5

Adding this block of codes to my main settings seems to work.

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

Final settings

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

Note: I am not sure if what I did is the right way to do it, but it is working for now.

enter image description here

code-8
  • 54,650
  • 106
  • 352
  • 604
  • This is definitely the best way to do it with Nuxt/Vue 3 and the latest vscode in December 2022, thanks! – AsGoodAsItGets Dec 17 '22 at 20:34
  • For anyone wondering where is the location for *settings.json* in VSCode, you can refer this answer: https://stackoverflow.com/a/65909052/386579 – shasi kanth Apr 05 '23 at 11:59