VSCode中如何优雅地格式化代码（Prettier + ESLint）

Prettier与ESLint协同实现VSCode保存即格式化、编辑即提示：需安装官方扩展、配置项目依赖及规则文件、设置默认格式化器与保存行为，并按语言类型单独指定格式化器。

如果您在 VSCode 中编写代码时发现格式混乱、风格不统一，可能是缺少自动化的代码格式化与校验工具。Prettier 负责统一代码样式，ESLint 负责检测潜在错误与编码规范问题，二者协同可实现保存即格式化、编辑即提示的开发体验。以下是配置与使用该组合的具体步骤：

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

一、安装必要扩展

VSCode 需通过扩展支持 Prettier 和 ESLint 的集成能力，必须安装对应官方插件以启用语法高亮、实时诊断和自动修复功能。

1、打开 VSCode 左侧活动栏的扩展图标（或按 Cmd+Shift+X）。

2、在搜索框中依次输入并安装：Prettier - Code formatter 与 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, "tabWidth": 2}。

三、配置 ESLint 规则文件

ESLint 需明确知道如何与 Prettier 协作，避免规则冲突；通过 extends 组合官方推荐配置，可自动禁用与 Prettier 冲突的规则。

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

MacsMind

电商AI超级智能客服

192

查看详情

2、写入如下内容：module.exports = {extends: ['eslint:recommended', 'plugin:prettier/recommended']};。

3、确保 node_modules/.bin/eslint 可被 VSCode 正确识别为 ESLint CLI 路径。

四、设置 VSCode 默认格式化器与保存行为

VSCode 必须明确将 Prettier 设为当前工作区的默认格式化工具，并启用保存时自动格式化，才能实现“优雅”的一键操作。

1、按下 Cmd+, 打开设置界面，在右上角点击“打开 settings.json”图标。

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

3、继续添加："editor.formatOnSave": true 与 "editor.codeActionsOnSave": {"source.fixAll.eslint": true}。

五、按语言单独指定格式化器

某些项目包含多种语言（如 Vue、TypeScript），需为不同文件类型显式绑定格式化器，防止 Prettier 错误处理非 JS/TS 文件。

1、在 VSCode 设置中搜索 files.associations，添加：{"*.vue": "vue"}。

2、在 settings.json 中新增 "[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}。

3、对 TypeScript 文件，添加："[typescript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}。

以上就是VSCode中如何优雅地格式化代码（Prettier + ESLint）的详细内容，更多请关注php中文网其它相关文章！