0
# Prettier Configuration
1

2
Pre-configured Prettier settings optimized for Umi.js projects with specific formatting rules and file-specific parser overrides.
3

4
## Capabilities
5

6
### Main Prettier Configuration
7

8
The core Prettier configuration with opinionated formatting rules.
9

10
```javascript { .api }
11
/**
12
 * Main Prettier configuration object
13
 * Provides consistent formatting rules for JavaScript, TypeScript, and other files
14
 */
15
interface PrettierConfig {
16
  /** Use single quotes instead of double quotes */
17
  singleQuote: boolean;
18
  
19
  /** Add trailing commas wherever possible */
20
  trailingComma: "all" | "es5" | "none";
21
  
22
  /** Maximum line width before wrapping */
23
  printWidth: number;
24
  
25
  /** How to wrap prose (never wrap) */
26
  proseWrap: "always" | "never" | "preserve";
27
  
28
  /** Line ending style */
29
  endOfLine: "lf" | "crlf" | "cr" | "auto";
30
  
31
  /** File-specific parser overrides */
32
  overrides: Array<{
33
    files: string;
34
    options: {
35
      parser: string;
36
    };
37
  }>;
38
}
39
```
40

41
### Default Configuration Values
42

43
The specific values used in @umijs/fabric's Prettier configuration.
44

45
```javascript { .api }
46
const prettierConfig: PrettierConfig = {
47
  singleQuote: true,        // Use single quotes: 'hello' instead of "hello"
48
  trailingComma: 'all',     // Add trailing commas: [1, 2, 3,]
49
  printWidth: 100,          // Wrap lines at 100 characters
50
  proseWrap: 'never',       // Never wrap prose/markdown text
51
  endOfLine: 'lf',          // Use Unix line endings (\n)
52
  overrides: [
53
    {
54
      files: '.prettierrc',
55
      options: {
56
        parser: 'json',     // Parse .prettierrc as JSON
57
      },
58
    },
59
    {
60
      files: 'document.ejs',
61
      options: {
62
        parser: 'html',     // Parse .ejs files as HTML
63
      },
64
    },
65
  ],
66
};
67
```
68

69
### File-Specific Parser Overrides
70

71
Configuration for handling specific file types with custom parsers.
72

73
```javascript { .api }
74
interface PrettierOverride {
75
  /** File pattern to match */
76
  files: string;
77
  
78
  /** Parser options for matched files */
79
  options: {
80
    /** Parser to use for these files */
81
    parser: string;
82
  };
83
}
84
```
85

86
**Supported Overrides:**
87

88
- **.prettierrc files**: Parsed as JSON for proper formatting of Prettier configuration files
89
- **document.ejs files**: Parsed as HTML for EJS template files
90

91
### Usage Examples
92

93
**Basic Integration:**
94

95
```javascript
96
// .prettierrc.js
97
const fabric = require('@umijs/fabric');
98

99
module.exports = {
100
  ...fabric.prettier,
101
};
102
```
103

104
**Custom Overrides:**
105

106
```javascript
107
// .prettierrc.js
108
const fabric = require('@umijs/fabric');
109

110
module.exports = {
111
  ...fabric.prettier,
112
  // Override specific rules
113
  printWidth: 120,
114
  singleQuote: false,
115
  // Add custom file overrides
116
  overrides: [
117
    ...fabric.prettier.overrides,
118
    {
119
      files: '*.md',
120
      options: {
121
        proseWrap: 'always',
122
        printWidth: 80,
123
      },
124
    },
125
  ],
126
};
127
```
128

129
**Direct Configuration:**
130

131
```javascript
132
// .prettierrc.js
133
module.exports = {
134
  singleQuote: true,
135
  trailingComma: 'all',
136
  printWidth: 100,
137
  proseWrap: 'never',
138
  endOfLine: 'lf',
139
  overrides: [
140
    {
141
      files: '.prettierrc',
142
      options: {
143
        parser: 'json',
144
      },
145
    },
146
    {
147
      files: 'document.ejs',
148
      options: {
149
        parser: 'html',
150
      },
151
    },
152
  ],
153
};
154
```
155

156
**Package.json Scripts:**
157

158
```json
159
{
160
  "scripts": {
161
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
162
    "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,md}\""
163
  }
164
}
165
```
166

167
### Configuration Rationale
168

169
**Single Quotes (`singleQuote: true`)**
170
- Consistent with JavaScript conventions
171
- Fewer escape sequences needed in JSX
172
- Cleaner appearance in most codebases
173

174
**Trailing Commas (`trailingComma: 'all'`)**
175
- Cleaner git diffs when adding/removing items
176
- Easier code generation and manipulation
177
- Supported in modern JavaScript environments
178

179
**Print Width (`printWidth: 100`)**
180
- Balance between readability and horizontal space usage
181
- Works well with modern wide screens
182
- Allows for reasonable nesting depth
183

184
**Prose Wrap (`proseWrap: 'never'`)**
185
- Prevents unwanted line breaks in documentation
186
- Preserves intended formatting in markdown files
187
- Avoids issues with auto-generated documentation
188

189
**Line Endings (`endOfLine: 'lf'`)**
190
- Consistent Unix-style line endings
191
- Prevents issues in cross-platform development
192
- Standard for most web development projects
193

194
### Integration with .prettierignore
195

196
The package includes a comprehensive `.prettierignore` template with common ignore patterns:
197

198
```text
199
**/*.svg
200
package.json
201
.umi
202
.umi-production
203
/dist
204
.dockerignore
205
.DS_Store
206
.gitignore
207
.eslintignore
208
*.png
209
*.toml
210
docker
211
.editorconfig
212
Dockerfile*
213
.prettierignore
214
LICENSE
215
.eslintcache
216
*.lock
217
yarn-error.log
218
.history
219
CNAME
220
/build
221
/public
222
**/.umi/**
223
**/.umi-production/**
224
**/dist/**
225
**/lib/**
226
**/es/**
227
**/__snapshots__/**
228
**/.node/**
229
```
230

231
**Usage:**
232

233
```bash
234
# Copy the ignore file to your project
235
cp node_modules/@umijs/fabric/dist/.prettierignore .prettierignore
236
```