How to fix Parsing error: invalid-first-character-of-tag-name.eslint (vue/no-parsing-error) in Vue

Question

Code

 <div class="flex justify-center">
            <vs-chip v-if="current" class="text-base w-24" :color="color">
              {{
                getPercentage > 0 && getPercentage < 3
                  ? "Neutral"
                  : getPercentage > 3 && current < average
                  ? "Buy"
                  : "Sell"
              }}
            </vs-chip>
          </div>

How can I fix this parsing error in vue ?

Is there a way to solve this without disabling the eslint rule ?

Answer 1

In my case by adding the following under the rules of .eslintrc.js worked:

"vue/no-parsing-error": [
    "error", 
    {
        "invalid-first-character-of-tag-name": false,
    }
],

---

PS: you may need to stop the server and run npm run lint for the rule to be applied