Formatting issues #476

octref · 2017-10-18T21:39:06Z

scriptDoc.languageId seems to always be javascript even if lang="ts". This causes the defaultFormatter used for js to be used for ts.
Don't know if people would want to have a separate prettier setting than their global one, so maybe add prettier to defaultFormatterOptions.
Might be good to add stylus-supremacy to defaultFormatterOptions too for some more sane defaults.
Does not work well with multiple workspace now because of settings. Will take a look later.

The text was updated successfully, but these errors were encountered:

rickyruiz · 2017-10-19T02:54:45Z

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 · 2017-10-19T02:57:55Z

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 · 2017-10-19T03:39:36Z

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 · 2017-10-19T03:43:08Z

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

Prettier - JavaScript formatter

maple3142 · 2017-10-19T16:20:25Z

javascript formatter seems broken after update to vscode 1.17.2

yoyo837 · 2017-10-19T16:36:20Z

@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 · 2017-10-19T17:46:24Z

@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 · 2017-10-19T21:14:47Z

@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 · 2017-10-19T21:38:21Z

"editor.formatOnSave": true

Daedalus11069 · 2017-10-19T21:43:18Z

@octref It is already set to true.

octref · 2017-10-19T22:24:31Z

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

It's working for me.

Daedalus11069 · 2017-10-19T22:36:41Z

@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 · 2017-10-20T04:02:00Z

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 }],
 },
};

parameter node of lambada should have brackets，but the formatter removes the brackets.

cjq38679093 · 2017-10-20T06:16:06Z

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 · 2017-10-20T08:29:48Z

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

ghost · 2017-10-20T09:19:06Z

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 · 2017-10-20T11:43:11Z

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

hellodigua · 2017-10-20T18:44:16Z

@octref thanks, it can work after I set

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

yaliv · 2017-10-21T09:37:37Z

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

mcrapts · 2017-10-22T11:43:51Z

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 · 2017-10-24T11:12:42Z

@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 · 2017-10-24T15:17:00Z

but ctrl+space code suggestion not working?

octref · 2017-10-24T16:32:42Z

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 · 2017-10-24T17:01:59Z

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

octref · 2017-10-24T17:06:06Z

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 · 2017-10-24T17:25:10Z

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

savokiss · 2017-10-27T02:32:59Z

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 · 2017-10-28T19:01:51Z

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 · 2017-11-01T08:24:42Z

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 · 2017-11-06T14:52:00Z

1 has been addressed by Refactor component analysis #504.
2, 3 maybe do it until people want it
4 tracked by Multi root support #424

ESLint integration is in #478. Will release soon.

philipithomas · 2017-11-07T03:47:04Z

Thanks @octref - looking forward to this release.

mariusa · 2018-01-08T11:29:06Z

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 · 2018-01-08T11:36:18Z

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

mariusa · 2018-01-08T11:50:25Z

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 · 2018-01-16T07:00:58Z

@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 · 2018-01-23T01:56:33Z

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 · 2018-02-06T13:56:52Z

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 · 2018-03-07T03:24:51Z

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

octref · 2018-03-07T03:42:35Z

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 · 2018-03-07T07:59:28Z

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 · 2018-03-07T08:13:55Z

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 · 2018-04-02T23:00:38Z

@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 · 2018-05-25T08:11:21Z

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

casprwang · 2018-06-15T00:04:29Z

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 · 2018-06-15T00:12:07Z

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

axdyng · 2018-06-19T11:59:10Z

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

roberthgodoy · 2018-09-16T01:03:29Z

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

jovylle · 2022-04-07T09:41:26Z

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,

the line

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

is not needed.

octref added the lsp:formatting label Oct 18, 2017

octref mentioned this issue Oct 19, 2017

Question: New formatting options #479

Closed

mjbvz mentioned this issue Oct 19, 2017

javascript in .vue not formatting correctly after update microsoft/vscode#36554

Closed

octref mentioned this issue Oct 19, 2017

fomatter problem to insert space before function parenthesis #482

Closed

octref closed this as completed Nov 6, 2017

prograhammer mentioned this issue Dec 21, 2017

Adds .vue functionality TypeStrong/fork-ts-checker-webpack-plugin#77

Merged

dmzkrsk mentioned this issue Apr 28, 2018

Pass filePath to prettier-eslint to locate eslint config #775

Merged

Formatting issues #476

Formatting issues #476

Comments

octref commented Oct 18, 2017

rickyruiz commented Oct 19, 2017

octref commented Oct 19, 2017

yoyo837 commented Oct 19, 2017

yoyo837 commented Oct 19, 2017

maple3142 commented Oct 19, 2017

yoyo837 commented Oct 19, 2017 • edited Loading

octref commented Oct 19, 2017

Daedalus11069 commented Oct 19, 2017

octref commented Oct 19, 2017

Daedalus11069 commented Oct 19, 2017

octref commented Oct 19, 2017

Daedalus11069 commented Oct 19, 2017 • edited Loading

Darkbish commented Oct 20, 2017

cjq38679093 commented Oct 20, 2017

mcrapts commented Oct 20, 2017

ghost commented Oct 20, 2017

maple3142 commented Oct 20, 2017

hellodigua commented Oct 20, 2017 • edited Loading

yaliv commented Oct 21, 2017

mcrapts commented Oct 22, 2017 • edited Loading

Christilut commented Oct 24, 2017

johncloud200 commented Oct 24, 2017

octref commented Oct 24, 2017

mcrapts commented Oct 24, 2017

octref commented Oct 24, 2017

mcrapts commented Oct 24, 2017 • edited Loading

savokiss commented Oct 27, 2017

cr0cK commented Oct 28, 2017

manico commented Nov 1, 2017 • edited Loading

octref commented Nov 6, 2017

philipithomas commented Nov 7, 2017

mariusa commented Jan 8, 2018

yoyo837 commented Jan 8, 2018 • edited Loading

mariusa commented Jan 8, 2018

octref commented Jan 16, 2018

boulaycote commented Jan 23, 2018

ryzokuken commented Feb 6, 2018

yongjun21 commented Mar 7, 2018

octref commented Mar 7, 2018

yongjun21 commented Mar 7, 2018 • edited Loading

yongjun21 commented Mar 7, 2018

octref commented Apr 2, 2018

reuwi commented May 25, 2018 • edited Loading

casprwang commented Jun 15, 2018 • edited Loading

rickyruiz commented Jun 15, 2018

axdyng commented Jun 19, 2018

roberthgodoy commented Sep 16, 2018

jovylle commented Apr 7, 2022

yoyo837 commented Oct 19, 2017 •

edited

Loading

Daedalus11069 commented Oct 19, 2017 •

edited

Loading

hellodigua commented Oct 20, 2017 •

edited

Loading

mcrapts commented Oct 22, 2017 •

edited

Loading

mcrapts commented Oct 24, 2017 •

edited

Loading

manico commented Nov 1, 2017 •

edited

Loading

yoyo837 commented Jan 8, 2018 •

edited

Loading

yongjun21 commented Mar 7, 2018 •

edited

Loading

reuwi commented May 25, 2018 •

edited

Loading

casprwang commented Jun 15, 2018 •

edited

Loading