在进行前端开发时，我们常使用 ESLint 作为代码规范检查的工具，以保证代码风格的统一。但在使用 ESLint 进行代码检查时，有时会遇到 Parsing error: The keyword 'const' is reserved 的错误，导致代码无法被正确检查和运行。这篇文章将会介绍解决这一问题的方法，并提供相应的示例代码。
错误原因
这个错误的原因是因为代码中使用了 ECMAScript 6 中的 const 关键字，但是 ESLint 默认运行在 ECMAScript 5 的环境中。所以需要在 ESLint 配置文件中设置 ecmaVersion: 6 来指定使用 ECMAScript 6 的环境。
解决方法
- 在项目根目录下创建
.eslintrc文件
可以通过手动创建 .eslintrc 文件来指定 ESLint 配置。文件内容如下：
{
"parserOptions": {
"ecmaVersion": 6
},
"rules": {}
}其中，parserOptions 中的 ecmaVersion 指定了使用 ECMAScript 6 的环境。rules 则是可以通过配置来指定代码规范检查的细节。
- 使用 eslint-config-airbnb 来规范代码
eslint-config-airbnb 是 Airbnb 开发的一个 ESLint 配置，建议使用。
可以通过以下步骤来安装和使用 eslint-config-airbnb：
npm install --save-dev eslint eslint-config-airbnb-base eslint-plugin-import
安装完成后，在 .eslintrc 文件中添加以下内容：
{
"extends": "airbnb-base",
"parserOptions": {
"ecmaVersion": 6
},
"rules": {}
}这会使用 Airbnb 的 eslint 规则，可以帮助我们规范代码。
- 在 Webpack 中配置 ESLint
在使用 Webpack 进行前端开发时，我们也可以配置 ESLint。使用 Webpack 的 eslint-loader 可以帮我们自动检查代码。
在安装 eslint-loader 后，在 webpack 配置文件中进行如下配置：
-- -------------------- ---- -------
-------------- - -
-- ---
------- -
------ -
-
----- --------------
-------- ---------------
------- ----------------
-------- -
---- -----
------ -----
--
--
-- ---
--
--
-- ---
--这里使用了 eslint-loader，并配置了 fix: true , 表示 ESLint 可以自动修复一些代码规范错误。在运行时，ESLint 会在浏览器控制台输出错误信息。
示例代码
// .eslintrc
{
"parserOptions": {
"ecmaVersion": 6
},
"rules": {}
}-- -------------------- ---- -------
-- ---------
-
---------- --------------
---------------- -
-------------- -
--
-------- --
--- -------------------- ---- -------
-- -----------------
-------------- - -
-- ---
------- -
------ -
-
----- --------------
-------- ---------------
------- ----------------
-------- -
---- -----
------ -----
--
--
-- ---
--
--
-- ---
--总结
在前端开发中，ESLint 是非常重要的工具。在遇到 Parsing error: The keyword 'const' is reserved 的错误时，我们需要指定 ESLint 的环境为 ECMAScript 6。此外，我们还可以使用 eslint-config-airbnb 来帮助我们规范代码。最后，我们也可以在 Webpack 中配置 ESLint 得到更好的开发体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6474e861968c7c53b02211f3