vetur only works with a local version of prettier-eslint

Created on 4 Apr 2019  Â·  2Comments  Â·  Source: vuejs/vetur

  • [x] I have searched through existing issues
  • [x] I have read through docs
  • [x] I have read FAQ

Info

  • Platform: macOS
  • Vetur version: 0.18.0
  • VS Code version: 1.32.3

Problem

In the document:

Vetur bundles all the above formatters. When Vetur observes a local install of the formattesr, it'll prefer to use the local version.

Is that means vetur has a built-in prettier and prettier-eslint and I can use all features by installing vetur in VS Code without run yarn add prettier-eslint?

I follow the document to setup veturin VS Code, however the formatting feature does not work well when I press Format Document shortcut (shift+alt+F). It format the code in a different rule fromeslintrc.js. If I press Ctrl + S, the code can be formatted properly. And after I run yarn add prettier-eslint, everything works well.

I' m confused that do I have to install a formatter locally to format code with eslint ?

part of settings.json:

{
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        {
            "language": "vue",
            "autoFix": true
        }
    ],
    "eslint.autoFixOnSave": true,
    "vetur.validation.template": false,
    "vetur.format.defaultFormatter.js": "prettier-eslint",
    "vetur.format.defaultFormatterOptions": {
        "prettier": {
            "singleQuote": true,
            "semi": false,
            "eslintIntegration": true
        }
    }
}
need-more-info

Most helpful comment

I've noticed as well that I had to specifically install prettier-eslint in my local packages for vetur to honour the .eslintrc.js config:

image

  • So, without prettier-eslint locally installed I get:
    image

  • With prettier-eslint locally installed I get:
    image

According to the text here

VSCode ESLint and TSLint Integration
prettier-eslint and prettier-tslint are included with the installation of this extension. There is no need for a separate local or global install of either for functionality.

which I guess causes the confusion.

Thank you!

All 2 comments

however the formatting feature does not work well when I press Format Document shortcut (shift+alt+F)

What's the input, and what's the output of Format Document and output of format on save?

I've noticed as well that I had to specifically install prettier-eslint in my local packages for vetur to honour the .eslintrc.js config:

image

  • So, without prettier-eslint locally installed I get:
    image

  • With prettier-eslint locally installed I get:
    image

According to the text here

VSCode ESLint and TSLint Integration
prettier-eslint and prettier-tslint are included with the installation of this extension. There is no need for a separate local or global install of either for functionality.

which I guess causes the confusion.

Thank you!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

pdanpdan picture pdanpdan  Â·  3Comments

gabrielboliveira picture gabrielboliveira  Â·  3Comments

yoyoys picture yoyoys  Â·  3Comments

thibautguedou3 picture thibautguedou3  Â·  3Comments

deangoku picture deangoku  Â·  3Comments