Prettier Configuration

CPR uses Prettier 3.x for consistent code formatting across the entire codebase. Prettier is integrated with ESLint via eslint-plugin-prettier, so formatting issues are reported as lint errors and can be auto-fixed.

Configuration

The Prettier configuration lives in .prettierrc at the project root:

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

Rule Explanations

Rule	Value	Effect
semi	true	Always add semicolons at the end of statements
singleQuote	true	Use single quotes for strings ('hello' not "hello")
tabWidth	2	Indent with 2 spaces
trailingComma	"es5"	Add trailing commas where valid in ES5 (objects, arrays)
printWidth	80	Wrap lines at 80 characters
bracketSpacing	true	Add spaces inside object braces ({ key: value })
arrowParens	"always"	Always wrap arrow function parameters in parentheses ((x) => x)

Code Examples

// With CPR's Prettier config:
const patient = {
  last_name: 'Dela Cruz',
  first_name: 'Juan',
  birthdate: '1985-03-15',
};

const getName = (patient: Patient): string => {
  return `${patient.last_name}, ${patient.first_name}`;
};

const status = ['ACTIVE', 'PENDING', 'DISCHARGED'];

Running Prettier

# Check formatting (reports errors but does not fix)
npm run format

# Fix all formatting issues
npm run format:fix

These scripts are defined in package.json:

{
  "scripts": {
    "format": "prettier --check .",
    "format:fix": "prettier --write ."
  }
}

Integration with ESLint

Prettier is integrated with ESLint through two packages:

1. eslint-plugin-prettier -- Runs Prettier as an ESLint rule. Any formatting difference is reported as an ESLint error with the rule name prettier/prettier.

2. eslint-config-prettier -- Disables ESLint rules that conflict with Prettier (e.g., indent, quotes, semi, comma-dangle). This is included via the eslint-plugin-prettier/recommended preset.

// eslint.config.mjs
import withNuxt from './.nuxt/eslint.config.mjs';
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';

export default withNuxt([eslintPluginPrettierRecommended]);

This means you can use a single command to fix both lint and formatting issues:

# This fixes ESLint errors AND Prettier formatting
npm run lint:fix

Editor Integration

VS Code

Install the Prettier extension (esbenp.prettier-vscode). Since Prettier is integrated with ESLint, you can rely on the ESLint extension for formatting on save:

// .vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Alternatively, let ESLint handle formatting on save (since Prettier is integrated as an ESLint rule):

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

Both approaches achieve the same result. Choose one to avoid redundant formatting.

Files Covered

Prettier formats all file types it supports:

• .ts -- TypeScript files (composables, stores, services, types, middleware)
• .vue -- Vue single-file components (template, script, style sections)
• .js / .mjs -- JavaScript config files (eslint.config.mjs, etc.)
• .json -- JSON files (package.json, tsconfig.json, .prettierrc)
• .css -- Stylesheets (main.css)
• .md -- Markdown files

Ignoring Files

Create a .prettierignore file to exclude files from formatting:

# .prettierignore
node_modules
.nuxt
.output
dist
coverage

Prettier also respects .gitignore by default.

Common Formatting Issues

Template Line Wrapping

With printWidth: 80, Vue templates with many attributes may wrap:

<!-- Before Prettier -->
<UiInput v-model="patient.last_name" label="Last Name" required :error="errors.last_name" />

<!-- After Prettier (wrapped at 80 chars) -->
<UiInput
  v-model="patient.last_name"
  label="Last Name"
  required
  :error="errors.last_name"
/>

This is expected behavior and improves readability.

Trailing Commas

With trailingComma: "es5", Prettier adds trailing commas to multi-line objects and arrays:

const columns = [
  { key: 'name', label: 'Patient Name' },
  { key: 'status', label: 'Status' },  // <-- trailing comma
];

This produces cleaner git diffs when adding new items.