ESLint与Prettier可在VSCode中协同工作以自动规范JS/TS代码风格：需安装对应扩展和本地依赖，配置.eslintrc.cjs禁用冲突规则，通过.prettierrc定义格式选项，并在settings.json中启用保存时自动修复与格式化。
如果您在vscode中编写javascript或typescript代码，但发现格式混乱、缩进不一致、分号缺失等问题，则可能是未正确配置eslint与prettier协同工作。以下是实现二者共存并自动规范代码风格的步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、安装必要扩展与依赖
VSCode本身不内置ESLint和Prettier功能，需通过官方扩展和项目级依赖启用校验与格式化能力。扩展提供编辑器集成，本地依赖确保规则可复现且与团队一致。
1、打开VSCode扩展市场，搜索并安装ESLint（作者：Microsoft）与Prettier（作者：Esben Petersen）两个扩展。
2、在项目根目录执行命令行操作：npm init -y初始化package.json（若尚未存在）。
3、运行命令安装开发依赖：npm install --save-dev eslint prettier eslint-config-prettier eslint-plugin-prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin（适用于TS项目；若仅JS，可省略ts相关包）。
二、配置ESLint基础规则
ESLint负责代码质量检查，其规则需通过.eslintrc.cjs文件声明。该配置将启用推荐规则，并禁用与Prettier冲突的格式类规则，避免重复报错。
1、在项目根目录创建文件.eslintrc.cjs。
2、写入以下内容：
module.exports = {
extends: [
'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended'
],
parser: '@typescript-eslint/parser',
plugins: ['@typescript-eslint', 'prettier'],
rules: { 'prettier/prettier': 'error' }
};
三、配置Prettier格式化选项
Prettier专注代码样式统一，其行为由.prettierrc文件控制。该文件定义缩进、引号、换行等视觉细节，确保每次保存都生成相同格式的代码。
1、在项目根目录创建文件.prettierrc。
2、写入以下JSON内容：
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"printWidth": 80
}
四、设置VSCode自动修复与保存行为
VSCode需明确知道何时调用ESLint修复、何时触发Prettier格式化，以及二者优先级关系。通过settings.json配置可实现保存时自动应用全部规则。
1、按下Cmd+,（macOS）打开VSCode设置界面，点击右上角打开设置（JSON）图标。
2、在settings.json中添加以下键值对：
"editor.formatOnSave": true,
"editor.codeActionsOnSave": { "source.fixAll.eslint": true },
"eslint.validate": ["javascript", "typescript", "javascriptreact", "typescriptreact"],
"prettier.requireConfig": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
五、验证配置是否生效
配置完成后需通过真实代码触发校验与格式化流程，确认错误提示、自动修复及保存格式化均按预期响应。
1、新建一个test.js文件，输入内容：const a=1; console.log(a)（无分号、无空格、单引号缺失）。
2、保存文件，观察左侧问题面板是否出现ESLint警告（如“Missing semicolon”），同时代码是否自动变为const a = 1;与console.log(a);。
3、右键编辑器空白处，选择格式化文档，确认光标所在文件被重排为符合.prettierrc定义的样式。
