[SalesForce] VS code adds quotes in LWC

This is infuriating. I copy and paste this html from the trailhead module: 

  <template>
  <lightning-card title="HelloWorld" icon-name="custom:custom15">
    <div class="slds-m-around_medium">
      <p>Hello, {greeting}!</p>
      <lightning-input
        label="Name"
        value={greeting}
        onchange={changeHandler}
      ></lightning-input>
    </div>
  </lightning-card>
</template>

Then when I press ctrl + s or when I save with the file menu it automatically throws quotes around {greeting} and {changeHandler}.

This then becomes invalidl, the error message says:

LWC1001: Ambiguous attribute value onchange="{changeHandler}". If you want to make it a valid identifier you should remove the surrounding quotes onchange=

What do I do ? I have no other extensions installed other than salesforce expansion pack.

Best Answer

We create a new file called .prettierignore

now we’re going to do more than just ignore the HTML files actually got this from René Winkelmeyer and I hope he’s okay with me saying his name he works at Salesforce as a dev evangelist. This is a pretty or ignore file from one of the Trailhead example apps.

And I’m going to it’s what it’s going to do is it tells Prettier to ignore CSS, HTML, SVG files, XML files, and anything in the .sfdx folder so Prettier will not check the formatting on those.

All we do is add that to our .prettierignore file. Now when we remove the double quotes,

We press save. it did not work. What did I spell wrong?

Where did I create the .prettierignore file

You have to create it at the base of your project I was not paying enough attention.

Now we can delete the double quotes.

Press Save it prettier did not re insert the double quotes. The lender does not have problems with our syntax and we can carry on with using

properties from our web component in attributes, I will provide a link for the example .prettierignore, I’ll also have the entire contents below.

.prettierignore
**/lwc/**/*.css
**/lwc/**/*.html
**/lwc/**/*.svg
**/lwc/**/*.xml
.sfdx

source:https://wipdeveloper.com/prettier-with-lighting-web-components/

Related Topic