0

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.

  • 1
    I'm not observing that behavior (just tried it). Are you sure you're on the latest version of VS Code, Salesforce Extension Bundle, and sfdx? Try updating everything and try again. – sfdcfox Mar 21 at 15:54
  • thanks, just installed yesterday, guess everything hadn't finished installing. wow! – SallyRothroat Mar 21 at 16:03
  • Ok this is still a problem – SallyRothroat Mar 22 at 17:32
  • I tried adding "editor.autoSurround": false to settings – SallyRothroat Mar 22 at 17:32
  • editor.formatOnSave – SallyRothroat Mar 22 at 17:35
1

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/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.