如何在 VS Code、WebStorm 等编辑器中配置 Prettier? - 面试题

Prettier 在不同编辑器中的配置

Prettier 支持在主流代码编辑器中集成,实现自动格式化和实时预览,提高开发效率。

VS Code 配置

1. 安装扩展

在 VS Code 扩展市场搜索 "Prettier - Code formatter"
安装官方 Prettier 扩展

2. 基本配置 在 .vscode/settings.json 中配置:

json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": false,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

3. 高级配置

json
{
  "prettier.requireConfig": true,
  "prettier.useEditorConfig": false,
  "prettier.documentSelectors": ["**/*.js", "**/*.ts", "**/*.json"],
  "prettier.enableDebugLogs": false
}

WebStorm 配置

1. 内置支持 WebStorm 内置了 Prettier 支持,无需额外安装

2. 配置步骤

打开 Settings/Preferences
导航到 Languages & Frameworks > JavaScript > Prettier
启用 "On 'Reformat Code' action"
指定 Prettier 包路径

3. 保存时格式化 在 Settings > Tools > Actions on Save 中:

勾选 "Reformat code"
选择 Prettier 作为格式化工具

Vim/Neovim 配置

1. 使用 coc-prettier

vim
" 安装 coc.nvim 和 coc-prettier
:CocInstall coc-prettier

" 配置自动格式化
autocmd BufWritePre *.js,*.jsx,*.ts,*.tsx,*.json :call CocAction('format')

2. 使用 vim-prettier

vim
" 安装 vim-prettier
Plug 'prettier/vim-prettier', {
  \ 'do': 'yarn install',
  \ 'for': ['javascript', 'typescript', 'css', 'less', 'scss', 'json', 'graphql'] }

" 配置
let g:prettier#autoformat = 1
let g:prettier#exec_cmd_async = 1

3. 使用 null-ls (Neovim)

lua
local null_ls = require("null-ls")

null_ls.setup({
  sources = {
    null_ls.builtins.formatting.prettier.with({
      extra_args = { "--no-semi", "--single-quote" },
    }),
  },
})

-- 自动格式化
vim.cmd([[autocmd BufWritePre * lua vim.lsp.buf.formatting_sync()]])

Sublime Text 配置

1. 安装 Package Control

通过 Package Control 安装 "JsPrettier"

2. 配置 在 Preferences > Package Settings > JsPrettier > Settings - User:

json
{
  "prettier_cli_path": "/path/to/prettier",
  "node_path": "/path/to/node",
  "auto_format_on_save": true,
  "auto_format_on_save_excludes": ["*.min.js"]
}

Atom 配置

1. 安装插件

通过 Atom 设置安装 "prettier-atom"

2. 配置 在 Settings > Packages > prettier-atom:

启用 "Format on Save"
配置 Prettier 选项

Emacs 配置

1. 使用 prettier-emacs

elisp
(use-package prettier
  :ensure t
  :hook ((js-mode . prettier-mode)
         (typescript-mode . prettier-mode)
         (json-mode . prettier-mode))
  :config
  (setq prettier-pre-warn nil))

通用最佳实践

1. 项目级配置

在项目根目录创建 .prettierrc
确保编辑器使用项目配置
将配置文件提交到版本控制

2. 编辑器配置管理

使用 .editorconfig 统一基本配置
在 .vscode/settings.json 中配置 VS Code 特定设置
在项目文档中说明编辑器配置

3. 团队协作

提供编辑器配置指南
在 README 中说明推荐配置
使用统一的配置文件

4. 性能优化

只在必要时启用格式化
使用缓存机制
配置忽略规则

常见问题

1. 格式化不工作

确认 Prettier 已安装
检查配置文件路径
验证编辑器扩展是否启用

2. 配置冲突

优先使用项目级配置
禁用编辑器默认格式化器
检查多个配置文件的优先级

3. 性能问题

减少自动格式化的触发频率
使用增量格式化
配置忽略规则

通过合理配置编辑器集成,可以充分发挥 Prettier 的优势,提高开发效率。