VSCode如何提高代码编写效率？安装Prettier插件实现代码自动格式化

看不見的法師

发布时间：2025-09-02 16:17:01

361人浏览过

来源于php中文网

原创

VSCode提升效率的核心在于可扩展性与自动化，通过安装Prettier插件并配置默认格式化器、开启保存时自动格式化，结合.prettierrc定制规则，实现代码风格统一，减少认知负担，提升协作效率与代码可维护性。

vscode如何提高代码编写效率？安装prettier插件实现代码自动格式化

VSCode提升代码编写效率的核心，在于它强大的可扩展性和自动化能力。其中，安装Prettier插件实现代码自动格式化，就像给你的开发流程装上了一个永不停歇的“整理机器人”，它能确保你的代码始终保持整洁统一，从而让你将宝贵的精力聚焦在更重要的逻辑实现上，而非琐碎的格式调整。

解决方案

要让Prettier在VSCode中自动格式化你的代码，步骤其实非常直接：

安装Prettier扩展： 打开VSCode，点击侧边栏的“扩展”图标（或按下
```
Ctrl+Shift+X
```
），在搜索框中输入“Prettier - Code formatter”，找到由
```
esbenp
```
发布的那个，然后点击“安装”。
配置VSCode默认格式化器：
- 按下
```
Ctrl+,
```
  （逗号）打开用户设置。
- 在搜索框中输入“Default Formatter”，然后在下拉菜单中选择“Prettier - Code formatter”。
- 接着，搜索“Format On Save”，勾选这个选项，确保在保存文件时自动触发格式化。
- 你也可以直接编辑
```
settings.json
```
  文件（
```
Ctrl+Shift+P
```
  ，输入“Open Settings (JSON)”）：
```
{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
}
```
项目级配置（可选但推荐）： 在项目根目录创建一个名为
```
.prettierrc
```
的文件（可以是
```
.json
```
、
```
.yaml
```
或
```
.js
```
格式），来定义项目的特定格式化规则。例如：
```
// .prettierrc
{
    "singleQuote": true,
    "trailingComma": "all",
    "printWidth": 100,
    "tabWidth": 2,
    "semi": true
}
```
这样，Prettier就会根据这些规则来格式化你的代码，确保团队内所有成员都遵循相同的风格。

自动格式化如何从根本上改变开发体验？

老实说，我以前在没有自动格式化工具的时候，花在调整代码格式上的时间简直是灾难。空格不对、缩进混乱、引号风格不统一……这些看似微不足道的小事，累积起来却能极大地消耗开发者的心智。Prettier的出现，对我来说，就是一种解放。它就像一个默默无闻但极其高效的管家，把所有关于代码“外表”的琐事都打理得井井有条。

从根本上讲，自动格式化带来的改变是多方面的：

减少认知负担，提升专注力： 你不需要再纠结于代码的视觉排版，所有的精力都可以集中在业务逻辑和算法实现上。这种心流体验的提升，直接转化为更高的开发效率和更少的错误。
统一团队代码风格，降低协作成本： 尤其是在多人协作的项目中，代码风格的不一致是导致PR（Pull Request）冲突和代码评审耗时过长的主要原因之一。Prettier强制统一的风格，极大地减少了这类“无谓”的争执，让团队成员可以更顺畅地理解和修改彼此的代码。
提升代码可读性和可维护性： 无论代码是谁写的，格式统一的代码总是更容易阅读和理解。这对于新成员快速上手项目，或者长期维护老旧代码库来说，都是至关重要的。一个整洁的代码库，就像一个整理有序的图书馆，你能更快地找到你需要的信息。
避免低级错误： 虽然少见，但格式问题有时确实会隐藏逻辑错误，或者在某些语言中导致解析错误。自动格式化从源头上杜绝了这类问题的发生。

我个人最深的体会是，当我可以完全不用考虑格式问题，直接敲下代码，然后保存时一切自动变得整齐划一，那种感觉就像是卸下了重担，整个人都轻松了许多。

Prettier在实际项目中会遇到哪些配置挑战？如何为不同项目定制格式化规则？

Prettier虽然强大，但在实际项目中，尤其是与ESLint这类代码规范工具结合使用时，确实会遇到一些配置上的挑战。理解这些挑战并知道如何解决，是充分发挥其效能的关键。

一个常见的场景是Prettier和ESLint规则的冲突。比如，Prettier可能默认使用双引号，而ESLint的某个规则要求使用单引号。如果处理不当，你就会发现保存时Prettier格式化了代码，但ESLint又立即报错，甚至在你下次保存时，它们会“打架”，导致代码反复变动。

解决这类冲突通常需要以下策略：

Replit Ghostwrite

一种基于 ML 的工具，可提供代码完成、生成、转换和编辑器内搜索功能。

下载

使用

eslint-config-prettier

和
eslint-plugin-prettier
：

```
eslint-config-prettier
```
：它的作用是禁用所有与Prettier冲突的ESLint规则。这样，Prettier就成了格式化的唯一权威，而ESLint则专注于代码质量和潜在的错误。
```
eslint-plugin-prettier
```
：它将Prettier作为ESLint的一个规则来运行。这意味着如果Prettier认为代码格式不正确，ESLint就会将其报告为一个错误。

安装这些包：

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

在

.eslintrc.js

或

.eslintrc.json

中配置：

// .eslintrc.json
{
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended", // 举例：如果你用React
        "plugin:prettier/recommended" // 这一行很重要
    ],
    "plugins": [
        "prettier"
    ],
    "rules": {
        "prettier/prettier": ["error", {
            "singleQuote": true,
            "trailingComma": "all"
        }]
    }
}

"plugin:prettier/recommended"

会同时启用

eslint-plugin-prettier

和

eslint-config-prettier

。在

"rules"

中，你可以覆盖或添加Prettier的规则，但通常建议在

.prettierrc

中统一管理Prettier的规则，这里只做最基础的集成。

项目级
```
.prettierrc
```
文件： 这是定制格式化规则的核心。
- 优先级： Prettier会优先读取项目根目录的
```
.prettierrc
```
  文件。如果找不到，它会向上级目录查找，直到找到为止。如果都没有，就使用其默认规则。
- 格式： 可以是
```
.json
```
  、
```
.yaml
```
  、
```
.js
```
  （导出配置对象）、
```
.toml
```
  。我个人倾向于
```
.json
```
  ，因为它简洁明了。
- 常见配置项：
  - ```
  printWidth
```
  ：每行最大字符数。
- ```
tabWidth
```
    ：制表符宽度。
  - ```
  useTabs
```
  ：使用制表符而非空格。
- ```
singleQuote
```
    ：使用单引号。
  - ```
  trailingComma
```
  ：尾随逗号（
```
  none
```
  ,
```
  es5
```
  ,
```
  all
```
  ）。
- ```
semi
```
    ：语句末尾是否加分号。
  - ```
  arrowParens
```
  ：箭头函数参数括号（
```
  always
```
  ,
```
  avoid
```
  ）。
- 忽略文件： 类似于
```
.gitignore
```
  ，你可以创建
```
.prettierignore
```
  文件，指定哪些文件或目录不需要被Prettier格式化。这对于一些第三方库、构建产物或特殊文件非常有用。

我记得有一次，一个新项目刚启动，大家对代码风格没有统一意见，导致每次合并代码都要手动调整格式。后来我引入了

.prettierrc

和ESLint集成，并写了一份简单的文档，明确了格式化规范，从此团队的开发效率和代码质量都得到了显著提升。这种“一劳永逸”的配置投入，绝对是值得的。

除了Prettier，VSCode还有哪些功能可以进一步提升代码编写效率？

VSCode之所以能成为我日常开发的主力工具，除了Prettier的加持，更在于它本身集成了大量提升效率的功能，以及其强大的生态系统。这些功能相互配合，能构建出一套极其高效的开发环境。

以下是一些我个人觉得不可或缺的VSCode效率工具和实践：

强大的快捷键定制与使用： VSCode的几乎所有操作都可以通过快捷键完成。掌握常用的快捷键，比如文件切换（
```
Ctrl+P
```
）、多光标编辑（
```
Alt+Click
```
或
```
Ctrl+Alt+Down/Up
```
）、快速注释（
```
Ctrl+/
```
）、代码折叠（
```
Ctrl+Shift+[ / ]
```
）等，能显著减少鼠标操作，让双手始终停留在键盘上，极大地提升输入速度和流畅性。我甚至会根据自己的习惯，调整一些默认快捷键。
代码片段（Snippets）： 对于那些重复性高、结构固定的代码块，比如函数模板、组件结构、循环语句等，自定义代码片段是提高输入效率的利器。你只需输入一个简短的触发词，就能快速生成一大段代码。这比复制粘贴更优雅，也更不容易出错。例如，我经常为React组件创建
```
rcc
```
（React Class Component）或
```
rfc
```
（React Function Component）的片段。
智能感知（IntelliSense）与语言服务器协议（LSP）： 这是VSCode的核心竞争力之一。它能提供智能的代码补全、参数提示、定义跳转、引用查找等功能。对于TypeScript这类强类型语言，IntelliSense的表现尤为出色，它能实时检查类型错误，提供准确的类型信息，极大地减少了查阅文档和调试的时间。
集成终端： 无需切换到外部终端，直接在VSCode内部执行命令行操作（`Ctrl+``）。这使得运行测试、启动开发服务器、执行Git命令等变得异常便捷，保持了开发流程的连贯性。
Git集成： VSCode内置了强大的Git版本控制功能。你可以直接在编辑器中查看文件的修改、提交、暂存、回滚、合并分支等。图形化的界面让Git操作变得更加直观，减少了出错的可能性，也省去了在命令行和编辑器之间频繁切换的麻烦。
调试器： VSCode提供了对多种语言的强大调试支持。设置断点、单步执行、查看变量值、调用堆栈等功能，让开发者能够直接在IDE中定位和解决问题，而不需要依赖
```
console.log
```
大法。这对于复杂问题的排查效率提升是巨大的。
任务（Tasks）： 自动化构建、测试、部署等流程。你可以配置VSCode任务来运行npm脚本、编译代码、启动本地服务器等，然后通过快捷键或命令面板快速触发这些任务。

我个人的工作流中，这些功能几乎是每天都在用的。比如，当我在写一个新功能时，我会先用代码片段快速搭好基本结构，然后依靠IntelliSense进行智能补全，遇到问题时直接用调试器定位。同时，Git集成让我可以随时查看修改并提交，而Prettier则在后台默默地保证我的代码始终整洁。这种无缝衔接的体验，真的让编程变成了一件更享受的事情。

怎样在VSCode中配置Go语言开发环境和工具链【教程】

VSCode怎样配置ESLint进行代码规范检查【教程】

vscode的智能提示为何不工作_如何正确配置语言支持服务【教程】

怎样在vscode中管理多个项目与文件夹【教程】

怎样利用vscode进行json数据查看与编辑【教程】