由于前端代码量大，手写调试难度大，同时代码风格、缩进等因人而异，难以维护，为解决这些困难，开发人员会使用 ESLint 工具进行代码检测和统一风格等。
然而，由于使用者的不同需求和特殊场景，ESLint 工具常常会遇到各种错误，下面介绍常见的 ESLint 错误及解决方案。
1. Parsing error: The keyword 'import' is reserved
这是因为 ESLint 工具默认不支持 ES6 语法，需要在配置文件中加入以下内容：
{
"parser": "babel-eslint"
}或者使用以下命令进行 eslint --fix，它将根据你的配置文件自动修复文件。
eslint --fix
2. Error: Couldn't find preset "env" relative to directory
这是因为在使用 ESLint 工具时配置文件 .eslintrc.json 中设置了不存在的预设，需要使用 npm 或 yarn 安装 preset-env：
npm install babel-preset-env --save-dev # or yarn add babel-preset-env -D
然后在配置文件中添加以下内容：
{
"presets": ["env"]
}3. Unexpected block statement surrounding arrow body
ESLint 规定箭头函数当只有一行时不能包含花括号{}，需要移除花括号：
(params) => {
// 编码块
}
// 修改为
(params) => /* 代码 */4. 'someVariable' is assigned a value but never used
ESLint 提醒你在代码中存在未使用的变量，需要读者明确未使用的原因或移除变量：
const unusedVariable = 1;
或者通过配置文件添加如下内容允许允许未使用变量。
{
"rules": {
"no-unused-vars": ["error", { "vars": "all", "args": "none", "ignoreRestSiblings": false }]
}
}这里参数 vars 是指变量可以被定义但未使用，参数 args 是指函数传参的变量可以未使用而不报错。
5. TypeError: Cannot read property 'type' of undefined
这是由于您的代码包含语法错误造成的。 在您的控制台中查找交互式窗口，其中应包含指向语法错误部分的内部链接。 单击该链接即可打开错误部分。
6. ES Lint 自定义规则
ESLint 的规则文件提供了很多语法检查，但有时为了自己项目的具体情况，我们需要进行更深入的检查。
下面是一个自定义规则的示例代码。
-- -------------------- ---- -------
-
-------- -
-------------- --
------------- --
--------------- --
--------------- --
----------------- --
--------- --
--------------- --
---------- --- ---- ---
--------------- --- ---------
--------------- --
------------------------- --
--------------------- --------- ---------- ----- -------- -------
-------------------- --------- - -------- ---------------- ------------
------------------- --------- - --------- ---- -- -- -- --
-
-自定义规则可以通过官方文档或者专门的 ESLint 插件实现。
结论
在使用 ESLint 工具进行前端代码检测时，遇到错误通常都是由于配置文件存在问题，缺少依赖包或者语法书写有误，这时候读者需要查找错误原因，根据错误提醒进行修正或调试，并思考如何写出更整洁规范的前端代码，以提高代码可读性和维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/670edf255f55128102624c12