how to disabled volar template format

[hcwhan]

now, I use eslint-plugin-vue and rule vue/max-attributes-per-line vue/singleline-html-element-content-newline
when use format, I can see eslint-plugin-vue change code For a moment volar change again , As shown

So, how to disabled volar template format? only use eslint fix format.
tks

[yaegassy]

Hi, Please refer to this page to change the formatter.

• Tips #53

Formatting tab size config & Change formatter

[hcwhan]

@yaegassy tks
but I don't install Prettier. when I only use volar and eslint, VSCode can't select default formatter

Hi, Please refer to this page to change the formatter.

• Tips #53

Formatting tab size config & Change formatter

[johnsoncodehk]

How do you trigger document formatting? If trigger formatting on save, just disable editor.formatOnSave setting.

VSCode theoretically will not use two formatters at the same time, unless ESLint does not work through the Formatting API.

[hcwhan]

my settings

{
    "editor.formatOnPaste": false,
    "editor.formatOnType": false,
    "editor.formatOnSave": false,

    "[vue]": {
        "editor.formatOnType": true,
        "editor.formatOnSave": true
    },

    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },

    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
        "vue"
    ],
}

oh, tks
now, I set [vue].editor.formatOnSave is false. Is ok.
but if use format question recurrent.
So can you consider add volar format adaptation eslint-plugin-vue?

[johnsoncodehk]

Essentially the problem is that ESLint format conflicts with VSCode format, and volar can't handle.

[holtergram]

Hey there,
as mentioned on the Vue Discord server I'm having the exact propblem but I can't figure out how to disable the formatting by ESlint and/or Volar. Now I've copy & pasted your settings into my user, workspace and folder settings but it still doesn't work.

Here are some of the settings I've played around with. Any idea how to get Prettier running?

// VS Code settings
{
  "volar.tsPlugin": true,
  "volar.icon.preview": true,
  "volar.icon.finder": true,
  "eslint.format.enable": false,
  "editor.formatOnSave": false,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.formatOnType": false,
    "editor.formatOnSave": false
  },
  "editor.codeActionsOnSave": {
    "source.fixAll": false,
    "source.fixAll.eslint": false
  },
  "eslint.workingDirectories": ["./frontend"],
  "prettier.enableDebugLogs": true,
  "prettier.useEditorConfig": false,
  "prettier.enable": true,
  "eslint.format.enable": false,
  "prettier.enable": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
}

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    // https://eslint.org/docs/rules/no-undef#nodejs
    // browser: true,
    // es2021: true,
    node: true,
  },
  parser: 'vue-eslint-parser',

  parserOptions: {
    parser: '@typescript-eslint/parser',
    sourceType: 'module',
    ecmaVersion: 2021,
  },
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:vue/vue3-recommended',
    'plugin:prettier/recommended',
  ],
  plugins: ['vue', '@typescript-eslint'],
  settings: {
    'import/resolver': {
      alias: {
        extensions: ['.vue', '.ts', '.tsx', '.js', '.jsx'],
        map: [['@/', '.src/']],
      },
    },
  },
  rules: {
    // The core 'no-unused-vars' rules (in the eslint:recommended rule set)
    // does not work with type definitions
    'no-unused-vars': 'off',
    // not needed for vue 3
    'vue/no-multiple-template-root': 'off',
  },
}

I have also installed the Pretier-ESlint extension hopeing that I can somehow override everything else but it's just now working -.- Prettier is working as expected if I manually format via CMD + Shift + P -> Format Document with... but get's reset everytime I save the file afterwards.

Help highly appreciated :)

[johnsoncodehk]

@2malh have you try Format Document with.. -> Configure Default Formatter... -> Prettier?

[holtergram]

@2malh have you try Format Document with.. -> Configure Default Formatter... -> Prettier?

Yes, absolutely. As you can see above I have "editor.defaultFormatter": "esbenp.prettier-vscode" set globally, for [javascript] and I've tryed it for [vue] as well.
Problem is that if I disable editor.formatOnSave I don't think that Prettier is ever going to be called.

[johnsoncodehk]

@2malh not sure I understand your needs, do you want to use Prettier automatic formatting when saving vue documents? If yes you just need to set this:

{
	"[vue]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode",
		"editor.formatOnSave": true
	}
}

[holtergram]

I'd love it to be that easy. Activating the formatting like this unfortunately reintroduces the same glitch as you can see in the gif from OP :( So there must be somethting else (ESlint? Volar?) doing it's formatting job too. I'm pretty sure the problem is on my side having something set wrong but so far I haven't found what it is.

[johnsoncodehk]

@2malh the gif problem is ESLint format and VSCode format working at the same time, I don't use ESLint so I can't help, please google "How to disable eslint formatting".

[holtergram]

Well, I've given this a couple more tries without having a clear conclusion but ESlint and Prettier are on the same page when it comes to formatting. Given this line:

If I go Format Document with...-> ESLint or Prettierboth format this line to this:

Same thing happens if I run npx eslint --fix thatfile.vue or npx prettier --write thatfile.vue

But if I now hit save it goes back to the previous single-line formatting which is marked as error.
ESLint is following Prettier rules as can be seen here

So ESLint and Prettier both would love to split this line but it's not happening because of something else.
Is there even the slightest possibility that Volar is doing some kind of formatting?

[johnsoncodehk]

@2malh It sounds like the problem is that you did not succeed in setting ESLint or Prettier as the default formatter. I can try to check your setting, please @ me in Discord.

[holtergram]

Just in case someone else might have this problem in the future: It was the Headwinds extension that collisions with Prettier ^2.3.0

Relevant issues:
prettier/prettier#10918
heybourn/headwind#127

Prettier/eslint worked fine but headwinds reformattet everything into a single line.
Now I'm locked on Prettier 2.2.1 and it works

[nolimitdev]

By disabling VSCode built-in formatter "javascript.format.enable": false Vue.volar does not format script tag any more. Undocumented feature :) But still formatting template tag :( "html.format.enable": false does not disable it. Vue.volar should implement own options as mentioned here #734 (comment) and do not mismatch partially with vscode built-in formatter options.

[johnsoncodehk]

"html.format.enable": false does not disable it.

It should do(implement at https://github.com/volarjs/plugins/blob/a734f87f0ae8903c00e3ff2c4db3350cc2ca1e75/packages/html/src/index.ts#L128-L130), please open a bug report if not works.