知识库

Appearance

Return to top
On this page

Prettier编辑器集成

Prettier可以与各种代码编辑器集成，提供实时代码格式化功能。本指南详细介绍了如何在不同编辑器中配置和使用Prettier。

VS Code集成

VS Code是Prettier最常用的集成环境之一。

安装扩展

首先安装Prettier VS Code扩展：

  1. 打开VS Code扩展市场（Ctrl+Shift+X）
  2. 搜索"Prettier - Code formatter"
  3. 安装由esbenp提供的扩展

或者通过命令行安装：

bash
code --install-extension esbenp.prettier-vscode

VS Code配置

在VS Code设置中添加以下配置：

json
// settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.formatOnType": false,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

项目级配置

在项目根目录创建.vscode/settings.json以应用项目特定设置：

json
{
  "prettier.configPath": "./.prettierrc.json",
  "prettier.requireConfig": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

WebStorm/IntelliJ IDEA集成

安装插件

  1. 打开Settings (File → Settings 或 Ctrl+Alt+S)
  2. 进入 Plugins
  3. 搜索"Prettier"
  4. 安装Prettier插件
  5. 重启IDE

配置Prettier

  1. 进入 Settings → Languages & Frameworks → JavaScript → Prettier
  2. 设置Node interpreter（通常是全局Node.js路径）
  3. 设置Prettier package路径（项目中的node_modules/prettier）
  4. 勾选"Run on save"以自动格式化保存的文件

与代码样式集成

在WebStorm中，您可以将Prettier与内置代码样式集成：

  1. Settings → Editor → Code Style → JavaScript
  2. 在Prettier标签页中启用Prettier
  3. 配置Prettier路径和选项

Sublime Text集成

安装Package Control包

  1. 打开命令面板 (Ctrl+Shift+P)
  2. 输入"Package Control: Install Package"
  3. 搜索并安装"JsPrettier"

配置Sublime Text

在JsPrettier设置中添加：

json
{
  "prettier_cli_path": "",
  "node_path": "",
  "auto_format_on_save": true,
  "auto_format_on_save_excludes": [],
  "allow_inline_formatting": true,
  "custom_file_extensions": [],
  "prettier_options": {
    "printWidth": 80,
    "singleQuote": false,
    "trailingComma": "none",
    "bracketSpacing": true,
    "jsxBracketSameLine": false,
    "parser": "babylon",
    "semi": true,
    "useTabs": false,
    "tabWidth": 2,
    "arrowParens": "avoid"
  }
}

Vim/Neovim集成

使用插件管理器安装

使用vim-plug

在.vimrc中添加：

vim
Plug 'prettier/vim-prettier', {
  \ 'do': 'npm install',
  \ 'for': [
  \   'javascript',
  \   'typescript',
  \   'css',
  \   'less',
  \   'scss',
  \   'json',
  \   'graphql',
  \   'markdown',
  \   'vue',
  \   'yaml',
  \   'html'
  \ ]
  \ }

使用Vundle

vim
Plugin 'prettier/vim-prettier'

配置Vim

在.vimrc中添加：

vim
" 启用vim-prettier
let g:prettier#exec_cmd_path = "/usr/local/bin/prettier"
let g:prettier#autoformat = 1
let g:prettier#autoformat_require_pragma = 0

" 自动格式化保存的文件
autocmd BufWritePre *.js,*.jsx,*.ts,*.tsx,*.json,*.css,*.scss,*.md,*.vue Prettier

Atom集成

安装Atom插件

bash
apm install prettier-atom

或通过Settings → Install → 搜索"prettier-atom"

配置Atom

在prettier-atom设置中：

  1. 勾选"Format On Save"
  2. 设置Prettier配置文件路径
  3. 选择要格式化的文件类型

Emacs集成

安装和配置

在.emacs或init.el中添加：

text
(use-package prettier-js
  :ensure t
  :config
  (add-hook 'js-mode-hook 'prettier-js-mode)
  (add-hook 'web-mode-hook 'prettier-js-mode)
  (add-hook 'css-mode-hook 'prettier-css-mode))

Visual Studio集成

安装扩展

  1. 打开Visual Studio
  2. 扩展 → 管理扩展
  3. 搜索"Prettier"
  4. 安装相关扩展

配置

Visual Studio的Prettier扩展通常需要配置MSBuild目标或使用外部工具集成。

配置最佳实践

1. 统一团队配置

确保团队所有成员使用相同的编辑器配置：

json
// .editorconfig
root = true

[*.js]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.ts]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

2. 保存时自动格式化

在所有编辑器中启用保存时自动格式化：

  • VS Code: "editor.formatOnSave": true
  • WebStorm: 启用"Reformat on save"
  • Sublime: "auto_format_on_save": true

3. Git Hooks集成

结合husky和lint-staged确保提交的代码已格式化：

json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx,json,css,md}": [
      "prettier --write",
      "git add"
    ]
  }
}

常见问题和解决方案

1. 编辑器不识别Prettier配置

确保Prettier扩展能够找到配置文件，检查项目根目录是否包含.prettierrc文件。

2. 格式化速度慢

  • 检查是否有大型文件被包含在格式化范围内
  • 使用.prettierignore排除不需要格式化的文件
  • 确保Prettier版本是最新的

3. 与ESLint冲突

当同时使用ESLint和Prettier时，确保配置不冲突：

json
{
  "extends": ["eslint:recommended", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

4. 特定文件类型不格式化

检查编辑器设置是否为特定文件类型启用了Prettier，或在配置中明确指定文件类型。

高级配置技巧

1. 工作区特定设置

在VS Code中，可以在工作区设置中覆盖用户设置：

json
// .vscode/settings.json
{
  "prettier.configPath": "./config/.prettierrc.js",
  "prettier.ignorePath": ".prettierignore"
}

2. 语言特定设置

为不同语言设置不同的格式化选项：

json
{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[markdown]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.wordWrap": "on"
  }
}

3. 项目级编辑器配置

创建项目特定的编辑器配置，确保团队成员使用一致的设置：

json
// .vscode/settings.json
{
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.detectIndentation": false,
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.trimFinalNewlines": true
}

通过这些编辑器集成，您可以获得实时的代码格式化体验，提高开发效率和代码质量。