0
# @svgr/plugin-prettier
1

2
@svgr/plugin-prettier is a SVGR plugin that formats generated React components using Prettier. It integrates seamlessly with the SVGR plugin architecture to apply consistent code formatting to SVG-to-React component transformations, ensuring output follows established style guidelines.
3

4
## Package Information
5

6
- **Package Name**: @svgr/plugin-prettier
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install --save-dev @svgr/plugin-prettier`
10

11
## Core Imports
12

13
```typescript
14
import prettierPlugin from "@svgr/plugin-prettier";
15
```
16

17
For CommonJS:
18

19
```javascript
20
const prettierPlugin = require("@svgr/plugin-prettier");
21
```
22

23
## Basic Usage
24

25
@svgr/plugin-prettier is typically used through SVGR's configuration system:
26

27
**.svgrrc**
28
```json
29
{
30
  "plugins": ["@svgr/plugin-prettier"],
31
  "prettier": true,
32
  "runtimeConfig": true,
33
  "prettierConfig": {
34
    "semi": true,
35
    "singleQuote": true
36
  }
37
}
38
```
39

40
**Direct usage** (handled by SVGR internally):
41
```typescript
42
import prettierPlugin from "@svgr/plugin-prettier";
43

44
const formattedCode = prettierPlugin(code, config, state);
45
```
46

47
## Capabilities
48

49
### Code Formatting
50

51
Formats JavaScript/JSX code using Prettier with configurable options and runtime configuration resolution.
52

53
```typescript { .api }
54
/**
55
 * SVGR plugin that formats code using Prettier
56
 * @param code - The code string to format
57
 * @param config - SVGR configuration object
58
 * @param state - SVGR state object with component metadata
59
 * @returns Formatted code string, or original code if prettier is disabled
60
 */
61
function prettierPlugin(
62
  code: string,
63
  config: Config,
64
  state: State
65
): string;
66

67
interface Config {
68
  /** Enable/disable prettier formatting */
69
  prettier?: boolean;
70
  /** Enable runtime configuration file resolution */
71
  runtimeConfig?: boolean;
72
  /** Custom prettier configuration options */
73
  prettierConfig?: PrettierOptions;
74
  // ... other SVGR config options
75
}
76

77
interface State {
78
  /** Optional file path for configuration resolution */
79
  filePath?: string;
80
  /** Name of the React component being generated */
81
  componentName: string;
82
  /** Additional caller metadata */
83
  caller?: {
84
    name?: string;
85
    previousExport?: string | null;
86
    defaultPlugins?: ConfigPlugin[];
87
  };
88
}
89

90
type ConfigPlugin = string | Plugin;
91

92
interface PrettierOptions {
93
  /** Parser to use (defaults to 'babel' for React/JSX) */
94
  parser?: string;
95
  /** Whether to add semicolons */
96
  semi?: boolean;
97
  /** Use single quotes instead of double quotes */
98
  singleQuote?: boolean;
99
  /** Print width for line wrapping */
100
  printWidth?: number;
101
  /** Tab width for indentation */
102
  tabWidth?: number;
103
  /** Use tabs instead of spaces */
104
  useTabs?: boolean;
105
  /** Trailing comma configuration */
106
  trailingComma?: "none" | "es5" | "all";
107
  /** Bracket spacing in object literals */
108
  bracketSpacing?: boolean;
109
  /** Bracket line for JSX elements */
110
  bracketSameLine?: boolean;
111
  /** Arrow function parentheses */
112
  arrowParens?: "avoid" | "always";
113
  // ... other prettier options
114
}
115
```
116

117
**Behavior:**
118
- Returns original code unchanged if `config.prettier` is `false`
119
- Uses `state.filePath` or `process.cwd()` for prettier configuration resolution
120
- Resolves prettier configuration from filesystem when `config.runtimeConfig` is `true`
121
- Merges configuration in order of precedence (highest priority last):
122
  1. Default: `{ parser: 'babel' }`
123
  2. Resolved prettier config from `.prettierrc` files
124
  3. Custom config from `config.prettierConfig`
125
- Enables editorconfig integration during runtime configuration resolution
126
- Uses `prettier.format()` with merged configuration options
127

128
**Configuration Resolution:**
129
```typescript
130
// When runtimeConfig is true, the plugin resolves prettier config using:
131
import { resolveConfig } from 'prettier';
132

133
const prettierRcConfig = resolveConfig.sync(filePath, { 
134
  editorconfig: true 
135
});
136
```
137

138
**Configuration Merging:**
139
```typescript
140
import deepmerge from 'deepmerge';
141

142
const finalConfig = deepmerge.all([
143
  { parser: 'babel' },           // Default parser for JSX
144
  prettierRcConfig || {},        // Runtime config from .prettierrc
145
  config.prettierConfig || {},   // Custom overrides
146
]);
147
```
148

149
## Error Handling
150

151
The plugin gracefully handles configuration resolution failures:
152
- Falls back to `process.cwd()` if `state.filePath` is not provided
153
- Uses empty configuration if prettier config resolution fails
154
- Relies on prettier's built-in error handling for formatting failures
155

156
## Integration Notes
157

158
- **Peer Dependency**: Requires `@svgr/core` for Plugin, Config, and State interfaces
159
- **Dependencies**: Uses `prettier` ^2.8.7 for formatting and `deepmerge` ^4.3.1 for configuration merging
160
- **Plugin Architecture**: Follows SVGR's standard plugin interface pattern
161
- **TypeScript Support**: Fully typed with generated `.d.ts` files
162
- **Node.js Compatibility**: Requires Node.js >=14
163

164
## Common Configuration Examples
165

166
**Minimal setup:**
167
```json
168
{
169
  "plugins": ["@svgr/plugin-prettier"]
170
}
171
```
172

173
**With custom prettier config:**
174
```json
175
{
176
  "plugins": ["@svgr/plugin-prettier"],
177
  "prettier": true,
178
  "prettierConfig": {
179
    "semi": false,
180
    "singleQuote": true,
181
    "printWidth": 100
182
  }
183
}
184
```
185

186
**Disable runtime config resolution:**
187
```json
188
{
189
  "plugins": ["@svgr/plugin-prettier"],
190
  "prettier": true,
191
  "runtimeConfig": false,
192
  "prettierConfig": {
193
    "semi": true,
194
    "tabWidth": 2
195
  }
196
}
197
```