question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

vue-html not working for SFC

See original GitHub issue
  • 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

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:17 (8 by maintainers)

github_iconTop GitHub Comments

1reaction
yoyo930021commented, Nov 12, 2020

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"
  }
}
0reactions
yoyo930021commented, Nov 12, 2020

@yoyo930021 thanks man. it solved my problem for now. waiting for the fix for [vue-html] (original issue)

Ha, we can’t solve original problem. It is a limit in VSCode. 😂

Read more comments on GitHub >

github_iconTop Results From Across the Web

Single-File Components - Vue.js
Author modularized components using familiar HTML, CSS and JavaScript syntax; Colocation of inherently coupled concerns; Pre-compiled templates without runtime ...
Read more >
Vue sfc spec is not compatible with html5 or xhtml or any xml ...
You need to parse Vue template tag? Before it is compiled and mounted by Vue framework? Or after it is compiled? ... yes,...
Read more >
Creating our first Vue component - Learn web development
Vue components are written as a combination of JavaScript objects that manage the app's data and an HTML-based template syntax that maps to...
Read more >
Vue - Parcel
Note: Parcel does not support using SFCs with Vue 2, you must use Vue 3 or ... Parcel uses the official Vue SFC...
Read more >
Vue.js | IntelliJ IDEA Documentation - JetBrains
Make sure the JavaScript and TypeScript and Vue.js required plugins are enabled on the Settings/Preferences | Plugins page, tab Installed, see ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found