Prettier Configuration

Prettier Configuration

pjt provides Prettier configurations for consistent code formatting.

Available configurations

Default

Standard configuration with common settings.

prettier.config.js

import pjt from 'pjt/prettier';

export default pjt.config;

Custom

Customized configuration for specific needs.

import pjt from 'pjt/prettier';

export default {
  ...pjt.config,
  semi: false,
  singleQuote: true
};

Module structure

Prettier configurations are in src/prettier/:

src/prettier/
├── index.ts   # Main export
└── config.ts  # Configuration

Configuration options

Basic options

export default {
  // Formatting
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,

  // Brackets
  semi: true,
  singleQuote: false,

  // Commas
  trailingComma: 'es5',

  // Spaces
  bracketSpacing: true,
  bracketSameLine: false,

  // Other
  arrowParens: 'avoid',
  endOfLine: 'lf'
};

TypeScript options

export default {
  ...pjt.config,
  // TypeScript specific
  parser: 'typescript'
};

JSX options

export default {
  ...pjt.config,
  // JSX specific
  jsxSingleQuote: false,
  jsxBracketSameLine: false
};

Editor integration

VS Code

Add to .vscode/settings.json:

{
  "prettier.configPath": "prettier.config.js",
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

WebStorm/IntelliJ

Prettier will automatically use the configuration.

CLI commands

Formatting files

# Format all files
npx prettier --write .

# Check formatting
npx prettier --check .

# Format specific files
npx prettier --write "src/**/*.js"

Pre-commit hooks

With Husky

# Install husky
npm install husky --save-dev

# Add hook
npx husky add .husky/pre-commit "npx prettier --check . && npx eslint ."

With lint-staged

{
  "lint-staged": {
    "*.{js,ts,jsx,tsx}": [
      "prettier --write",
      "eslint --fix"
    ]
  }
}

Ignore files

Create .prettierignore:

# Standard ignore
node_modules/
dist/
build/

# Project specific
coverage/
*.min.js

Best practices

1. Consistency

Use the same configuration across the team.

2. Automation

Enable format on save in editors.

3. Pre-commit

Always check formatting before commit.

4. Team standard

Define team standard for options.

Example configuration

prettier.config.js

import pjt from 'pjt/prettier';

export default {
  ...pjt.config,
  // Team standard
  semi: false,
  singleQuote: true,
  trailingComma: 'all',

  // Project specific
  printWidth: 100,
  tabWidth: 2
};

Troubleshooting

Format not applied

# Check configuration
npx prettier --config prettier.config.js --check file.js

# Check ignore
npx prettier --ignore-path .prettierignore --check .

Conflicts with ESLint

// Disable ESLint rules that overlap
{
  rules: {
    'quotes': 'off',
    'comma-dangle': 'off'
  }
}

Slow formatting

• Use .prettierignore
• Format only changed files
• Use fast-glob for large projects