ESLint 是前端开发中广泛使用的 JavaScript 代码质量检查工具之一。然而，在使用 ESLint 进行代码检查时，我们可能会遇到一个很常见的问题：ESLint 不识别 class properties。这个问题的解决方法很简单，不过需要一些深度的学习和理解。
Class Properties 是什么？
Class Properties 是 ECMAScript 2019 中的新增语法，它允许我们直接在 class 中定义实例属性，而无需在 constructor 中进行初始化。一般的 Class Properties 定义格式如下：
class MyClass {
myProp = 42;
}这样一来，我们就无需在 constructor 中初始化 myProp 属性，它会在实例化时自动创建并初始化为默认值 42。
ESLint 如何支持 Class Properties？
ESLint 默认不支持 Class Properties，这是因为 ESLint 基于 Esprima 进行解析代码，而前者至今并未支持 Class Properties 的语法解析。但是，在这种情况下，我们可以使用 Babel 进行转换，然后让 ESLint 基于 Babel 解析代码。
具体来说，我们可以通过以下几个步骤来配置 ESLint + Babel：
- 安装所需依赖
在项目中安装以下依赖：
npm install --save-dev babel-eslint@10.1.0 @babel/core@7.12.10 @babel/eslint-parser@7.12.1 eslint@7.22.0
- 配置
.eslintrc.js
在 .eslintrc.js 文件中进行如下配置：
-- -------------------- ---- -------
-------------- - -
------- -----------------------
-------------- -
------------ -----
----------- ---------
------------------ -----
--
-------- -----------------------
---- -
-------- -----
------- -----
----- ----
-
-其中，我们指定了 parser 为 @babel/eslint-parser，并配置了 parserOptions 来支持 ES2020 语法。
- 配置 Babel
在项目的根目录下创建 .babelrc，进行如下配置：
{
"presets": [
["@babel/preset-env"]
]
}这个配置文件是告诉 Babel 应该如何进行代码转换，这里我们使用了 @babel/preset-env 来支持最新版本的 JavaScript 语法。
一个示例
为了更好地理解上面的步骤，这里我们给出一个示例代码：
-- -------------------- ---- -------
-- -------------------- - ------------ ----------
-- -------------- --
----- ------- -
--------- - ---
-------- - ---
--- ---------- -
------ ------------------ ------------------
-
--- -------------- -
----- ----- - ------------ ---
-------------- - ---------
------------- - ---------
-
-这段代码定义了一个 MyClass 类，其中使用了 Class Properties 来定义 firstName 和 lastName 实例属性。ESLint 默认不支持解析这个语法，但使用了我们上面提到的 ESLint + Babel 的配置后，这里的代码可以正常通过 ESLint 的检查。
总结
本文介绍了如何解决 ESLint 不识别 Class Properties 的问题，并给出了具体的示例。通过这篇文章，我们学习了如何使用 Babel 来转换新语法，以及如何配置 ESLint + Babel 来使后者可以识别并检查 Class Properties。对于前端开发者来说，这些知识应该是非常基础的，同时也是必备的。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64fd8fc295b1f8cacdce3f98