0
# Prettier Configuration
1

2
@umijs/fabric provides an opinionated Prettier configuration that enforces consistent code formatting across JavaScript, TypeScript, and other supported file types.
3

4
## Import
5

6
```javascript
7
// Direct module import
8
const { prettier } = require("@umijs/fabric");
9

10
// Configuration file usage
11
const fabric = require('@umijs/fabric');
12
module.exports = {
13
  ...fabric.prettier,
14
};
15
```
16

17
## Configuration Object
18

19
```typescript { .api }
20
/**
21
 * Prettier configuration object with opinionated formatting rules
22
 */
23
const prettier: PrettierConfig;
24

25
interface PrettierConfig {
26
  singleQuote: boolean;
27
  trailingComma: 'all' | 'es5' | 'none';
28
  printWidth: number;
29
  proseWrap: 'always' | 'never' | 'preserve';
30
  endOfLine: 'auto' | 'lf' | 'crlf' | 'cr';
31
  overrides: PrettierOverride[];
32
}
33

34
interface PrettierOverride {
35
  files: string;
36
  options: {
37
    parser: string;
38
  };
39
}
40
```
41

42
## Core Settings
43

44
### Primary Configuration
45

46
```typescript { .api }
47
/**
48
 * Core Prettier formatting options
49
 */
50
interface CorePrettierSettings {
51
  /**
52
   * Use single quotes instead of double quotes
53
   * @default true
54
   */
55
  singleQuote: true;
56
  
57
  /**
58
   * Print trailing commas wherever possible in multi-line structures
59
   * @default 'all'
60
   */
61
  trailingComma: 'all';
62
  
63
  /**
64
   * Line wrap length
65
   * @default 100
66
   */
67
  printWidth: 100;
68
  
69
  /**
70
   * How to handle prose wrapping in markdown
71
   * @default 'never'
72
   */
73
  proseWrap: 'never';
74
  
75
  /**
76
   * Line ending style
77
   * @default 'lf'
78
   */
79
  endOfLine: 'lf';
80
}
81
```
82

83
### File-Specific Overrides
84

85
The configuration includes special handling for specific file types:
86

87
```typescript { .api }
88
/**
89
 * File-specific parser overrides
90
 */
91
const overrides: PrettierOverride[] = [
92
  {
93
    files: '.prettierrc',
94
    options: {
95
      parser: 'json',
96
    },
97
  },
98
  {
99
    files: 'document.ejs',
100
    options: {
101
      parser: 'html',
102
    },
103
  },
104
];
105
```
106

107
## Usage Examples
108

109
### Basic Configuration File
110

111
```javascript
112
// .prettierrc.js
113
const fabric = require('@umijs/fabric');
114

115
module.exports = {
116
  ...fabric.prettier,
117
};
118
```
119

120
### Extended Configuration
121

122
```javascript
123
// .prettierrc.js
124
const fabric = require('@umijs/fabric');
125

126
module.exports = {
127
  ...fabric.prettier,
128
  // Override specific settings if needed
129
  printWidth: 120,
130
  semi: true,
131
};
132
```
133

134
### Package.json Configuration
135

136
```json
137
{
138
  "prettier": "@umijs/fabric/dist/prettier"
139
}
140
```
141

142
### Programmatic Usage
143

144
```javascript
145
const { prettier: prettierConfig } = require('@umijs/fabric');
146
const prettier = require('prettier');
147

148
// Format code using the configuration
149
const formattedCode = prettier.format(sourceCode, {
150
  ...prettierConfig,
151
  parser: 'typescript',
152
});
153
```
154

155
## Supported File Types
156

157
The configuration works with all file types that Prettier supports:
158

159
- **JavaScript**: `.js`, `.jsx`, `.mjs`
160
- **TypeScript**: `.ts`, `.tsx`
161
- **JSON**: `.json`, `.jsonc`
162
- **CSS**: `.css`, `.scss`, `.sass`, `.less`
163
- **HTML**: `.html`, `.htm`
164
- **Markdown**: `.md`, `.mdx`
165
- **YAML**: `.yml`, `.yaml`
166
- **GraphQL**: `.graphql`, `.gql`
167

168
## Integration with ESLint
169

170
The Prettier configuration is designed to work seamlessly with the @umijs/fabric ESLint configuration. The ESLint config includes `prettier` in its extends array and disables formatting-related rules to prevent conflicts.
171

172
```javascript
173
// .eslintrc.js - No additional configuration needed
174
module.exports = {
175
  extends: [require.resolve('@umijs/fabric/dist/eslint')],
176
  // Prettier integration is automatically handled
177
};
178
```
179

180
## IDE Integration
181

182
### VS Code
183

184
```json
185
// .vscode/settings.json
186
{
187
  "editor.formatOnSave": true,
188
  "editor.defaultFormatter": "esbenp.prettier-vscode",
189
  "prettier.configPath": ".prettierrc.js"
190
}
191
```
192

193
### WebStorm/IntelliJ
194

195
The configuration will be automatically detected when using a `.prettierrc.js` file in your project root.
196

197
## Git Hooks Integration
198

199
Use with husky for automatic formatting on commit:
200

201
```json
202
// package.json
203
{
204
  "husky": {
205
    "hooks": {
206
      "pre-commit": "lint-staged"
207
    }
208
  },
209
  "lint-staged": {
210
    "*.{js,jsx,ts,tsx,json,css,md}": [
211
      "prettier --write",
212
      "git add"
213
    ]
214
  }
215
}
216
```
217

218
## Configuration Philosophy
219

220
The @umijs/fabric Prettier configuration follows these principles:
221

222
1. **Consistency Over Preference**: Enforces consistent formatting across all codebases
223
2. **Minimal Configuration**: Provides sensible defaults without excessive customization
224
3. **Modern Standards**: Uses contemporary JavaScript formatting conventions
225
4. **Team Collaboration**: Reduces formatting debates and code review noise
226
5. **Tool Integration**: Works seamlessly with ESLint and other development tools
227

228
## Ignore Patterns
229

230
The package includes a `.prettierignore` file with common ignore patterns:
231

232
```text
233
**/*.svg
234
package.json
235
.umi
236
.umi-production
237
/dist
238
.dockerignore
239
.DS_Store
240
.gitignore
241
.eslintignore
242
*.png
243
*.toml
244
docker
245
.editorconfig
246
Dockerfile*
247
.prettierignore
248
LICENSE
249
.eslintcache
250
*.lock
251
yarn-error.log
252
.history
253
CNAME
254
/build
255
/public
256
**/.umi/**
257
**/.umi-production/**
258
**/dist/**
259
**/lib/**
260
**/es/**
261
**/__snapshots__/**
262
**/.node/**
263
```
264

265
These patterns prevent Prettier from formatting files that should remain unchanged or are generated automatically.