VS Code Prettier - Code formatter 插件详解

VS Code 的 Prettier - Code formatter 插件是一款强大的代码格式化工具，它能自动规范代码风格，让你和团队能更专注于逻辑本身而非风格争论。下面我来为你详细介绍一下这个插件的使用方法和技巧。

Prettier - Code Formatter 插件详解

✨ 核心价值与工作原理

Prettier 是一款“有主见”的代码格式化工具，它通过解析你的代码并按照预设规则重新打印，强制实现一致的代码风格。它支持多种前端语言（JavaScript、TypeScript、CSS、SCSS、Less、HTML、JSON、Markdown、Vue等），并可以与大多数编辑器集成，其中在 VS Code 中的应用最为广泛。

它的核心价值在于：

• 减少认知负担：你不需要再纠结代码的视觉排版，可以将所有精力集中在业务逻辑和算法实现上，提升开发心流体验。

• 统一团队代码风格：在多人协作项目中，自动格式化能极大减少因代码风格不一致导致 PR 冲突和代码评审耗时，确保团队成员能更顺畅地理解和修改彼此的代码。

• 提升代码可读性和可维护性：格式统一的代码总是更容易阅读和理解，有助于新成员快速上手项目或长期维护代码库。

• 避免因格式问题导致的低级错误：虽然少见，但格式问题有时会隐藏逻辑错误或导致解析错误，Prettier 可以从源头上杜绝这类问题。

📦 安装与基本配置

安装步骤

1. 在 VS Code 中打开扩展市场（Ctrl+Shift+X）。

2. 搜索 "Prettier - Code formatter"。

3. 找到由 esbenp 发布的扩展，点击安装。

基础配置

配置 Prettier 作为默认格式化工具并启用保存时自动格式化，可以通过以下两种方式实现：