Vetur: Formatting issues

[octref]

1. scriptDoc.languageId seems to always be javascript even if lang="ts". This causes the defaultFormatter used for js to be used for ts.

2. Don't know if people would want to have a separate prettier setting than their global one, so maybe add prettier to defaultFormatterOptions.

3. Might be good to add stylus-supremacy to defaultFormatterOptions too for some more sane defaults.

4. Does not work well with multiple workspace now because of settings. Will take a look later.

[rickyruiz]

I cannot get Vetur to read from prettier.config.js.

Here's the object being exported in my config file:

module.exports = {
  singleQuote: true,
  trailingComma: 'es5',
};

The configuration works as expected except in Vue files. Is there anything else I'm missing?

[octref]

We don't read from prettier.config.js.

Change your workspace setting (or directly edit .vscode/settings.json like so:

{
  "prettier.singleQuote": true,
  "prettier.trailingComma": "es5"
}

[yoyo837]

In .vscode/settings.json
"prettier.singleQuote": true, is work fine.

The end of the line does not keep the semicolon, how to set it？ @octref

[yoyo837]

Ok, when i installed prettier plugin for my vscode, I could see all the configurable items.

Prettier - JavaScript formatter

[maple3142]

javascript formatter seems broken after update to vscode 1.17.2

[yoyo837]

@maple3142
No, just replace an another formatter, if you do not follow this updates and change your settings, it may not work.

Edit：

In .vscode/settings.json I added three new configuration items：

{
  "prettier.singleQuote": true,
  "prettier.semi":false,
  "vetur.format.defaultFormatter.html": "js-beautify-html"
}

[octref]

@maple3142 Can you provide more info on what's not working?

If you don't like prettier, you can always set vetur.format.defaultFormatter.js: "vscode-typescript", which will behave like it's in 0.9.x.

[Daedalus11069]

@octref Not that I'm maple3142, but I too have experienced the bug I believe they are referencing; to expand: when saving a file with a wrongly indented method in an object, the incorrect indents remain, and nothing is changed. I could try to provide a gif, but my methods for generating them aren't very easy at this moment.

And yes, I tried the vscode-typescript setting you mentioned above; no change.

Example of incorrectly indented method:

export default {
    methods: {
        one() {
            }
    }
}

[octref]

"editor.formatOnSave": true

[Daedalus11069]

@octref It is already set to true.

[octref]

@Daedalus11069 Any errors on Panel -> Output -> Vue Language Server? OS / VS Code / Vetur versions?

It's working for me.

[Daedalus11069]

@octref The error messages are as follows, repeating indefinitely; apologies for not including this sooner:

[Error - 3:30:00 PM] Request textDocument/documentHighlight failed.
  Message: Request textDocument/documentHighlight failed with message: Cannot read property 'version' of undefined
  Code: -32603 
[Error - 3:30:02 PM] Request textDocument/formatting failed.
  Message: Request textDocument/formatting failed with message: Cannot read property 'positionAt' of undefined
  Code: -32603 
[Error - 3:30:04 PM] Request textDocument/hover failed.
  Message: Request textDocument/hover failed with message: Cannot read property 'version' of undefined
  Code: -32603 

Edit: Not that it matters anymore.. restarted and it's working now. Still, not deleting this post in case it helps to pinpoint the problem... if there is one.

[Darkbish]

js formatter seems not to read .eslintrc rules.

this.nodes.forEach(node => { const children = node.childNodes.map(({ data }) => data).sort((a, b) => a.orderId - b.orderId); node.data = { ...node.data, children }; node.updateChildren(); });
.eslintrc rules:

```
// http://eslint.org/docs/user-guide/configuring

module.exports = {
root: true,
parser: 'vue-eslint-parser',
parserOptions: {
parser: 'babel-eslint',
sourceType: 'module',
ecmaVersion: 2017,
},
env: {
browser: true,
commonjs: true,
},
extends: ['airbnb-base', 'plugin:vue/recommended'],
// check if imports actually resolve
settings: {
'import/resolver': {
webpack: {
config: 'build/webpack.base.conf.js',
},
},
},
// add your custom rules here
rules: {
// don't require .vue extension when importing
'import/extensions': [
'error',
'always',
{
js: 'never',
vue: 'never',
json: 'never',
},
],
// allow optionalDependencies
'import/no-extraneous-dependencies': [
'error',
{
optionalDependencies: ['test/unit/index.js'],
},
],
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
'no-console': process.env.NODE_ENV === 'production' ? 2 : 0,
/*
* vue-eslint-parser 有 bug，max-len会检测 script 标签的内容
* https://github.com/mysticatea/vue-eslint-parser
*/
'max-len': 0,
'no-mixed-operators': 0,
'no-plusplus': 0,
'no-param-reassign': 0,
'prefer-promise-reject-errors': 0,
'object-curly-newline': 0,
'no-use-before-define': 0,
'arrow-parens': [2, 'as-needed', { requireForBlockBody: true }],
},
};
`` parameternode` of lambada should have brackets，but the formatter removes the brackets.

[cjq38679093]

when I am trying to set vetur.format.defaultFormatter.js: "vscode-typescript", I got below error: Value is not accepted. Valid values: ["none","js-beautify-html"]

[mcrapts]

For me too formatting isn't working anymore after the the update to the latest VSCode. It seems like .eslintrc.js is ignored.

[martinschleiss]

For those looking for a quick fix for vue files with <script lang="ts">, add this to your settings:

"vetur.format.defaultFormatter.ts": "vscode-typescript"

[maple3142]

@octref thanks, it works as before after I set "vetur.format.defaultFormatter.js": "vscode-typescript"

[hellodigua]

@octref thanks, it can work after I set

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

[yaliv]

How to integrate with .eslintrc.js?
I've set "prettier.eslintIntegration": true, install "devDependencies": "prettier-eslint", but doesn't work.

[mcrapts]

Until recently, Vetur formatting worked out of the box with Vue. Somehow Vetur got broken after the most recent VSCode update (1.17.2). With broken I mean that my Vue project (generated using vue-cli) with ESLint standard config was not adhered. So formatting .vue files would result in:

• Lines ending with semicolons (which is not according to to my ESLint standard config)
• Double quotes instead of single quotes (which is also defined in the ESLint standard config)
• Multi-line chained methods (sometimes I'm ok with chained methods on a single-line, used to work fine)

This basically means that anyone starting a Vue project using vue-cli with the (default) standard config will have broken formatting when using VSCode and Vetur. After some plenty research, I ended up adding the following the configuration parameters to my VSCode settings to fix these issues:

{
    "vetur.format.defaultFormatter.js": "vscode-typescript",
    "vetur.format.defaultFormatter.html": "js-beautify-html"
}

This will make everything work as it used to. I don't really understand why the default settings are broken or why I have do this at all, but in any case, this fixed my issues. I'm not sure where the problem exactly lies. Do we need to update the documentation to explain the necessary steps to make sure Vetur works, or is it perhaps more wise to make sure the default configuration works?

[Christilut]

@mcrapts thanks so much! I had the exact same thing and this solved it. Had no idea why everything suddenly broke...

Maybe Vetur can get some better testing here? vue-cli webpack template is the base for a lot of projects, I'd expect it to work perfectly there.

[johncloud200]

but ctrl+space code suggestion not working?

[octref]

js-beautify was removed because it was causing issues for people and upstream bugs never get fixed.

Changing to prettier was my own opinion. You are still given the option to use the old formatter.

I'll update veturpack after I implement prettier-eslint so the formatting can be consistent.

@johncloud200 Open an issue with repro case.

[mcrapts]

@octref I understand your reasoning, but is this alternative better? Because now it doesn't work at all without additional configuration.

[octref]

When prettier-eslint support is added it'll work out of the box, since eslint has autofix for space before paren. This way .eslintrc becomes a single source of truth for your code format (errors + formatter).

TS formatter on the other hand don't care about ESLint.

[mcrapts]

Alright, seems like the way to go then. Until then I'll use the above configuration :).

[savokiss]

Note that "javascript.format.insertSpaceBeforeFunctionParenthesis": true is necesarry too~

All added settings below:

  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,

[cr0cK]

Like already said, it'd be cool if Vetur could read the prettier configuration instead of having to set it in worspace settings configuration for teams that use several editors.

[manico]

Is is possible for vetur to read .eslintrc? I have setup airbnb code rules and I do not want to change them. But since last update everything is broken. It is forcing me to use prettier which I do not want. 😞

[octref]

• 1 has been addressed by #504.
• 2, 3 maybe do it until people want it
• 4 tracked by #424

ESLint integration is in #478. Will release soon.

[philipithomas]

Thanks @octref - looking forward to this release.

[mariusa]

This still doesn't work in vetur 0.11.5, vscode 1.19.1:

So formatting .vue files would result in:
Lines ending with semicolons (which is not according to to my ESLint standard config)

eslint 4.15 installed globally
Workspace: /home/user/work
Code folder: /home/user/work/dashboard

/home/user/work/dashboard/.eslintrc.js

// http://eslint.org/docs/user-guide/configuring

module.exports = {
    root: true,
    parser: 'babel-eslint',
    parserOptions: {
        sourceType: 'module'
    },
    env: {
        browser: true,
    },
    // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
    extends: 'standard',
    // required to lint *.vue files
    plugins: [
        'html'
    ],
    'globals': {
        'document': true,
        'window': true,
        'axios': true,
        'axi': true,
        'l': true
    },
    // add your custom rules here
    //"off" or 0 - turn the rule off; "warn" or 1 - turn the rule on as a warning (doesn’t affect exit code); "error" or 2 - turn the rule on as an error (exit code is 1 when triggered)
    'rules': {
        // allow paren-less arrow functions
        'arrow-parens': 0,
        // allow async-await
        'camelcase': 0,
        'generator-star-spacing': 0,
        'indent': 0,
        'no-multiple-empty-lines': 0,
        'no-trailing-spaces': 0,
        'padded-blocks': 0,
        'space-before-function-paren': 0,
        'spaced-comment': 0,
    'semi': 0,
    'quotes': 0,
        // allow debugger during development
        'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
    }
}

When saving a .vue file, semicolons are added automatically (instead of being removed)
.js files work fine, probably not managed by this extension, but eslint

[yoyo837]

@mariusa
In .vscode/settings.json
"prettier.semi": false,

[mariusa]

Thanks, that does work. But above @octref says

This way .eslintrc becomes a single source of truth for your code format (errors + formatter).

So, why is vscode settings "prettier.semi" still needed?

[octref]

@mariusa If you have ESLint autofix for semi rule, then it should not be needed.
Do you mind forking https://github.com/octref/veturpack to make a repro-case with your eslint settings?

[boulaycote]

vscode 1.19.2 vetur 0.11.6, cannot get .vue files to format according to eslintrc.js. .js files format without issue.

module.exports = { root: true, parser: 'babel-eslint', parserOptions: { sourceType: 'module' }, env: { browser: true, }, // https://github.com/standard/standard/blob/master/docs/RULES-en.md extends: 'standard', // required to lint *.vue files plugins: [ 'html' ], // add your custom rules here rules: { // allow async-await 'generator-star-spacing': 'off', // allow debugger during development 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off' } }

[ryzokuken]

Vetur's version of prettier does not respect my ESLint rules even though I have prettier.eslintIntegration set to true. Is this a known issue?

[yongjun21]

This might be related to https://github.com/prettier/prettier-eslint/issues/94. I have set up a PR https://github.com/prettier/prettier-eslint/pull/165. Waiting for prettier-eslint maintainer to approve and then we can propagate it to editor plugin makers

[octref]

Follow doc https://vuejs.github.io/vetur/linting-error.html or the setup at https://github.com/octref/veturpack

Please do not use plugins: ['html'].

[yongjun21]

I am fairly certainly this is a bug with the vue-language-server. In https://github.com/vuejs/vetur/blob/master/server/src/utils/prettier/index.ts#L42, the only thing passed into prettier-eslint is just the text and some prettier fallback options. options.filename is not passed in. .eslintrc has to been resolve from file location. Thus in the absence of filename, eslint --fix will be called with an empty option hence nothing will be changed after prettier step.

[yongjun21]

Please reopen this issue. A one-liner fix filePath: filePath after line https://github.com/vuejs/vetur/blob/master/server/src/utils/prettier/index.ts#L43 is all needed to resolve the bug.

[octref]

@yongjun21 It's more involved than you thought. Passing in filePath causes prettier-eslint to use that filePath to read the whole Vue file and everything breaks (we should only send in the content between <script>). I'll drop dependency on prettier-eslint and use prettier and eslint directly.

[reuwi]

@dmzkrsk I have updated the vetur to 0.12.3, and this problem still existed...

[casprwang]

I still have a formatting issue with Vetur, it's pretty annoying. I am pretty sure my eslintrc is fine but for some reason, Vetur prefers to use prettier and failed on reading my eslintrc. I sincerely suggest Vetur to use eslint for formatting, it's just better than prettier in a lot of ways.

[rickyruiz]

I had "prettier.eslintIntegration": true, in my User Settings for the Prettier Extension, commenting that out fixed Vetur formatting for me.

[dysol]

Can someone confirm that Vetur is not reading .eslintrc.js file for prettier formatting?

[roberthgodoy]

Note that "javascript.format.insertSpaceBeforeFunctionParenthesis": true is necesarry too~

All added settings below:

  "vetur.format.defaultFormatter.js": "vscode-typescript",
  "vetur.format.defaultFormatter.html": "js-beautify-html",
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,

Also needing the following configuration:

"editor.tabSize": 2
Thxs