New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Formatting of .vue files? #543

Closed
truongio opened this Issue Nov 14, 2017 · 47 comments

Comments

Projects
None yet
@truongio

truongio commented Nov 14, 2017

  • 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

This comment has been minimized.

Show comment
Hide comment
@octref

octref Nov 14, 2017

Member

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

Member

octref commented Nov 14, 2017

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

@Veado

This comment has been minimized.

Show comment
Hide comment
@Veado

Veado Nov 15, 2017

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.

Veado commented Nov 15, 2017

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

This comment has been minimized.

Show comment
Hide comment
@truongio

truongio Nov 15, 2017

@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 commented Nov 15, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@truongio

truongio Nov 15, 2017

It solved itself by resintalling Vetur for some reason.

truongio commented Nov 15, 2017

It solved itself by resintalling Vetur for some reason.

@truongio truongio closed this Nov 15, 2017

@Atuna

This comment has been minimized.

Show comment
Hide comment
@Atuna

Atuna Nov 17, 2017

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

screen shot 2017-11-17 at 3 51 40 pm

Atuna commented Nov 17, 2017

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

screen shot 2017-11-17 at 3 51 40 pm

@octref

This comment has been minimized.

Show comment
Hide comment
@octref

octref Nov 17, 2017

Member

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

Member

octref commented Nov 17, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@eric-burel

eric-burel Nov 23, 2017

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.

eric-burel commented Nov 23, 2017

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

This comment has been minimized.

Show comment
Hide comment
@chrisnicola

chrisnicola Dec 6, 2017

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 commented Dec 6, 2017

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

This comment has been minimized.

Show comment
Hide comment
@chrisnicola

chrisnicola Dec 6, 2017

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

chrisnicola commented Dec 6, 2017

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

@octref

This comment has been minimized.

Show comment
Hide comment
@octref

octref Dec 6, 2017

Member

@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?

Member

octref commented Dec 6, 2017

@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

This comment has been minimized.

Show comment
Hide comment
@eric-burel

eric-burel Dec 6, 2017

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.

eric-burel commented Dec 6, 2017

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

This comment has been minimized.

Show comment
Hide comment
@guyulmaz

guyulmaz Dec 7, 2017

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

guyulmaz commented Dec 7, 2017

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

@octref

This comment has been minimized.

Show comment
Hide comment
@octref

octref Dec 7, 2017

Member

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

Member

octref commented Dec 7, 2017

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

@eric-burel

This comment has been minimized.

Show comment
Hide comment
@eric-burel

eric-burel Dec 7, 2017

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

eric-burel commented Dec 7, 2017

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

@octref

This comment has been minimized.

Show comment
Hide comment
@octref

octref Dec 7, 2017

Member

I mean this.

image

Member

octref commented Dec 7, 2017

I mean this.

image

@eric-burel

This comment has been minimized.

Show comment
Hide comment
@eric-burel

eric-burel Dec 7, 2017

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

eric-burel commented Dec 7, 2017

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

@octref

This comment has been minimized.

Show comment
Hide comment
@octref

octref Dec 15, 2017

Member

I'm tracking this in #592.

Member

octref commented Dec 15, 2017

I'm tracking this in #592.

@Gavin110

This comment has been minimized.

Show comment
Hide comment
@Gavin110

Gavin110 Jan 6, 2018

I met this situation too!

Gavin110 commented Jan 6, 2018

I met this situation too!

@Gavin110

This comment has been minimized.

Show comment
Hide comment
@Gavin110

Gavin110 Jan 6, 2018

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

Gavin110 commented Jan 6, 2018

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

@Gavin110

This comment has been minimized.

Show comment
Hide comment
@Gavin110

Gavin110 commented Jan 6, 2018

@octref@eric-burel,please help me!

@eric-burel

This comment has been minimized.

Show comment
Hide comment
@eric-burel

eric-burel Jan 8, 2018

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

eric-burel commented Jan 8, 2018

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

@Gavin110

This comment has been minimized.

Show comment
Hide comment
@Gavin110

Gavin110 commented Jan 12, 2018

@eric-burel Thanks!

@Nemesarial

This comment has been minimized.

Show comment
Hide comment
@Nemesarial

Nemesarial Jan 18, 2018

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

Nemesarial commented Jan 18, 2018

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

@rajeshwarpatlolla

This comment has been minimized.

Show comment
Hide comment
@rajeshwarpatlolla

rajeshwarpatlolla Feb 1, 2018

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

rajeshwarpatlolla commented Feb 1, 2018

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

This comment has been minimized.

Show comment
Hide comment
@pjconnect

pjconnect Feb 2, 2018

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

pjconnect commented Feb 2, 2018

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

@rajeshwarpatlolla

This comment has been minimized.

Show comment
Hide comment
@rajeshwarpatlolla

rajeshwarpatlolla Feb 4, 2018

.ts files are not formatting if i remove buetify

rajeshwarpatlolla commented Feb 4, 2018

.ts files are not formatting if i remove buetify

@sandro-git

This comment has been minimized.

Show comment
Hide comment
@sandro-git

sandro-git Feb 9, 2018

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 commented Feb 9, 2018

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

@aphofstede

This comment has been minimized.

Show comment
Hide comment
@aphofstede

aphofstede Apr 13, 2018

js-beautify-html is deprecated and turned off by default: https://vuejs.github.io/vetur/formatting.html

aphofstede commented Apr 13, 2018

js-beautify-html is deprecated and turned off by default: https://vuejs.github.io/vetur/formatting.html

@sandro-git

This comment has been minimized.

Show comment
Hide comment
@sandro-git

sandro-git Apr 13, 2018

sandro-git commented Apr 13, 2018

@aphofstede

This comment has been minimized.

Show comment
Hide comment
@aphofstede

aphofstede Apr 13, 2018

I'm not a maintainer, but @octref mentioned at the bottom of that page:

I plan to contribute to reshape formatter and drop js-beautify eventually.

aphofstede commented Apr 13, 2018

I'm not a maintainer, but @octref mentioned at the bottom of that page:

I plan to contribute to reshape formatter and drop js-beautify eventually.

@sandro-git

This comment has been minimized.

Show comment
Hide comment
@sandro-git

sandro-git Apr 13, 2018

sandro-git commented Apr 13, 2018

@sandro-git

This comment has been minimized.

Show comment
Hide comment
@sandro-git

sandro-git Apr 13, 2018

sandro-git commented Apr 13, 2018

@CKGrafico

This comment has been minimized.

Show comment
Hide comment
@CKGrafico

CKGrafico Apr 18, 2018

By the moment js-beautify-html is working well for me when I turned it on

CKGrafico commented Apr 18, 2018

By the moment js-beautify-html is working well for me when I turned it on

@sandro-git

This comment has been minimized.

Show comment
Hide comment
@sandro-git

sandro-git Apr 18, 2018

@CKGrafico can you detail us what are your settings ?

sandro-git commented Apr 18, 2018

@CKGrafico can you detail us what are your settings ?

@CKGrafico

This comment has been minimized.

Show comment
Hide comment
@CKGrafico

CKGrafico Apr 18, 2018

{
    "window.zoomLevel": 0,
    "editor.fontSize": 14,
    "editor.renderWhitespace": "boundary",
    "workbench.iconTheme": "simple-icons",
    "editor.minimap.enabled": true,
    "stylelint.enable": true,
    "css.validate": false,
    "scss.validate": false,
    "tslint.autoFixOnSave": true,
    "tslint.typeCheck": false,
    "eslint.autoFixOnSave": true,
    "extensions.ignoreRecommendations": false,
    "vetur.format.defaultFormatter.html": "js-beautify-html",
}

CKGrafico commented Apr 18, 2018

{
    "window.zoomLevel": 0,
    "editor.fontSize": 14,
    "editor.renderWhitespace": "boundary",
    "workbench.iconTheme": "simple-icons",
    "editor.minimap.enabled": true,
    "stylelint.enable": true,
    "css.validate": false,
    "scss.validate": false,
    "tslint.autoFixOnSave": true,
    "tslint.typeCheck": false,
    "eslint.autoFixOnSave": true,
    "extensions.ignoreRecommendations": false,
    "vetur.format.defaultFormatter.html": "js-beautify-html",
}
@sandro-git

This comment has been minimized.

Show comment
Hide comment
@sandro-git

sandro-git Apr 18, 2018

@CKGrafico where do you change the settings for js-beautify-html ?

sandro-git commented Apr 18, 2018

@CKGrafico where do you change the settings for js-beautify-html ?

@CKGrafico

This comment has been minimized.

Show comment
Hide comment
@CKGrafico

CKGrafico Apr 18, 2018

Not sure about your question xD
I've changed on the last line of mi VSCode preferences

CKGrafico commented Apr 18, 2018

Not sure about your question xD
I've changed on the last line of mi VSCode preferences

@sandro-git

This comment has been minimized.

Show comment
Hide comment
@sandro-git

sandro-git Apr 18, 2018

yeah I see you set js-beautify-html to format html but how you change let say an indention of 4 instead of 2 in your templates ?

sandro-git commented Apr 18, 2018

yeah I see you set js-beautify-html to format html but how you change let say an indention of 4 instead of 2 in your templates ?

@CKGrafico

This comment has been minimized.

Show comment
Hide comment
@CKGrafico

CKGrafico Apr 18, 2018

At the bottom right bar I've chosen Spaces and 4

CKGrafico commented Apr 18, 2018

At the bottom right bar I've chosen Spaces and 4

@sandro-git

This comment has been minimized.

Show comment
Hide comment
@sandro-git

sandro-git Apr 18, 2018

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.

sandro-git commented Apr 18, 2018

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.

@MrSunshyne MrSunshyne referenced this issue Apr 22, 2018

Closed

vetur 1.0 #188

11 of 12 tasks complete
@octref

This comment has been minimized.

Show comment
Hide comment
@octref
Member

octref commented May 14, 2018

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

@gayanSandamal

This comment has been minimized.

Show comment
Hide comment
@gayanSandamal

gayanSandamal Jun 16, 2018

Mine is fixed.

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

gayanSandamal commented Jun 16, 2018

Mine is fixed.

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

This comment has been minimized.

Show comment
Hide comment
@slinker-hiwa

slinker-hiwa Aug 13, 2018

My setting. working for my.

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

slinker-hiwa commented Aug 13, 2018

My setting. working for my.

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

This comment has been minimized.

Show comment
Hide comment
@mariusa

mariusa Aug 13, 2018

@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.

mariusa commented Aug 13, 2018

@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

This comment has been minimized.

Show comment
Hide comment
@octref

octref Aug 13, 2018

Member

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

Member

octref commented Aug 13, 2018

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

@ashrafhadden

This comment has been minimized.

Show comment
Hide comment
@ashrafhadden

ashrafhadden Sep 4, 2018

Solutions

1. ESlint autoFixOnSave (official)

Just do command-save to format.

Prerequisites

// 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

// 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

Future Alternatives

ashrafhadden commented Sep 4, 2018

Solutions

1. ESlint autoFixOnSave (official)

Just do command-save to format.

Prerequisites

// 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

// 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

Future Alternatives

@octref

This comment has been minimized.

Show comment
Hide comment
@octref

octref Sep 5, 2018

Member

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

Member

octref commented Sep 5, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment