Bug: Doesn't take the singleQuote option

[Applelo]

Since the 1.0.10, singlequote are transformed into double quotes even if I set singleQuote option.
I tried with the 1.0.9 and I don't have this bug.

For example:

- const faker = require('faker')

is transformed into

- const faker = require("faker")

[Shinigami92]

Is it only in these code blocks?

[Applelo]

No, in all my pug files, single quotes are tranformed into double quotes.

[Shinigami92]

Do you have a repo that you can link?
And can you copy your prettier config?

[Shinigami92]

I can't reproduce it? I have a project with 81 pug files

My .prettierrc.json config

{
  "arrowParens": "always",
  "bracketSpacing": true,
  "printWidth": 120,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "none",
  "tabWidth": 2,
  "useTabs": false,
  "overrides": [
    {
      "files": ["*.pug"],
      "options": {
        "tabWidth": 2,
        "singleQuote": false
      }
    }
  ]
}

[Shinigami92]

I also have tests for this: https://github.com/prettier/plugin-pug/tree/master/test/quotes

[Applelo]

I have create a repo with an example of the problem. The prettier config is in the package.json.
https://github.com/Applelo/plugin-pug-issue-45

[Shinigami92]

Ha! I got it

The code in your pug file is JavaScript
JavaScript will be single quoted
And pug attributes will be double quoted

Just add a tag with attributes and play with the singleQuote attribute in both places
Then you will understand

[Applelo]

For me, pug attributes are singleQuoted and javascript content is transformed into double quotes.

[Shinigami92]

plugin-pug/src/index.ts

Line 147 in b7d26c7

const codeInterpolationOptions = { singleQuote: !singleQuote, printWidth: 9000 };

The quotes will always be the other way around than JavaScripts configuration

[Applelo]

No way to have singleQuote everywhere in my pug files ?

[Shinigami92]

Currently no.
I have to investigate if this can be possible.
I think that I have done this for a reason 🤔

[Shinigami92]

https://github.com/prettier/plugin-pug/blob/master/test/quotes/single-to-double/formatted.pug

Here the colon prefixed values and the curly braced value are JavaScript

I'm thinking about to implement options for enabling vue and angular specialized code...

Is it a huge problem for you that the quotes are different for js and pug in one file?

[Applelo]

It's not a huge problem but I prefer to have only single quotes in all my projects. Don't have this possibility will make me use another formater for pug files but I understand why you make this choice.

[Shinigami92]

Ok, using another formatter means a huge problem 😏

So I will work on it the next days

I need two things from you

1. are you using any frameworks like vue or angular?
2. give me some pug code with complex examples how you want to have the formatted result. Then I can use it as input and output for my tests

[Applelo]

Yeah, maybe in the future I will work with Vue and Pug. I will make you soon a sample with complex pug code.

[Shinigami92]

Sorry, but I think I will only find time next weekend

[Shinigami92]

@Applelo Ok, I have currently released a 1.0.11
Please give me an example with code how you want it to be formatted and I'll work on it tomorrow

[Applelo]

Sorry for the delay, I have create a repository with a sample of pug code and how I format it: https://github.com/Applelo/pug-example

I will update this with more example when I will have more time to do it.

[Shinigami92]

Thank you, that's something I can work with!
Please be patient with me if I only have time upcoming weekend

[Applelo]

No problem, take your time. Your are already nice to answer to my requests ^^

[Shinigami92]

@Applelo I'm thinking about three ways to implement this

1. Introduce new option pugCodeSingleQuote with true/false
   • A thierd option... JS quotes, pug quotes and pug code quotes 😨
2. Introduce new option attributeSingleQuote with true/false
   • This aligns with the attributeSeparator option of my plugin
   • Introduce a breaking change
3. Try to access the base option of singleQuote and also try to access the singleQuote in overrides for pug
   • This could be very hard and may cause side effects
   • Introduce a breaking change

Currently I like option 2. the most, but it may be that someone else want very exotic configurations that allows single quote in js code, single quote for pug attributes and double quotes for code in pug 😨
This could only be handled by 1. option

[Shinigami92]

Maybe I implemented it ... 🤔
And ... oh XD, your test file is not node-8 compatible 🤣

It's really not optimized and can bleed bugs that I didn't cover
Could you test the branch against a huge codebase?

[Applelo]

Yeah we use Node 10 to default (webpack 5 ready :) ).

Could you test the branch against a huge codebase?

What do you mean? Do you want a automated test in my repo to compare the output?

[Shinigami92]

Yeah we use Node 10 to default (webpack 5 ready :) ).

Nice to hear

What do you mean? Do you want a automated test in my repo to compare the output?

git clone git@github.com:prettier/plugin-pug.git
cd plugin-pug
git switch issue-45
yarn
yarn build

Then

yarn link
cd to your project
yarn link @prettier/plugin-pug

And finally yarn prettier --write src/**/*.pug

https://yarnpkg.com/lang/en/docs/cli/link/
If you're using npm: https://docs.npmjs.com/cli/link.html

Then tell me if everything is working as expected or if there are any bugs
Especially if there are interpolated code with complex quotation
In example: div(class=`${jsVariable + "someString"}`) ... I dont even know what my formatter would do with that XD
I should add more tests 🤔😣

---

I have a repo from my work, but there no JS in pug is used, because we're using vue (v-if, v-for and so on)
So sadly, I have not such a big codebase with native pug

[Shinigami92]

@Applelo Could you try 1.6.0-issue-105.1 and report if it fits your need?

So maybe you now need a config like

{
  "singleQuotes": true,
  "pugSingleQuotes": true
}

If this doesn't fix the problem I'm sorry to say I can't fix it, due to the technical implementation :(

[Applelo]

Sorry to not have test your previous answer. I was and I am currently busy at work. I test this when I have time :)

[Shinigami92]

Spolier: it won't work 😭
sorry :/

Need to investigate more, also maybe I need to create a breaking change 😬

[Shinigami92]

@Applelo Thank to the lovely work of @shadowgate15 we now released https://www.npmjs.com/package/@prettier/plugin-pug/v/1.18.0 ❤️ 🙌