首先安装 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
同时确保项目已安装依赖：
npm install eslint –save-dev
配置 VSCode 设置
为了让 ESLint 在编辑器中正常工作，建议检查或添加以下设置：
打开 VSCode 设置（Ctrl+,），搜索 eslint validate 确保启用了对 javascript 和 typescript 的校验 如果使用 Vue 或 JSX，可能需要额外启用对应语言块的检查
也可以在项目根目录创建 .vscode/settings.json 文件：
冬瓜配音
AI在线配音生成器
66 查看详情 { “eslint.enable”: true, “eslint.autoFixOnSave”: true, “eslint.validate”: [ “javascript”, “typescript”, “vue” ]}
注意：autoFixOnSave 已逐渐被弃用，推荐使用 VSCode 的“保存时自动格式化”功能配合 ESLint。
启用保存时自动修复
修改 VSCode 的用户或工作区设置，实现保存文件时自动修复可修复的问题：
打开设置，搜索 format on save，勾选 Editor: Format On Save 设置默认格式化工具为 ESLint：右键编辑器 -> “格式化文档” -> 选择“ESLint”作为默认
或者在 settings.json 中添加：
“editor.codeActionsOnSave”: { “source.fixAll.eslint”: true}
这样每次保存时，ESLint 会自动修复支持的代码问题。
基本上就这些。配置完成后，打开一个 JS/TS 文件，故意写点不符合规则的代码（比如多余的分号），如果看到黄色波浪线或 ESLint 提示，说明配置成功了。
以上就是如何在VSCode中配置ESLint的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/289377.html
微信扫一扫 
支付宝扫一扫 
