Prettier Configuration

17.2.1. Full .prettierrc Example

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 100,
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "lf",
  "vueIndentScriptAndStyle": false,
  "singleAttributePerLine": true
}

---

17.2.2. .prettierignore

dist/
node_modules/
*.min.js
coverage/

---

17.2.3. Configuration Principles

Item	Value	Rationale
semi	false	Semicolons are unnecessary
singleQuote	true	Standardizes strings to single quotes
trailingComma	all	Minimizes diffs
printWidth	100	Balances readability and screen utilization
endOfLine	lf	Ensures cross-platform consistency
singleAttributePerLine	true	Improves Vue template readability

---

17.2.4. Role Separation Between ESLint and Prettier

Area	Responsible Tool
Code formatting (indentation, quotes, line breaks)	Prettier
Code quality (unused variables, any types, console)	ESLint
Vue SFC rules (block order, API style)	ESLint

• Prettier is responsible only for code styling.
• ESLint is responsible for code quality and Vue-related rules.
• eslint-config-prettier prevents conflicts between the two tools.