Prettier与ESLint需协同配置才能实现VSCode保存时自动格式化：安装扩展、初始化项目依赖、设置默认格式化工具、整合冲突规则并验证生效。

如果您在VSCode中编写JavaScript或TypeScript代码，但每次保存后代码未自动按统一风格格式化，则可能是Prettier与ESLint未正确协同配置。以下是实现一键格式化代码的具体操作步骤：

本文运行环境：MacBook Air，macOS Sequoia。

一、安装必要扩展

VSCode需通过扩展支持Prettier和ESLint的解析与格式化能力，缺少任一扩展将导致格式化指令无法识别或执行失败。

1、打开VSCode左侧活动栏中的扩展图标（四个方块组成的图标）。

2、在搜索框中依次输入并安装以下两个扩展：Prettier 与 ESLint。

3、安装完成后，重启VSCode确保扩展完全加载。

二、初始化项目依赖

本地项目需具备Prettier和ESLint的可执行命令，否则VSCode扩展仅能提供语法提示而无法实际运行格式化逻辑。

1、在项目根目录下打开终端，执行 npm init -y 初始化package.json（若尚未初始化）。

2、运行命令安装开发依赖：npm install --save-dev prettier eslint eslint-config-prettier eslint-plugin-prettier。

3、创建.prettierrc文件，写入基础配置如：{"semi": true, "singleQuote": true}。

三、配置VSCode默认格式化工具

VSCode需明确指定使用Prettier作为JavaScript/TypeScript文件的默认格式化程序，否则保存时可能调用内置格式器而非Prettier。

1、按下 Cmd + ,（Mac）或 Ctrl + ,（Windows/Linux）打开设置界面。

2、在右上角点击“打开设置（JSON）”图标，进入settings.json编辑模式。

3、在JSON中添加以下键值对："editor.defaultFormatter": "esbenp.prettier-vscode"。

4、同时加入："editor.formatOnSave": true，启用保存时自动格式化。

四、整合ESLint与Prettier冲突规则

ESLint与Prettier可能对相同代码风格（如分号、引号）产生相反校验，需通过配置使ESLint禁用与Prettier重叠的规则，避免报错或格式化反复修正。

1、在项目根目录创建.eslintrc.js文件。

2、写入配置导出对象，其中extends数组必须包含 "plugin:prettier/recommended" 且置于最后。

3、确保plugins字段包含 "prettier"，rules字段中添加 "prettier/prettier": "error"。

五、验证格式化是否生效

完*部配置后，需通过真实代码触发保存行为，观察是否执行Prettier格式化并同步通过ESLint校验，以确认二者已协同工作。

1、新建test.js文件，输入未格式化代码如：const a=1;function f(){return a;}。

2、按下 Cmd + S（Mac）或 Ctrl + S（Windows/Linux）保存文件。

3、检查代码是否自动变为：const a = 1;​
function f() {
  return a;
}。

# linux  # javascript  # java  # vscode  # js  # json  # typescript  # windows  # npm