0

Background

I have tried several keywords but was not able to find a solution to disable prettier's quotes modification. I am working on a Polymer Lit project and I have tried a lot of things but it is really hard to maintain the code indentation ... So prettier does a very good job but only one problem which breaks my code.

Code Before Formatting

html`<div style="${'background-color: ' + this.bgColor }">
...
</div>`

Code After Formatting

html`<div style="${"background-color: " + this.bgColor}">...</div>`

Is there any flag / property I can pass to prettier to ignore or avoid the quotes and all the other things should work out ...

If there isn't can anyone tell me if there is any other Formater that does a clean job with lit element ..

Bergi
  • 630,263
  • 148
  • 957
  • 1,375
anees
  • 1,777
  • 3
  • 17
  • 26
  • Do you have any config file including rules ? – Batuhan Nov 13 '21 at 21:18
  • nope ... I am using vs code extension ... I think that supports all the settings though through configuration file ... – anees Nov 13 '21 at 21:20
  • If you know any prop that disables that thing which it does with quotes .. let me know I can create config – anees Nov 13 '21 at 21:21
  • Hope you find your response [here](https://stackoverflow.com/a/53621884/15288641). – Youssouf Oumar Nov 13 '21 at 21:30
  • @yousoumar thank you for response sir but that's between choosing single and double quotes .. but I want it to leave the quotes be .. – anees Nov 13 '21 at 21:34
  • is this code in js file ? And can you share your editor config ? @anees – Batuhan Nov 13 '21 at 21:41
  • yes the code is in js file ... the current piece of code is inside the LitElement class ... and my editor Config is default ... except I am using prettier as default formatter for js files. – anees Nov 13 '21 at 21:48
  • 1
    Why are you saying this "breaks" your code? The two snippets you've shown are absolutely equivalent, they should both work. Still, if you prefer single over double quotes in your JS strings, [there's a prettier option for that](https://prettier.io/docs/en/options.html#quotes) – Bergi Nov 13 '21 at 22:49
  • @Bergi inside the style attributes you see it converts the single quotes to double quotes which make the style attribute result only to `${` .. – anees Nov 14 '21 at 00:23
  • @anees No, they don't? `${}` in a tagged template literal takes precedence over any quotes. Are you just confused by broken syntax highlighting? – Bergi Nov 14 '21 at 00:40
  • @Bergi wow ... Actually I never tried building it ... because I never saved the file after the formatting because synatx highlighting was broken ... and I didn't know that first template literals will evaluate then the rest and it will not break ... – anees Nov 14 '21 at 16:50
  • @Bergi thank you for pointing out that .. I will try it see ... (even if it works it is going to be a lot more confusing and a lot less readable ...) – anees Nov 14 '21 at 16:51
  • An alternative solution that doesn't have to do with prettier would be just not using the first pair of quotes, when binding using lit, you can do just this `style=${'color:' + color}`. Source: https://lit.dev/docs/templates/expressions/#attribute-expressions – Alan Dávalos Nov 15 '21 at 06:53

1 Answers1

2

This is my .prettierrc for all my lit projects:

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "singleQuote": true,
  "bracketSpacing": false,
  "arrowParens": "always"
}

And in markup I am using this (example):

<div class="wrapper ${this.animated ? 'active' : ''}" ${animate()}>

That works for me and never had any problems.

Christian
  • 3,503
  • 1
  • 26
  • 47