首先安装 ESLint 插件并初始化配置文件，接着在 VS Code 中启用保存时自动修复功能，确保项目本地安装 ESLint 以保持团队规则一致，最终实现代码实时校验与自动修正。
要在 VS Code 中配置 ESLint 插件以强制执行编码规范，关键在于正确安装插件、初始化 ESLint 配置文件，并确保编辑器能实时校验和修复代码。以下是具体操作步骤。
安装 ESLint 插件
打开 VS Code，进入扩展市场（Extensions Marketplace），搜索 ESLint，选择由 Dirk Baeumer 官方发布的版本并安装。安装完成后，VS Code 就具备了 ESLint 的语法检查能力。
初始化 ESLint 配置文件
在项目根目录下生成 .eslintrc.js 或 .eslintrc.json 文件，用于定义编码规则。可通过以下命令快速初始化：
- 运行 npx eslint --init
- 根据提示选择：是否使用 ES6、模块系统、框架（如 React/Vue）、代码是否在浏览器或 Node.js 中运行、是否使用 TypeScript 等
- 选择希望遵循的规范，例如 Airbnb、Standard 或自定义规则
- 确认后自动生成配置文件
示例配置片段（.eslintrc.json）：
{
"extends": ["eslint:recommended"],
"rules": {
"no-console": "warn",
"semi": ["error", "always"]
},
"env": {
"browser": true,
"node": true
}
}
启用自动保存时自动修复
为了让 VS Code 在保存文件时自动修复可修复的 ESLint 错误，需修改编辑器设置：
构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G
- 打开 VS Code 设置（Ctrl + ,），搜索 ESLint Auto Fix On Save
- 勾选 ESLint › Auto Fix On Save 选项
- 或在 .vscode/settings.json 中添加配置：
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
}
这样每次保存代码时，符合自动修复条件的问题（如缺少分号、空格问题）将被自动修正。
确保项目依赖包含 ESLint
如果项目中未全局安装 ESLint，建议在项目本地安装，避免环境不一致导致问题：
- 运行 npm install eslint --save-dev
- 如有需要，同时安装对应风格指南的配置包，例如 npm install eslint-config-airbnb --save-dev
VS Code 的 ESLint 插件会优先使用项目本地的 ESLint 实例，保证团队成员间规则一致。
基本上就这些。配置完成后，你将在编辑器中看到实时的语法提示与错误标记，配合自动修复功能，能有效统一团队编码风格。不复杂但容易忽略的是保存时自动修复的设置，开启后效率提升明显。
