Parsing error: No Babel config file detected for xxx Either disable config file checking...报错解决方法

Posted 2023-04-08 Spongebob_nut

Parsing error: No Babel config file detected for xxx Either disable config file checking…报错解决方法

使用Vue3创建项目，创建完成后发现会报错，如下图：

翻译了一下，其实已经告诉我们解决方法了：

Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files.
意思是：使用requireConfigFile:false禁用配置文件检查，或者配置Babel以便它可以找到配置文件。

网上搜索找到了解决方法：
在vue.config.js文件中添加requireConfigFile: false，或者在.eslintrc.js文件中添加requireConfigFile: false（分情况），的确能够解决，但是归根结底，产生这个错误的原因到底是什么呢？
搜索了解到：具体原因是babel的配置文件默认是在根目录进行查找的，而我的编辑器打开的目录不是项目运行的目录。
我把之前加的requireConfigFile: false删去，把项目所在目录作为根目录重新打开，果然没有再报错了。

所以报错的原因：
eslint根据eslint配置文件的parserOption，知道了要使用babel对代码进行解析，但是解析babel需要使用babel配置文件，由于找不到配置文件（babel配置文件默认需要放在根目录下），所以会报错。因此，添加requireConfigFile: false，本质上是告诉eslint，不用查找这个配置文件了，虽然表面上可以解决这个报错，但是在babel配置文件里写的东西也就失效了。
所以重新打开项目，把项目运行目录作为根目录，babel的配置文件的位置放置正确了，eslint就不会报错了。

参考博客：https://www.cnblogs.com/hmy-666/p/16441069.html

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

【中文标题】如何修复解析错误：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>