需安装ESLint与Prettier扩展，初始化项目级ESLint配置，安装Prettier依赖并配置冲突规则，创建.prettierrc文件定义格式偏好，最后配置VSCode启用保存时自动格式化与ESLint修复。
如果您在使用 VSCode 进行 JavaScript 或 TypeScript 开发时，希望代码风格统一且具备实时语法与格式错误提示，则需要集成 ESLint 与 Prettier 工具。以下是完成安装与配置的具体步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装 ESLint 和 Prettier 扩展
VSCode 本身不内置代码检查与格式化功能，需通过官方扩展实现支持。ESLint 负责静态代码分析与规则校验，Prettier 负责自动格式化代码结构，二者协同可兼顾质量与一致性。
1、打开 VSCode，点击左侧活动栏的扩展图标（或按快捷键 Ctrl+Shift+X / Cmd+Shift+X）。
2、在搜索框中依次输入 ESLint，找到由 Microsoft 发布的官方扩展，点击“安装”。
3、再次在搜索框中输入 Prettier，找到由 Esben Petersen 维护的官方扩展，点击“安装”。
二、初始化项目级 ESLint 配置
ESLint 需要项目根目录下的配置文件来识别规则集和解析器。本地配置优先于全局设置，确保团队协作时行为一致。
1、在终端中进入项目根目录，执行命令：npm init -y（若尚未初始化 npm 项目）。
2、执行命令：npm install eslint --save-dev 安装 ESLint 为开发依赖。
3、执行命令：npx eslint --init，根据交互式向导选择：JavaScript modules、React（如适用）、TypeScript（如适用）、浏览器/Node 环境、使用流行样式指南（如 Airbnb 或 Standard），最终生成 .eslintrc.js 或 .eslintrc.json 文件。
三、安装并配置 Prettier 依赖
Prettier 作为独立格式化工具，需在项目中安装并配置其行为，同时避免与 ESLint 规则冲突，通常通过 eslint-config-prettier 关闭 ESLint 中与格式相关的规则。
1、执行命令：npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev。
构建 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
2、在 .eslintrc.js 的 extends 数组末尾添加 'prettier'，并在 plugins 中加入 'prettier'。
3、在 rules 中添加：'prettier/prettier': 'error'，使格式问题显示为 ESLint 错误。
四、创建 Prettier 配置文件
显式定义 Prettier 的格式偏好，可确保所有开发者遵循相同缩进、引号、换行等细节，避免因编辑器默认设置不同导致频繁格式变更。
1、在项目根目录新建文件：.prettierrc。
2、写入基础配置内容，例如：{"semi": true, "singleQuote": true, "tabWidth": 2, "printWidth": 80}。
3、可选：新建 .prettierignore 文件，填入需跳过格式化的路径，如 node_modules/、dist/。
五、配置 VSCode 设置以启用自动修复与格式化
VSCode 需明确指定保存时调用的格式化工具及修复机制，否则 ESLint 与 Prettier 的能力无法自动生效。
1、按下 Cmd+,（macOS）或 Ctrl+,（Windows/Linux）打开设置界面，切换至“工作区”标签页。
2、搜索 format on save，勾选 Editor: Format On Save。
3、搜索 default formatter，点击“在 settings.json 中编辑”，添加两行配置："editor.defaultFormatter": "esbenp.prettier-vscode" 与 "editor.formatOnSave": true。
4、为确保 ESLint 也能在保存时自动修复可修复问题，添加："eslint.autoFixOnSave": true（若使用新版 ESLint 扩展，推荐改用 "editor.codeActionsOnSave": {"source.fixAll.eslint": true}）。
