vetur: vue-html not working for SFC

  • I have searched through existing issues
  • I have read through docs
  • I have read FAQ
  • I have tried restarting VS Code or running Vetur: Restart VLS

Info

  • Platform: Linux
  • Vetur version: 0.29.0
  • VS Code version: 1.50.1

Problem

I have a vue-typescript project. I only want to disable the formatting (formatter: prettier) for <template>...</template> in the .vue SFC files and format the typescript and SCSS.

Content of settings.json in my working directory

{
  "editor.quickSuggestions": {
    "strings": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.detectIndentation": true,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "vetur.format.enable": false,
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  "[vue-html]": {
    "editor.formatOnSave": false
  }
}

Content of .prettierrc

{
  "endOfLine": "lf",
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "none",
  "bracketSpacing": true
}

Reproducible Case

  1. Create a Vue Project vue create test-project
  2. Install Prettier yarn add -D prettier
  3. Paste the contents of settings.json (from above) in **/.vscode/settings.json
  4. Paste the content of prettier configuration (from above) in **/.prettierrc
  5. Reload editor ⇒ Open any *.vue file (say App.vue) ⇒ Press CTRL+S

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Comments: 17 (8 by maintainers)

Most upvoted comments

Peek 2020-11-11 06-20 @yoyo930021 Not working in my case

Disable all other extension? Prettier extension can format for Vue SFC.

Yeah disabling extensions work. Not all just disabling prettier works but thats not the solution to this problem as i have express js code withinn same workspace and there i need formatting…

You can set VSCode setting.

{
  "[vue]": {
    "editor.defaultFormatter": "octref.vetur"
  }
}