VSCode需手动集成ESLint与Prettier实现代码质量检查与格式化，关键在于职责分离（ESLint校验逻辑、Prettier统一格式）、本地安装依赖、禁用ESLint格式规则（通过eslint-config-prettier）、正确配置.vscode/settings.json启用保存时ESLint自动修复并禁用全局格式化，同时确保团队版本一致。
VSCode 本身不自带代码质量检查，必须手动集成 ESLint 和 Prettier 才能实现实时校验与自动格式化。关键不是装插件，而是让两个工具不打架——ESLint 负责规则校验（比如 no-unused-vars），Prettier 负责统一格式（比如缩进、分号），它们默认职责重叠，直接共存会互相覆盖。
安装 ESLint 和 Prettier 的本地依赖
必须用项目级本地安装（npm install --save-dev eslint prettier），而非全局安装。VSCode 的 ESLint 插件默认优先使用工作区内的 eslint 可执行文件；若全局安装，多人协作时容易因版本不一致导致警告不一致或规则失效。
- 运行
npx eslint --init初始化配置，选择 “To check syntax and find problems”，再选 “JavaScript modules (import/export)” 和 “React”（按需），最后选 JSON 格式保存为.eslintrc.json - 单独创建
.prettierrc文件，内容可极简：{"semi": true, "singleQuote": true, "tabWidth": 2} - 务必加
.eslintignore，至少包含node_modules/和dist/，否则 ESLint 会扫描整个node_modules，卡顿明显
配置 ESLint 使用 Prettier 规则（避免冲突）
ESLint 默认的格式类规则（如 indent、quotes）必须禁用，否则和 Prettier 冲突，保存时反复触发修正、光标乱跳。正确做法是用 eslint-config-prettier 关闭所有格式规则。
构建 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
- 执行
npm install --save-dev eslint-config-prettier - 在
.eslintrc.json的extends数组末尾追加"prettier"（注意：必须放在最后，否则会被前面的配置覆盖） - 如果用了 TypeScript，额外加
eslint-config-prettier/@typescript-eslint，并确保@typescript-eslint/eslint-plugin版本与 ESLint 兼容（常见坑：ESLint v8 +@typescript-eslintv5 会报ESLint couldn't determine the plugin...）
VSCode 设置启用自动修复与格式化
仅装插件不配置，保存时不会自动修。需要明确告诉 VSCode：JS/TS 文件保存时调用 ESLint 修复，同时用 Prettier 格式化——但二者不能同时启用“格式化”，否则顺序错乱。
- 安装官方插件：
ESLint（by Dirk Baeumer）和Prettier（by Prettier） - 在工作区
.vscode/settings.json中写死以下三项："editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "editor.formatOnSave": false, "[javascript]": {"formatting.provider": "prettier"} - 关键点：
editor.formatOnSave必须为false，否则 Prettier 会抢在 ESLint 修复前格式化，导致 ESLint 报出“格式错误”（比如多了一个空格）
验证是否生效及常见失败信号
改一行代码后保存，看右下角状态栏是否出现 ESLint 图标闪烁，或打开命令面板（Ctrl+Shift+P）运行 ESLint: Show Output Channel 查看日志。失败往往藏在细节里：
- 控制台报
Failed to load plugin 'prettier'→ 检查eslint-config-prettier是否真的装在devDependencies，且.eslintrc.json里extends拼写正确（大小写敏感） - 保存后无反应 → 确认当前文件语言模式是
JavaScript（右下角显示），不是Plain Text；也可能是settings.json放在了用户级而非工作区级，被其他配置覆盖 - TSX 文件里 ESLint 不报错 → 检查
.eslintrc.json中overrides是否包含了"files": ["*.ts", "*.tsx"]，并指定了parser: "@typescript-eslint/parser"
最常被忽略的是：团队成员各自安装了不同版本的 Prettier 或 ESLint，导致同一份代码在 A 机器上“保存即修复”，在 B 机器上“保存后仍报错”。统一用 package.json 的 engines 字段锁版本，并在 CI 中跑 npx eslint . 验证，比任何本地设置都可靠。
