ESLint 是什么？

🎯 引言

写代码时有没有遇到过别人写的代码格式怪怪的？或者代码里莫名其妙出错很难发现？ESLint 就是解决这些问题的好帮手。通过自动检查代码中的错误和风格问题，帮你写出更规范、更高质量、更易维护的代码。掌握 ESLint，前端小白也能轻松避免低级错误，提升团队协作效率。

🐛 ESLint 是什么？

ESLint 是一个流行的 JavaScript 代码静态检查工具，属于“Linter”的一种。Linter 是专门用来“扫描”你的代码，找出语法错误、潜在的 Bug 以及代码风格问题的工具。

你写的每一行代码，都可能会有拼写错误、忘记声明变量、使用了过时的 API，甚至代码格式不统一，难以阅读。ESLint 就像一位严格的老师，帮你指出问题所在，让你及时修正，避免上线后出现 Bug。

示例：没有 ESLint 的代码 vs 有 ESLint 提示的代码

// 没有 ESLint 之前
function test( ) {
var x = 10
console.log( x )
}
test( )

这段代码里，你会发现：

• 函数名后多了额外空格
• 变量声明后缺少分号
• 函数调用括号前多了空格

如果没有辅助工具，这些格式问题容易被忽视。

使用 ESLint 后，编辑器会直接高亮并提示：

- Unexpected space before function parentheses. (space-before-function-paren)
- Missing semicolon. (semi)
- Unexpected space before function call. (no-spaced-func)

你可以根据提示快速修正，保证代码整洁统一。

🤝 为什么要统一代码风格？

团队协作时，每个人的编码习惯不同。有人喜欢用单引号，有人用双引号；有人喜欢一行写一句代码，有人喜欢分多行写。没有统一的风格，代码就像一篇没有标点符号的文章，难以阅读和维护。

遇到代码合并时，格式不统一还容易引发冲突，浪费大家大量时间。

示例：同一段代码不同人的写法对比

// A写法
function sum( a, b ) {
return a + b;
}

// B写法
function sum(a,b){
return a+b
}

两段代码功能相同，但格式差异明显。代码风格不统一，不利于团队长期维护。

⚖️ ESLint 和 Prettier 有什么区别？

ESLint 和 Prettier 都是帮助我们写更好的代码的工具，但侧重点不同。

• ESLint 更专注于语法和逻辑错误的检查，比如未定义变量、函数调用错误、潜在的 Bug。
• Prettier 是一款代码格式化工具，它会自动帮你调整代码的换行、缩进、空格，让代码统一美观。

推荐用法：两者结合，效果更佳

你可以用 ESLint 检查代码中的错误和潜在问题，再用 Prettier 格式化代码，两者搭配使用效果最佳。

现在很多项目都用 ESLint 插件来支持 Prettier，这样两者不会冲突，还能保证代码既正确又美观。

🛡️ ESLint 如何预防 Bug 发生？

ESLint 还能帮你避免写出令人头疼的 Bug。比如：

• 使用未定义的变量
• 变量定义后未使用
• 条件判断写错
• 忽略了异步错误处理

示例：使用未定义变量

function greet() {
    console.log(message);
}
greet();

这里 message 没有声明，运行时会报错。ESLint 会提示：

'message' is not defined. (no-undef)

示例：未使用变量

const name = 'Tom';
console.log('Hello!');

定义了 name 变量但未使用，ESLint 会提示：

'name' is defined but never used. (no-unused-vars)

这往往是代码冗余或逻辑遗漏的信号。

常见 ESLint 提示与线上 Bug 的对应关系

• no-undef：未定义变量导致 ReferenceError。
• no-unused-vars：未用变量可能是遗漏逻辑。
• eqeqeq：强制使用全等，避免隐式类型转换 Bug。
• no-console：避免生产环境出现多余日志。
• no-debugger：防止调试代码意外留存。

🧾 小节总结

• ESLint 是一个静态代码检查工具，帮助发现语法错误和风格问题。
• 统一代码风格对团队协作和代码维护至关重要。
• ESLint 和 Prettier 各有侧重，结合使用效果最佳。
• ESLint 能预防多种常见 Bug，提升代码质量和稳定性。

❓ 知识问答（Q&A）

Q：ESLint 是做什么用的？

A：ESLint 是用来检查 JavaScript 代码中的语法错误、逻辑问题和代码风格不规范的工具。

Q：为什么要统一代码风格？

A：统一风格能减少团队代码冲突，提高代码可读性和维护性。

Q：ESLint 和 Prettier 有什么区别？

A：ESLint 检查代码中的错误和潜在问题，Prettier 负责自动格式化代码。

Q：如何利用 ESLint 预防 Bug？

A：ESLint 会提示未定义变量、未使用变量等问题，帮你及时发现潜在 Bug。

🧪 小练习

1. 在下面代码中，找出 ESLint 会提示的问题，并修复它。

function add(a,b) {
console.log(sum)
let sum = a+b
return sum
}
add(1,2)

🎉 恭喜你已经掌握 ESLint、代码风格统一、ESLint 与 Prettier 区别及 ESLint 预防 Bug 的技能啦！加油，写出高质量的代码，做个优秀的前端小白！