prettier: can not parse style in '.vue'

[zhimng]

Sorry, I didn't find the settings I needed on https://prettier.io/playground.

I want to set the style support for vue files in prettier, but I always set it incorrectly. I can format less and css files, but always not for vue files.

Prettier 2.0.5
I can't provide that.

.pretterrc.js

module.exports = {
  endOfLine: 'auto',
  trailingComma: 'none',
  arrowParens: 'avoid',
  singleQuote: true,
  insertPragma: false,
  HTMLWhitespaceSensitivity: 'ignore',
  overrides: [
    {
      files: ['*.less', '*.css'],
      options: {
        singleQuote: false,
        insertPragma: false
      }
    }
  ]
};

Input:

<template>
  <div class="container"></div>
</template>
<style lang="less" scoped>
.container {
    content: "i want double quotes";
  }
</style>

Output:

...
error  Replace `"i want double quotes"` with `'i want double quotes'`  prettier/prettier
...

package.json

"eslint": "^6.8.0",
"eslint-config-prettier": "^6.11.0",
"eslint-loader": "^4.0.2",
"eslint-plugin-prettier": "^3.1.3",
"eslint-plugin-vue": "^7.0.0-alpha.5",
"prettier": "2.0.5",
"stylelint": "^13.5.0",
"stylelint-config-prettier": "^8.0.1",
"stylelint-config-standard": "^20.0.0",
"stylelint-prettier": "^1.1.2",
"stylelint-webpack-plugin": "^2.0.0",

Expected behavior:

can use double quotes in style tag

[zhimng]

I tried setting parser to vue in overrides, but it didn't work. like that:

module.exports = {
  endOfLine: 'auto',
  trailingComma: 'none',
  arrowParens: 'avoid',
  singleQuote: true,
  insertPragma: false,
  HTMLWhitespaceSensitivity: 'ignore',
  overrides: [
    {
      files: ['*.less', '*.css'],
      options: {
        parser: 'vue',
        singleQuote: false,
        insertPragma: false
      }
    }
  ]
};

[fisker]

Prettier 2.0.5
Playground link

--parser vue
--single-quote

Input:

<template>
  <div class="container"></div>
</template>
<style lang="less" scoped>
.container {
    content: "i want double quotes";
  }
</style>

Output:

<template>
  <div class="container"></div>
</template>
<style lang="less" scoped>
.container {
  content: 'i want double quotes';
}
</style>

[fisker]

Settings should be

module.exports = {
  // ...
  overrides: [
    {
      files: ['*.vue'],
      options: {
        parser: 'vue',
        // ...
      }
    }
  ]
};

[zhimng]

@fisker I have tried this configuration, but if set this way, then the JS in the VUE file will also be asked to use double quotes at the same time, I just want to set double quotes in the CSS and single quotes in the JS

[fisker]

I understand your problem now, we can't do this now.

[fisker]

Work around for now, you can use

<style lang="less" scoped src="./style.less"></style>

[alexander-akait]

@fisker Duplicate #5378?

[thorn0]

Duplicate of #5378

[zhimng]

May I know if there are plans to mention this task, or not. Emm...... It's embarrassing. I have to give up use it in my project.

[thorn0]

There are no immediate plans to address this issue. It's pretty complex.

[InsightAdimn]

Hey thorn0,
I have had nothing but problems with prettier and vue. I have lost countless hours trying to configure prettier to be usable with vue (and others) I followed this article by Jon Gallant and it helped.