如何在VSCode中配置ESLint

首先安装 ESLint 扩展并初始化项目配置，生成 .eslintrc 文件且安装 eslint 依赖；然后在 VSCode 中启用 ESLint 校验，配置 settings.json 支持 js/ts/vue 检查，并设置保存时自动修复；最后通过 format on save 与 codeActionsOnSave 实现保存自动修正，验证提示生效即完成。

在 VSCode 中配置 ESLint 能帮助你在编写 JavaScript 或 TypeScript 代码时实时发现语法错误和代码风格问题。只要正确设置，ESLint 会自动提示、修复问题，提升开发效率。

安装 ESLint 扩展

打开 VSCode，进入扩展市场（快捷键 Ctrl+Shift+X），搜索 ESLint，选择由 Microsoft 官方发布的 ESLint 插件并安装。

项目中初始化 ESLint

确保你的项目根目录中有 ESLint 配置文件。如果没有，可以通过以下步骤创建：

• 在项目根目录打开终端，运行 npm init @eslint/config（或使用 yarn/pnpm）
• 根据提示选择环境（如浏览器、Node.js）、模块类型、框架（React、Vue 等）、是否使用 TypeScript
• 选择你喜欢的代码风格（如 Airbnb、Standard）或自定义规则
• 保存配置后，会生成 .eslintrc.cjs 或 .eslintrc.json

同时确保项目已安装依赖：

配置 VSCode 设置

为了让 ESLint 在编辑器中正常工作，建议检查或添加以下设置：

• 打开 VSCode 设置（Ctrl+,），搜索 eslint validate
• 确保启用了对 javascript 和 typescript 的校验
• 如果使用 Vue 或 JSX，可能需要额外启用对应语言块的检查

也可以在项目根目录创建 .vscode/settings.json 文件：

冬瓜配音

AI在线配音生成器

66

查看详情

注意：autoFixOnSave 已逐渐被弃用，推荐使用 VSCode 的“保存时自动格式化”功能配合 ESLint。

启用保存时自动修复

修改 VSCode 的用户或工作区设置，实现保存文件时自动修复可修复的问题：

• 打开设置，搜索 format on save，勾选 Editor: Format On Save
• 设置默认格式化工具为 ESLint：右键编辑器 -> “格式化文档” -> 选择“ESLint”作为默认

或者在 settings.json 中添加：

这样每次保存时，ESLint 会自动修复支持的代码问题。

基本上就这些。配置完成后，打开一个 JS/TS 文件，故意写点不符合规则的代码（比如多余的分号），如果看到黄色波浪线或 ESLint 提示，说明配置成功了。

以上就是如何在VSCode中配置ESLint的详细内容，更多请关注php中文网其它相关文章！