vue [eslint]报错

我在运行vue项目时使用了ly-tab组件,由于代码是从官网直接CV过来的所以在运行时报如下错误:


 ERROR  Failed to compile with 1 error                                                                          19:58:19

[eslint]
C:\Users\微微一笑\Desktop\html\vue-shop\src\views\Home.vue
   3:22  error  Delete `␍`                                                                                                                         prettier/prettier
   4:1   error  Replace `↹<ly-tabs·␍⏎↹↹v-model="value"␍⏎↹↹activeColor='#b0352f'␍⏎↹↹>␍` with `····<ly-tabs·v-model="value"·activeColor="#b0352f">`  prettier/prettier
   8:1   error  Replace `↹··<ly-tab-item·name="1"·title="选项卡1"·/>␍` with `······<ly-tab-item·name="1"·title="选项卡1"·/>`                             prettier/prettier
   9:1   error  Replace `↹··<ly-tab-item·name="2"·title="选项卡2"·/>␍` with `······<ly-tab-item·name="2"·title="选项卡2"·/>`                             prettier/prettier
  10:1   error  Replace `↹··<ly-tab-item·name="3"·title="选项卡3"·/>␍` with `······<ly-tab-item·name="3"·title="选项卡3"·/>`                             prettier/prettier
  11:1   error  Replace `↹··<ly-tab-item·name="4"·title="选项卡4"·/>␍` with `······<ly-tab-item·name="4"·title="选项卡4"·/>`                             prettier/prettier
  12:1   error  Replace `↹··<ly-tab-item·name="5"·title="选项卡5"·/>␍` with `······<ly-tab-item·name="5"·title="选项卡5"·/>`                             prettier/prettier
  13:1   error  Replace `↹··<ly-tab-item·name="6"·title="选项卡6"·/>␍` with `······<ly-tab-item·name="6"·title="选项卡6"·/>`                             prettier/prettier
  14:1   error  Replace `↹··<ly-tab-item·name="7"·title="选项卡7"·/>␍` with `······<ly-tab-item·name="7"·title="选项卡7"·/>`                             prettier/prettier
  15:1   error  Replace `↹` with `····`                                                                                                            prettier/prettier
  25:16  error  Delete `␍`                                                                                                                         prettier/prettier
  26:11  error  Delete `␍`                                                                                                                         prettier/prettier
  27:1   error  Replace `······return··{␍` with `····return·{`                                                                                     prettier/prettier
  28:1   error  Replace `········value:·'1'␍⏎↹↹}␍` with `······value:·"1",`                                                                        prettier/prettier
  30:6   error  Insert `;⏎··}`                                                                                                                     prettier/prettier
  33:11  error  Insert `,`                                                                                                                         prettier/prettier
  37:1   error  Delete `␍⏎␍`                                                                                                                       prettier/prettier
  39:15  error  Delete `␍`                                                                                                                         prettier/prettier
  40:1   error  Replace `↹.ly-tabs{␍` with `.ly-tabs·{`                                                                                            prettier/prettier
  41:1   error  Replace `↹↹position:·fixed;␍` with `··position:·fixed;`                                                                            prettier/prettier
  42:1   error  Replace `↹↹top:·1.6rem;␍` with `··top:·1.6rem;`                                                                                    prettier/prettier
  43:1   error  Replace `↹↹left:·0;␍` with `··left:·0;`                                                                                            prettier/prettier
  44:1   error  Replace `↹}␍` with `}`                                                                                                             prettier/prettier
  45:9   error  Insert `⏎`                                                                                                                         prettier/prettier

✖ 24 problems (24 errors, 0 warnings)
  24 errors and 0 warnings potentially fixable with the `--fix` option.


You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
ERROR in [eslint]
C:\Users\微微一笑\Desktop\html\vue-shop\src\views\Home.vue
   3:22  error  Delete `␍`                                                                                                                         prettier/prettier
   4:1   error  Replace `↹<ly-tabs·␍⏎↹↹v-model="value"␍⏎↹↹activeColor='#b0352f'␍⏎↹↹>␍` with `····<ly-tabs·v-model="value"·activeColor="#b0352f">`  prettier/prettier
   8:1   error  Replace `↹··<ly-tab-item·name="1"·title="选项卡1"·/>␍` with `······<ly-tab-item·name="1"·title="选项卡1"·/>`                             prettier/prettier
   9:1   error  Replace `↹··<ly-tab-item·name="2"·title="选项卡2"·/>␍` with `······<ly-tab-item·name="2"·title="选项卡2"·/>`                             prettier/prettier
  10:1   error  Replace `↹··<ly-tab-item·name="3"·title="选项卡3"·/>␍` with `······<ly-tab-item·name="3"·title="选项卡3"·/>`                             prettier/prettier
  11:1   error  Replace `↹··<ly-tab-item·name="4"·title="选项卡4"·/>␍` with `······<ly-tab-item·name="4"·title="选项卡4"·/>`                             prettier/prettier
  12:1   error  Replace `↹··<ly-tab-item·name="5"·title="选项卡5"·/>␍` with `······<ly-tab-item·name="5"·title="选项卡5"·/>`                             prettier/prettier
  13:1   error  Replace `↹··<ly-tab-item·name="6"·title="选项卡6"·/>␍` with `······<ly-tab-item·name="6"·title="选项卡6"·/>`                             prettier/prettier
  14:1   error  Replace `↹··<ly-tab-item·name="7"·title="选项卡7"·/>␍` with `······<ly-tab-item·name="7"·title="选项卡7"·/>`                             prettier/prettier
  15:1   error  Replace `↹` with `····`                                                                                                            prettier/prettier
  25:16  error  Delete `␍`                                                                                                                         prettier/prettier
  26:11  error  Delete `␍`                                                                                                                         prettier/prettier
  27:1   error  Replace `······return··{␍` with `····return·{`                                                                                     prettier/prettier
  28:1   error  Replace `········value:·'1'␍⏎↹↹}␍` with `······value:·"1",`                                                                        prettier/prettier
  30:6   error  Insert `;⏎··}`                                                                                                                     prettier/prettier
  33:11  error  Insert `,`                                                                                                                         prettier/prettier
  37:1   error  Delete `␍⏎␍`                                                                                                                       prettier/prettier
  39:15  error  Delete `␍`                                                                                                                         prettier/prettier
  40:1   error  Replace `↹.ly-tabs{␍` with `.ly-tabs·{`                                                                                            prettier/prettier
  41:1   error  Replace `↹↹position:·fixed;␍` with `··position:·fixed;`                                                                            prettier/prettier
  42:1   error  Replace `↹↹top:·1.6rem;␍` with `··top:·1.6rem;`                                                                                    prettier/prettier
  43:1   error  Replace `↹↹left:·0;␍` with `··left:·0;`                                                                                            prettier/prettier
  44:1   error  Replace `↹}␍` with `}`                                                                                                             prettier/prettier
  45:9   error  Insert `⏎`                                                                                                                         prettier/prettier

✖ 24 problems (24 errors, 0 warnings)
  24 errors and 0 warnings potentially fixable with the `--fix` option.


webpack compiled with 1 error

研究了半天发现是由于vue对于html的语法格式要求严格

<ly-tabs v-model="value" activeColor='#b0352f'>
	  <ly-tab-item name="1" title="选项卡1" />
	  <ly-tab-item name="2" title="选项卡2" />
	  <ly-tab-item name="3" title="选项卡3" />
	  <ly-tab-item name="4" title="选项卡4" />
	  <ly-tab-item name="5" title="选项卡5" />
	  <ly-tab-item name="6" title="选项卡6" />
	  <ly-tab-item name="7" title="选项卡7" />
	</ly-tabs>

在标签中的换行符和Tab是原因之一,<ly-tab-item/>标签应该写成双向的<ly-tab-item></ly-tab-item>

最终将这段代码改成这样错误消失

		<ly-tabs
		  v-model="value" 
		  activeColor="#b0352f"
		  >
		      <ly-tab-item name="1" title="选项卡1"></ly-tab-item>
		      <ly-tab-item name="2" title="选项卡2"></ly-tab-item>
		      <ly-tab-item name="3" title="选项卡3"></ly-tab-item>
		      <ly-tab-item name="4" title="选项卡4"></ly-tab-item>
		      <ly-tab-item name="5" title="选项卡5"></ly-tab-item>
		      <ly-tab-item name="6" title="选项卡6"></ly-tab-item>
		      <ly-tab-item name="7" title="选项卡7"></ly-tab-item>
		</ly-tabs>

或者还可以运行如下命令,格式化代码,也能解决这个问题

npm run lint

最后

修狗798希望能帮到您!

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值