Prettier Config

Prettier Code Formatting Configuration

Generated .prettierrc

{
  "tabWidth": 2,
  "semi": false,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "arrowParens": "always",
  "printWidth": 80,
  "useTabs": false
}

Formatting Preview

import { ref, computed } from 'vue'

const greeting = 'Hello'
const items = [ 'a', 'b', 'c', ]

const fn = (x) => {
  return items.filter((x) => (x) !== '')
}

Prettier Config Generator Guide

Key Features

  • Visual configuration of all Prettier options
  • Real-time preview of code formatting
  • Generate .prettierrc config file
  • JSON format output

Common Configs

  • Vue/React projects typically use 2-space indentation
  • It's recommended to enable trailing commas (trailingComma: all)
  • For CJK projects, you may increase print width to 100-120