How to configure Prettier in VS Code, WebStorm and other editors?

Prettier Configuration in Different Editors

Prettier supports integration with mainstream code editors, enabling automatic formatting and real-time preview to improve development efficiency.

VS Code Configuration

1. Install Extension

• Search "Prettier - Code formatter" in VS Code Extension Marketplace
• Install the official Prettier extension

2. Basic Configuration Configure in .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. Advanced Configuration

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

WebStorm Configuration

1. Built-in Support WebStorm has built-in Prettier support, no additional installation needed

2. Configuration Steps

1. Open Settings/Preferences
2. Navigate to Languages & Frameworks > JavaScript > Prettier
3. Enable "On 'Reformat Code' action"
4. Specify Prettier package path

3. Format on Save In Settings > Tools > Actions on Save:

• Check "Reformat code"
• Select Prettier as formatting tool

Vim/Neovim Configuration

1. Using coc-prettier

vim
" Install coc.nvim and coc-prettier
:CocInstall coc-prettier

" Configure auto-format
autocmd BufWritePre *.js,*.jsx,*.ts,*.tsx,*.json :call CocAction('format')

2. Using vim-prettier

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

" Configure
let g:prettier#autoformat = 1
let g:prettier#exec_cmd_async = 1

3. Using 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" },
    }),
  },
})

-- Auto format
vim.cmd([[autocmd BufWritePre * lua vim.lsp.buf.formatting_sync()]])

Sublime Text Configuration

1. Install Package Control

• Install "JsPrettier" through Package Control

2. Configuration In 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 Configuration

1. Install Plugin

• Install "prettier-atom" through Atom Settings

2. Configuration In Settings > Packages > prettier-atom:

• Enable "Format on Save"
• Configure Prettier options

Emacs Configuration

1. Using 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))

General Best Practices

1. Project-Level Configuration

• Create .prettierrc in project root
• Ensure editor uses project configuration
• Commit configuration files to version control

2. Editor Configuration Management

• Use .editorconfig for unified basic configuration
• Configure VS Code specific settings in .vscode/settings.json
• Document editor configuration in project docs

3. Team Collaboration

• Provide editor configuration guide
• Document recommended configuration in README
• Use unified configuration files

4. Performance Optimization

• Only enable formatting when necessary
• Use caching mechanism
• Configure ignore rules

Common Issues

1. Formatting Not Working

• Confirm Prettier is installed
• Check configuration file path
• Verify editor extension is enabled

2. Configuration Conflicts

• Prioritize project-level configuration
• Disable editor default formatters
• Check priority of multiple configuration files

3. Performance Issues

• Reduce auto-format trigger frequency
• Use incremental formatting
• Configure ignore rules

By properly configuring editor integration, you can fully leverage Prettier's advantages and improve development efficiency.