使用vue cli3+typescript重构老项目,原来项目中有这样一段使用了特殊符号的代码:
//template
<span slot="prefold"><<</span>
<span slot="nextfold">>></span>
原来的项目是vue2.0项目,虽然有红线标注错误但是不影响项目编译使用。
但是现在的vue cli3+typescript注重错误检测,会影响编译。
于是eslint检查报错了:
Failed to compile.
./src/views/overview/overview.vue
Module Error (from ./node_modules/eslint-loader/index.js):
error: Parsing error: invalid-first-character-of-tag-name (vue/no-parsing-error) at src\views\overview\overview.vue:608:39:
606 | <Icon type="arrow-right"></Icon>
607 | </span>
> 608 | <span slot="prefold"><<</span>
| ^
609 | <span slot="nextfold">>></span>
610 | </Page>
611 | </div>
error: Parsing error: invalid-first-character-of-tag-name (vue/no-parsing-error) at src\views\overview\overview.vue:608:40:
606 | <Icon type="arrow-right"></Icon>
607 | </span>
> 608 | <span slot="prefold"><<</span>
| ^
609 | <span slot="nextfold">>></span>
610 | </Page>
611 | </div>
2 errors found.
报错invalid-first-character-of-tag-name
指的是无效的<标签,没有检测到对应的>标签。
我首先想对此规则进行一些处理或者屏蔽,但是出于屏蔽规则或者修改是下下策,还是对template中的标签使用做了规范处理:
不再直接使用<``>
html特殊字符用原始码,
<
原始码为<
>
原始码为>
修改代码:
<span slot="prefold"><<</span>
<span slot="nextfold">>></span>
检测通过。