JavaScript代码检查是什么？ESLint使用教程

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《JavaScript代码检查是什么？如何用ESLint？》，聊聊，我们一起来看看吧！

JavaScript linting 是用工具静态分析源码以检查语法错误、潜在 bug 和风格问题的过程；ESLint 是主流工具，基于 AST、规则可配置可修复，支持 TS/JSX/Vue 等现代生态。

JavaScript 的 linting 是指用工具自动扫描源码，检查语法错误、潜在 bug、不规范写法和风格问题的过程。它不是运行时检测，而是在代码写完或提交前就发现问题，属于静态代码分析。

ESLint 是什么

ESLint 是目前主流的 JavaScript linting 工具，核心特点是基于 AST（抽象语法树）解析，规则可插拔、可配置、可自动修复。它不只管格式（比如缩进、分号），还能发现未使用变量、重复定义、危险比较（==）、异步逻辑隐患等语义级问题。

相比早期的 JSLint、JSHint，ESLint 支持自定义解析器（如 @typescript-eslint/parser）、插件（如 eslint-plugin-react）、以及与现代工程（TS、JSX、Vue）深度集成。

快速上手 ESLint

只需三步就能在项目中启用：

• 安装：在项目根目录执行 npm init @eslint/config（推荐）或先 npm install eslint --save-dev 再运行 npx eslint --init
• 回答交互式提问：选“检查语法和找问题”→“模块化（ESM）”→按需选框架（React/Vue）、是否用 TypeScript、运行环境（浏览器/Node 等）
• 生成配置文件（如 .eslintrc.js 或 eslint.config.mjs），默认已启用推荐规则并安装必要依赖

让 ESLint 真正起作用

装完不等于生效，关键要接入开发流程：

• 命令行检查：运行 npx eslint src/**/*.{js,jsx,ts,tsx} 查看报错；加 --fix 自动修复可修复项（如引号、空格、分号）
• 编辑器集成：VS Code 安装 ESLint 插件，开启 "editor.codeActionsOnSave": {"source.fixAll": true}，保存即修复
• 提交前拦截：配合 Husky + lint-staged，在 git commit 前只检查暂存区文件，避免阻塞整个仓库

常见配置要点

配置文件里几个字段最常用也最容易出错：

• env：声明运行环境（browser: true 才能识别 window、document 等全局变量）
• extends：继承规则集，如 'eslint:recommended'、'plugin:react/recommended'、'@typescript-eslint/recommended'
• plugins：声明插件名（如 ['react', '@typescript-eslint']），插件名不含 eslint-plugin- 前缀
• rules：覆盖单条规则，例如 'no-console': 'warn' 或 'semi': ['error', 'never']
• globals：显式声明第三方全局变量（如 $: 'readonly' 防止 no-undef 报错）

基本上就这些。不复杂但容易忽略的是：配置后没重启编辑器、没装对应插件、或环境变量没设对，都可能导致规则不生效。建议从最小配置起步，逐步加规则，比一上来套 Airbnb 或 Standard 更可控。

到这里，我们也就讲完了《JavaScript代码检查是什么？ESLint使用教程》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！