VSCode代码格式化配置（Prettier）-VSCode-PHP中文网

VSCode代码格式化配置（Prettier）

狼影

发布： 2025-11-15 19:19:02

原创

482人浏览过

首先安装Prettier插件并创建.prettierrc配置文件，然后在VSCode中启用保存时自动格式化，并设置Prettier为默认格式化工具，若使用ESLint则需安装eslint-config-prettier避免规则冲突。

vscode代码格式化配置（prettier）

在 VSCode 中配置 Prettier 实现代码格式化，能统一团队编码风格，提升开发效率。关键在于正确安装插件、配置规则，并确保保存时自动格式化。

打开 VSCode 扩展市场，搜索 Prettier - Code formatter 并安装。这是官方推荐的 Prettier 插件，支持 JavaScript、TypeScript、CSS、HTML、JSON、Markdown 等多种语言。

安装完成后无需手动启用，VSCode 会在识别到项目中存在 Prettier 配置时自动调用。

在项目根目录创建 .prettierrc 文件，定义格式化规则。常用配置示例如下：

{ "semi": true, "trailingComma": "es5", "singleQuote": true, "printWidth": 80, "tabWidth": 2, "useTabs": false, "endOfLine": "lf" }

也可使用 .prettier.config.js 文件导出配置对象，适合需要动态判断的场景。

打开 VSCode 设置（Ctrl + ,），搜索 format on save，勾选 Editor: Format On Save，保存文件时将自动调用 Prettier 格式化。

确保默认格式化工具设为 Prettier：

代码小浣熊

代码小浣熊是基于商汤大语言模型的软件智能研发助手，覆盖软件需求分析、架构设计、代码编写、软件测试等环节

也可在 .vscode/settings.json 中指定：

{ "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.formatOnSave": true }

若项目使用 ESLint，建议安装 eslint-config-prettier 禁用所有与 Prettier 冲突的规则：

npm install --save-dev eslint-config-prettier

并在 .eslintrc 的 extends 中添加：

"extends": ["eslint:recommended", "prettier"]

这样 ESLint 负责代码质量，Prettier 负责代码风格，职责分离。

基本上就这些。配置完成后，每次保存代码都会按预设规则自动美化，保持项目风格一致。不复杂但容易忽略细节，尤其是默认格式化工具的设置。

以上就是VSCode代码格式化配置（Prettier）的详细内容，更多请关注php中文网其它相关文章！

大家都在看：