Formatting of .vue files? #543

truongio · 2017-11-14T12:37:18Z

I have searched through existing issues
I have read through docs
I have read FAQ

Info

Platform: macOS High Sierra
Vetur version: 0.11.3
VS Code version: 1.18.0

Problem

The editor says: "Sorry, but there is no formatter for 'vue'-files installed." when I press format document keybind.

Did I miss something or does Vetur with Prettier not support .vue files anymore for formatting?

octref · 2017-11-14T16:06:27Z

Did you install other vue extensions? Do you have file.associations?

preinoch · 2017-11-15T03:13:37Z

I have this problem too in same vetur/vscode version, but my system is Windows10, vscode prompt "The Vue Language Server server crashed 5 times in the last 3 minutes. The server will not be restarted.".
I have reinstalled vetur solve this problems.

truongio · 2017-11-15T08:16:54Z

@octref I had Vue Snippets but I tried uninstalling it and it still doesn't work. I have no files.associations in my settings, just the default

truongio · 2017-11-15T08:42:24Z

It solved itself by resintalling Vetur for some reason.

Atuna · 2017-11-17T07:55:42Z

As shown in the screenshoot below, I have the same problem. I have Vetur and Vim plugin installed, and file.associations that link *.wpy files to vue formate. When I press "==" to formate one line in a wpy file, a hint will shown up said: "Sorry, but there is no formatter for 'vue'-files installed."

octref · 2017-11-17T17:42:59Z

@Atuna We do not have line-based formatter. You can only format whole document.
Other than that, wpy is not supported by Vetur.

eric-burel · 2017-11-23T20:21:44Z

Hi, this should not be closed, it did not solve after a reinstall of vetur. This issue is related to the 1.18 version of VSCode.

chrisnicola · 2017-12-06T00:57:31Z

Running into this issue as well. I'm guessing this has to do with the change to Prettier. Does it need to be installed via NPM. I added the VSCode extensions now.

chrisnicola · 2017-12-06T01:06:32Z

@octref you say you never had line or selection based formatting, but I don't recall seeing this error before now.

octref · 2017-12-06T01:38:09Z

@Atuna is the only person giving me a screenshot, and the problem is Vetur registers a formatter for *.vue files, not *.wpy files.

If you report issue without describing the issues, like which file you are trying to format, what extensions you have, etc, I can't do anything right?

eric-burel · 2017-12-06T14:35:18Z

Hi @octref, this is not the lack of good will, it is that there are actually not much to say, this bug appear as soon as we try to format any .vue file. Here are my settings:

// Placez vos paramètres dans ce fichier pour remplacer les paramètres par défaut
{
    "eslint.autoFixOnSave": true,
    "eslint.trace.server": "verbose",
    "editor.fontSize": 18,
    "window.zoomLevel": 1,
    "vim.disableAnnoyingNeovimMessage": true,
    "git.confirmSync": false,
    //"emmet.triggerExpansionOnTab":true,
    "emmet.includeLanguages": {
        "javascript": "html",
        "vue": "html",
        "vue-html": "html",
        "javascriptreact":"html",
        "typescript":"html"
    },
    "editor.multiCursorModifier": "ctrlCmd",
    "workbench.iconTheme": "ayu",
    "vetur.format.html.wrap_attributes":"force-expand-multiline"
}

So there are no file associations. The bug appeared as soon as I updated to VSCode 1.18. I'll try to check if there is a bad interaction with another lib, but I think it is a config or lower level issue.

guyulmaz · 2017-12-07T05:41:19Z

I have 1.19.0-insider with the latest build, and the problem still exists.

octref · 2017-12-07T07:25:48Z

What's the output in Output (In the bottom panel, next to terminal) -> v-language-sever?

eric-burel · 2017-12-07T08:02:55Z

@octref It shows Vue. Could it be related to prettier, which seems to be the default formatter for js ?

octref · 2017-12-07T08:26:52Z

I mean this.

eric-burel · 2017-12-07T08:30:23Z

Oh yeah sorry, it shows vetur initialized as expected. Note that everything else seems to works well, it is only formatting.

octref · 2017-12-15T22:00:02Z

I'm tracking this in #592.

liuguangyong93 · 2018-01-06T05:19:47Z

I met this situation too!

liuguangyong93 · 2018-01-06T05:42:55Z

I have 1.19.1-insider with the latest build, and the problem still exists.I reinstalled,but it doesnot working now.

liuguangyong93 · 2018-01-06T05:58:21Z

@octref 、@eric-burel,please help me!

eric-burel · 2018-01-08T16:46:55Z

Hi @gavin110 sadly I'll be of no help there :) See #592 where the issue is tracked.

liuguangyong93 · 2018-01-12T02:25:02Z

@eric-burel Thanks!

mholtzhausen · 2018-01-18T19:52:17Z

Add this to your settings:
"vetur.format.defaultFormatter.html": "js-beautify-html"

rajeshwarpatlolla · 2018-02-01T14:13:56Z

I have the below json in my settings. But still it is not formatting <template> code in .vue file.

{
    "prettier.singleQuote": true,
    "prettier.trailingComma": "all",
    "prettier.printWidth": 300,
    "editor.tabSize": 2,
    "prettier.eslintIntegration": true,
    "vetur.format.defaultFormatter.html": "js-beautify-html"
}

pjconnect · 2018-02-02T15:12:57Z

also, I had to remove "Beautify" extension. now it's formatting all including HTML.

rajeshwarpatlolla · 2018-02-04T09:34:04Z

.ts files are not formatting if i remove buetify

sandro-git · 2018-02-09T10:58:53Z

Hello, i try the last solution and it works well but it conflicts with Eslint plugin:vue/recommended. How can we setup js-beautify-html to apply formats like : html.format.wrapAttributes : force-expand-multiline

sandro-git · 2018-04-18T16:02:55Z

ok. I try this out. that format all the document what I'm trying to do is to format only html. and have another configuration for js.

octref · 2018-05-14T19:32:08Z

I added a notice on top of https://vuejs.github.io/vetur/formatting.html.

gayanSandamal · 2018-06-16T15:30:09Z

Mine is fixed.

Install Prettier extension.
URL - https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
Go to File > Preferences > Settings
Add below,
"prettier.singleQuote": true,
"prettier.semi": false,
"prettier.eslintIntegration": true
Save.
Try Alt + Shift + F

slinker-hiwa · 2018-08-13T04:10:51Z

My setting. working for my.

"emmet.syntaxProfiles": {
        "vue-html": "html",
        "vue": "vue",
        "javascriptreact": "jsx",
        "javascript": "js",
        "typescript": "jsx",
        "typescriptreact": "tsx"
    },

mariusa · 2018-08-13T09:46:02Z

@octref Could you please reopen this issue and leave open until there is an official default solution listed at
https://vuejs.github.io/vetur/formatting.html
?
Formatting .vue files doesn't work now with prettier.

octref · 2018-08-13T16:09:56Z

Yes, there are other issues for prettier. Please find the right one to follow up: https://github.com/vuejs/vetur/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+prettier

AshGrowem · 2018-09-04T18:13:08Z

Solutions

*Update!

PrettyHTML now supported, see last solution 3 below

1. ESlint `autoFixOnSave` (Official)

Just do command-save to format.

Prerequisites

ESLint Extension

// settings.json

  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "html",
    "css",
    "javascript",
    "javascriptreact",
    { "language": "vue", "autoFix": true },
    { "language": "vue-html", "autoFix": true }
  ],

// package.json

"eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": "plugin:vue/recommended",
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },

Options

plugin:vue/base - Settings and rules to enable correct ESLint parsing
plugin:vue/essential - Above, plus rules to prevent errors or unintended behavior
plugin:vue/strongly-recommended - Above, plus rules to considerably improve code readability and/or dev experience
plugin:vue/recommended - Above, plus rules to enforce subjective community defaults to ensure consistency
https://github.com/vuejs/eslint-plugin-vue#gear-configs

2. JS-Beautify `js-beautify-html` (Deprecated)

This is just using VSCode's built-in html formatter which is based on js-beautify

Alternative html formatter. Deprecated, turned off by default and will be removed soon. js-beautify is not actively maintained and has many long-standing bugs. Use at your own risk.
https://vuejs.github.io/vetur/formatting.html#js-beautify-html-deprecated

Prerequisites

Vetur Extension

// settings.json

"vetur.format.defaultFormatter.html": "js-beautify-html",

3. prettyHTML

Haven't tried but it looks promising. Created last June and the lone contributor is very active.
https://github.com/Prettyhtml/prettyhtml

Prerequisites

Vetur Extension

// settings.json

"vetur.format.defaultFormatter.html": "prettyhtml",

Future Alternatives

Reshape https://vuejs.github.io/vetur/formatting.html#plan
Prettier Vue Support prettier/prettier#2097 & prettier for Vue #491

octref · 2018-09-05T23:39:56Z

Re prettyHTML, see #491 (comment), I'm looking into it, so far looks promising.

oller · 2018-10-17T10:13:20Z

I mean this.

~~what theme is this @octref looks pretty!~~

Ahh, I see it's Nord.

sandro-git · 2018-10-17T11:55:26Z

@octref it looks great but difficult to figure out how to install in vscode today.

I don’t have the skills unfortunately but a extension would be great.

octref · 2018-10-18T15:45:34Z

It is bundled. Just enable it with "vetur.format.defaultFormatter.html": "prettyhtml"

octref · 2018-10-18T15:45:50Z

Docs here: https://vuejs.github.io/vetur/formatting.html#formatters

sandro-git · 2018-10-18T19:16:32Z

@octref i just try it like that and it doesn't work. my settings :

the template tag still with 2 spaces after saving should i format the document manually ?

oller · 2018-10-19T00:19:36Z

From what I've gleamed it seems prettyhtml preserves spacing contextual to the file. If you flatten all indentation, it'll space back out to 2 but if it was initially spaces at 4 it'll respect that

…

On Thu, 18 Oct 2018, 20:21 Sandro Das Neves, ***@***.***> wrote: @octref <https://github.com/octref> i just try it like that and it doesn't work. my settings : [image: capture d ecran 2018-10-18 a 21 15 35] <https://user-images.githubusercontent.com/17152022/47178276-036f3e80-d31b-11e8-8d3e-1d36fdd8bd96.png> the template tag still with 2 spaces after saving should i format the document manually ? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#543 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABKc97fZ7TFW6qGNwdw9_lzi4fnuCmFTks5umNS3gaJpZM4QdRir> .

octref · 2018-10-21T19:41:55Z

@sandro-git @oller This is VS Code's feature called editor.detectIndentation. You can turn that off by "editor.detectIndentation": false. I'll try to add a warning for this confusing behavior.

sandro-git · 2018-10-22T19:47:23Z

@octref sorry to boring you with that small problem but it still doesn't indent 4 spaces instead 2.

phillip-haydon · 2018-11-05T11:00:22Z

Yup, I have the same issue. HTML formatted with 4 spaces, style/script with 2 spaces. All other JS files are 4 spaces.

redeemefy · 2018-11-15T19:50:08Z

Same here, html 2 spaces instead of 4 spaces, and js code is 2 spaces indentation.

octref · 2018-11-21T22:39:18Z

If you have a prettierrc locally, or have prttier.* configs in VS Code, change tabWidth to 4.

When they are present, they override the tabSize in VS Code.

The original issue happens when you have not initialized Vetur correctly. If you still experience it, open new issues with repro steps.

phillip-haydon · 2018-11-22T01:37:47Z

That makes no sense. This can be reproduced by having a clean install of vscode. Configure vscode to be tabsize 4. Turn off detect by file. Then install vetur. And it sets the tabsize 2. It ignores vscode. If installing vetur code says I did not initialize it correctly then vetur is buggy.

(This is how my local is setup)

octref · 2018-11-22T04:48:17Z

I see your problem. I think going forward, having two options, vetur.format.options.tabSize and vetur.format.options.useTabs that's NOT affected by indentation detection would make it easier to understand. Currently if you do set prettier.tabWidth to 4, I think Vetur formats the js section with 4 spaces.

Maybe I should also avoid reading configs from prettier.* and just read from local .prettierrc files. This has always been a source of confusion...

sandro-git · 2018-11-22T11:29:43Z

@octref what do you mean by initialized vetur correctly. I just install it, change some option and use it.

octref · 2018-11-26T01:38:45Z

@sandro-git So you are still experiencing the original problem?

Try to either reinstall Vetur or remove other Vue extensions that would conflict with Vetur.

abdusamadtv · 2019-09-23T07:08:50Z

@octref i just try it like that and it doesn't work. my settings :

the template tag still with 2 spaces after saving should i format the document manually ?

you can check this

octref added the need-more-info label Nov 14, 2017

truongio closed this as completed Nov 15, 2017

octref mentioned this issue Dec 15, 2017

"No formatter for 'vue'-files installed" #592

Closed

MrSunshyne mentioned this issue Apr 22, 2018

vetur 1.0 #188

Closed

12 tasks

octref reopened this Oct 21, 2018

Coder-256 mentioned this issue Nov 2, 2018

Prettier as an option for template formatting #950

Closed

3 tasks

octref closed this as completed Nov 21, 2018

OriginalYellow mentioned this issue Nov 28, 2018

Finish setting up VS code for vue OriginalYellow/DND-Web-App#10

Closed

ConorSheehan1 mentioned this issue Jan 9, 2020

single file .vue formatting no longer works correctly #1189

Closed

Formatting of .vue files? #543

Formatting of .vue files? #543

Comments

truongio commented Nov 14, 2017 • edited Loading

Info

Problem

octref commented Nov 14, 2017

preinoch commented Nov 15, 2017

truongio commented Nov 15, 2017 • edited Loading

truongio commented Nov 15, 2017

Atuna commented Nov 17, 2017

octref commented Nov 17, 2017

eric-burel commented Nov 23, 2017

chrisnicola commented Dec 6, 2017

chrisnicola commented Dec 6, 2017

octref commented Dec 6, 2017

eric-burel commented Dec 6, 2017

guyulmaz commented Dec 7, 2017

octref commented Dec 7, 2017

eric-burel commented Dec 7, 2017

octref commented Dec 7, 2017

eric-burel commented Dec 7, 2017

octref commented Dec 15, 2017

liuguangyong93 commented Jan 6, 2018

liuguangyong93 commented Jan 6, 2018

liuguangyong93 commented Jan 6, 2018

eric-burel commented Jan 8, 2018

liuguangyong93 commented Jan 12, 2018

mholtzhausen commented Jan 18, 2018 • edited Loading

rajeshwarpatlolla commented Feb 1, 2018

pjconnect commented Feb 2, 2018

rajeshwarpatlolla commented Feb 4, 2018

sandro-git commented Feb 9, 2018

sandro-git commented Apr 18, 2018

octref commented May 14, 2018

gayanSandamal commented Jun 16, 2018

slinker-hiwa commented Aug 13, 2018

mariusa commented Aug 13, 2018

octref commented Aug 13, 2018

AshGrowem commented Sep 4, 2018 • edited Loading

Solutions

*Update!

1. ESlint autoFixOnSave (Official)

Prerequisites

Options

2. JS-Beautify js-beautify-html (Deprecated)

Prerequisites

3. prettyHTML

Prerequisites

Future Alternatives

octref commented Sep 5, 2018

oller commented Oct 17, 2018 • edited Loading

sandro-git commented Oct 17, 2018

octref commented Oct 18, 2018

octref commented Oct 18, 2018

sandro-git commented Oct 18, 2018 • edited Loading

oller commented Oct 19, 2018 via email

octref commented Oct 21, 2018

sandro-git commented Oct 22, 2018

phillip-haydon commented Nov 5, 2018

redeemefy commented Nov 15, 2018

octref commented Nov 21, 2018

phillip-haydon commented Nov 22, 2018 • edited Loading

octref commented Nov 22, 2018

sandro-git commented Nov 22, 2018

octref commented Nov 26, 2018

abdusamadtv commented Sep 23, 2019

truongio commented Nov 14, 2017 •

edited

Loading

truongio commented Nov 15, 2017 •

edited

Loading

mholtzhausen commented Jan 18, 2018 •

edited

Loading

AshGrowem commented Sep 4, 2018 •

edited

Loading

1. ESlint `autoFixOnSave` (Official)

2. JS-Beautify `js-beautify-html` (Deprecated)

oller commented Oct 17, 2018 •

edited

Loading

sandro-git commented Oct 18, 2018 •

edited

Loading

phillip-haydon commented Nov 22, 2018 •

edited

Loading