vscode格式化配置prettier
时间: 2025-03-26 21:25:24 浏览: 48
### 配置 VSCode 使用 Prettier 进行代码格式化
#### 安装 Prettier 插件
为了使 Prettier 能够在 Visual Studio Code (VSCode) 中工作,需安装 `Prettier - Code formatter` 扩展。这可以通过访问扩展视图并搜索 `@ext:esbenp.prettier-vscode` 来完成[^2]。
#### 创建配置文件
建议在一个项目中创建 `.prettierrc` 文件用于定义特定于该项目的格式化选项。此文件应放置于项目的根目录下,并可包含如下所示的基础配置:
```json
{
"printWidth": 120,
"tabWidth": 2,
"useTabs": false,
"semi": false,
"singleQuote": true
}
```
这些设置分别控制着每一行的最大宽度、缩进大小、是否使用 Tab 键代替空格、是否在语句结尾处添加分号以及字符串使用的引号类型[^4]。
#### 修改 VSCode 用户或工作区设置
为了让编辑器能够识别到已安装的 Prettier 并应用其规则,在用户级别或当前打开的工作区内调整 JSON 格式的设置。可以手动编辑 `settings.json` 或者通过图形界面进入设置页面进行更改。以下是推荐加入的一些条目:
```json
{
"editor.formatOnSave": true,
"prettier.requireConfig": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
```
上述配置项的作用分别是启用保存时自动格式化功能;确保只有当存在有效的 Prettier 配置时才执行格式化操作;指定默认采用哪一个扩展作为代码格式化的处理程序[^1]。
#### 结合 ESLint 使用(如果适用)
对于那些已经在利用 ESLint 对 JavaScript/TypeScript 等语言实施静态分析和编码风格检查的应用来说,可以让两者协同作业。此时可以在 `.eslintrc.*` 类型的配置文档里引入 `eslint-config-prettier` 和 `eslint-plugin-prettier` 模块,从而关闭任何可能与 Prettier 发生冲突的 ESLint 规则,并让后者接管最终的样式决定权[^3]。
阅读全文
相关推荐


















