VSCode中集成ESLint可实现JavaScript/TypeScript代码规范化：一、安装官方ESLint扩展并启用保存自动修复；二、项目初始化ESLint配置文件；三、配置工作区规则覆盖；四、结合Prettier解耦格式化与校验。
如果您在VSCode中编写JavaScript或TypeScript代码，但发现团队协作时代码风格不一致、潜在错误难以及时发现，则可能是缺乏统一的静态代码检查机制。以下是将ESLint集成到VSCode中以实现代码规范化的具体操作步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装ESLint扩展并启用自动修复
该方法通过VSCode官方ESLint扩展实现实时校验与保存时自动修复，降低人工干预成本，提升编码一致性。
1、打开VSCode，点击左侧活动栏的扩展图标（或使用快捷键Ctrl+Shift+X）。
2、在搜索框中输入ESLint，找到由Dirk Baeumer发布的官方扩展，点击“安装”。
3、安装完成后，重启VSCode确保扩展激活。
4、在设置中搜索eslint.enable，确认其值为true。
5、在用户设置JSON中添加："editor.codeActionsOnSave": {"source.fixAll.eslint": true}。
二、初始化项目级ESLint配置文件
该方法为项目建立独立可复用的规则集，确保所有开发者遵循同一套校验标准，避免全局配置带来的冲突。
1、在项目根目录下打开终端，执行命令：npm init @eslint/config。
2、根据交互式提示选择框架（如React）、模块系统（如ESM）、是否使用TypeScript等选项。
3、选择配置风格（推荐JavaScript Standard Style或Airbnb）。
4、确认生成.eslintrc.js或.eslintrc.json文件。
5、确保项目中已安装eslint及相关插件依赖，例如：npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev。
三、配置VSCode工作区级别规则覆盖
该方法允许在特定项目中覆盖全局或用户级ESLint行为，适用于多项目混合开发场景，保障各项目规则隔离性。
1、在项目根目录创建.vscode/settings.json文件（若不存在）。
2、写入以下内容：{"eslint.options": {"configFile": "./.eslintrc.js"}}。
3、添加路径别名支持（如使用Webpack或Vite）：{"eslint.options": {"parserOptions": {"project": "./tsconfig.json"}}。
4、禁用对node_modules的检查：{"eslint.run": "onType", "eslint.workingDirectories": [{"mode": "auto"}]}。
四、结合Prettier实现格式化与校验解耦
该方法分离代码风格格式化（Prettier）与逻辑规则校验（ESLint），避免规则重叠导致冲突，提升配置可维护性。
1、安装Prettier扩展及依赖：npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier。
2、在.eslintrc.js的extends数组末尾添加："prettier", "plugin:prettier/recommended"。
3、在VSCode设置中启用Prettier为默认格式化工具："editor.defaultFormatter": "esbenp.prettier-vscode"。
4、确保保存时仅触发ESLint修复而非Prettier重复格式化："editor.formatOnSave": false。
