如何修复解析错误：Vue 中的 invalid-first-character-of-tag-name.eslint (vue/no-parsing-error)

Posted 2023-03-22

【中文标题】如何修复解析错误：Vue 中的 invalid-first-character-of-tag-name.eslint (vue/no-parsing-error)

【英文标题】：How to fix Parsing error: invalid-first-character-of-tag-name.eslint (vue/no-parsing-error) in Vue

【发布时间】：2021-11-06 07:02:20

【问题描述】：

代码

 <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>

如何解决 vue 中的这个解析错误？

有没有办法在不禁用 eslint 规则的情况下解决这个问题？

【问题讨论】：

这个comment 可能会有所帮助。

【参考方案1】：

在我的例子中，通过在.eslintrc.js 的rules 下添加以下内容：

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

---

PS：您可能需要停止服务器并运行npm run lint 才能应用规则

【参考方案2】：

不想更新 eslint 的其他解决方案：

使用 v-text 指令：

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

或者用&lt替换<，用&gt替换>：

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