ESLint 报错：Parsing error: ':' expected

ESLint 报错：Parsing error: ':' expected

随着前端工程化越来越深入人心，Lint 工具的使用也变得越来越普遍。ESLint 可能是目前最受欢迎的 JavaScript 语法检测工具之一。它拥有广泛的配置项，使得我们可以自定义项目中的规则，提高代码的质量以及团队的开发效率。但是在使用 ESLint 的时候，我们可能会遇到各种奇奇怪怪的报错，本篇文章将带着大家一起解决一个比较常见的 ESLint 报错：Parsing error: ':' expected。

问题描述

在一些情况下， ESLint 可能会报错：Parsing error: ':' expected。这种报错通常会提供文件路径和行号，它在代码语法错误时出现，当解析器（比如：babel 或者 TypeScript）尝试解析代码时，发现了错误的语法结构，例如函数体中缺失花括号、标识符错误等。下面是一段具体的示例代码，该代码漏掉了箭头函数中的花括号：

const func = (a, b) => console.log(a, b);

使用 ESLint 检测该代码时，可能会得到如下错误信息：

Parsing error: ':' expected  no-unexpected-multiline

解决方案

解决 ESLint 报错：Parsing error: ':' expected 的方法有很多，下面针对性地进行讲解。

方法一：使用正确的解析器

在项目的 .eslintrc 配置文件中，我们可以指定解析器来支持新的语法特性。比如，这里我们需要支持箭头函数语法，那么就可以在配置文件中指定 babel-eslint 解析器。

{
  "parser": "babel-eslint",
  "rules": {
    "no-unexpected-multiline": "error"
  }
}

这时候再检测代码，就不会出现 Parsing error: ':' expected 报错了。

方法二：在特定规则中禁用 multiline

我们也可以禁用特定的规则来解决这个问题。在这个例子中，报错信息提到了 no-unexpected-multiline 规则，这是一个会对换行符进行检查的规则。我们可以在配置文件中对该规则进行禁用，然后再次检查代码。

{
  "rules": {
    "no-unexpected-multiline": "off"
  }
}

这样即可有效地解决问题。

方法三：添加花括号

最后，我们也可以给箭头函数添加花括号来避免这个问题。这是 ES6 的标准语法，也是一个良好的编程习惯。

const func = (a, b) => { console.log(a, b) };

总结

ESLint 报错：Parsing error: ':' expected 可能由多种原因引起，例如代码中的语法问题、缺失解析器、语法特性不支持等。我们通过在 .eslintrc 中设置合适的规则，或者采取改变代码的方式，都可以有效地避免这个问题。同时，这也提醒我们在平时的编码过程中，要时刻关注语法规范以及代码风格，提高编码质量。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e1d4fef6b2d6eab3d13183