前端 - 开发eslint自定义规则时，报错 Unexpected token < ,该如何解决？

Question

开发eslint自定义规则时，我测试的代码是 <img src='assets/img.png' /> ,

运行 yarn run test， 报错说 AssertionError [ERR_ASSERTION]: A fatal parsing error occurred: Parsing error: Unexpected token <， 如下图

是因为解析有问题吗？安装和配置了babel-eslint，仍然有这个问题

Answer 1

我合计着,<img src='assets/img.png' />本身也不是合法的js代码吧?
你应该把这段html代码,转成ast,然后再分析ast是不是符合期望

Answer 2

出现 "Unexpected token <" 的错误通常意味着 ESLint 在尝试解析你的代码时遇到了一个它不期望的字符 <。在大多数情况下，这是因为 ESLint 默认使用 ECMAScript 解析器，而你的代码包含了 HTML 标签或类似的非 ECMAScript 代码。

对于你的具体情况，你正在尝试测试包含 HTML 标签和 Markdown 链接的代码片段。ESLint 默认不会解析这些类型的代码，因此你需要告诉 ESLint 如何处理它们。

以下是一些可能的解决方案：

1. 使用正确的解析器：

   • 如果你正在测试 JavaScript 文件，确保它们只包含有效的 JavaScript 代码。
   • 如果你需要解析 HTML 或其他类型的文件，你可能需要使用不同的解析器或插件，比如 eslint-plugin-html。

2. 配置 ESLint 以支持非标准语法：

   • 对于 HTML 文件中的 <script> 标签内的 JavaScript，你可以使用 eslint-plugin-html。
   • 对于 Markdown 文件中的代码块，你可能需要确保 ESLint 只检查被标记为 JavaScript 的代码块。

3. 检查你的测试代码：

   • 确保你的测试代码没有错误，并且正确地使用了 ESLint 的 API。
   • 如果你的测试代码包含非 JavaScript 代码，你可能需要修改测试逻辑，以便只检查 JavaScript 部分。

4. 查看 ESLint 配置：

   • 仔细检查你的 .eslintrc 或 ESLint 配置部分，确保你正确设置了解析器和插件。
   • 如果你已经安装了 babel-eslint，确保在配置文件中正确地引用了它。

5. 更新 ESLint 和相关插件：

   • 有时候，错误可能是由于使用了过时的 ESLint 或插件版本。尝试更新到最新版本。

6. 查看 ESLint 文档和社区：

   • ESLint 的官方文档和社区论坛可能包含关于如何处理此类问题的更多信息。

如果你已经尝试了上述建议但仍然遇到问题，请提供更多的上下文，包括你的 ESLint 配置文件和测试代码示例，这样我可以给出更具体的建议。