0
# Framework Support
1

2
Specialized preprocessors for Vue Single File Components and Svelte files with framework-aware import handling that preserves component structure while sorting imports.
3

4
## Vue Support
5

6
### vuePreprocessor
7

8
Preprocessor specifically designed for Vue Single File Components (.vue files).
9

10
```typescript { .api }
11
function vuePreprocessor(code: string, options: PrettierOptions): string
12
```
13

14
**Parameters:**
15
- `code`: Vue SFC source code string
16
- `options`: Prettier options including plugin configuration
17

18
**Returns:** Processed Vue SFC code with sorted imports in script sections
19

20
The Vue preprocessor handles the complexity of Single File Components by:
21

22
1. **SFC Parsing**: Recognizes and preserves Vue SFC structure (template, script, style blocks)
23
2. **Script Extraction**: Identifies `<script>` and `<script setup>` blocks
24
3. **Import Processing**: Applies import sorting only within script sections
25
4. **Structure Preservation**: Maintains template and style blocks unchanged
26
5. **TypeScript Support**: Handles both JavaScript and TypeScript script blocks
27

28
#### Vue SFC Example
29

30
**Input:**
31
```vue
32
<template>
33
  <div>{{ message }}</div>
34
</template>
35

36
<script setup lang="ts">
37
import { ref } from 'vue';
38
import { utils } from './utils';
39
import { computed } from 'vue';
40
import axios from 'axios';
41

42
const message = ref('Hello Vue!');
43
</script>
44

45
<style scoped>
46
div { color: blue; }
47
</style>
48
```
49

50
**Output (with appropriate configuration):**
51
```vue
52
<template>
53
  <div>{{ message }}</div>
54
</template>
55

56
<script setup lang="ts">
57
import axios from 'axios';
58

59
import { computed, ref } from 'vue';
60

61
import { utils } from './utils';
62

63
const message = ref('Hello Vue!');
64
</script>
65

66
<style scoped>
67
div { color: blue; }
68
</style>
69
```
70

71
### Vue Configuration Requirements
72

73
Vue support requires the `@vue/compiler-sfc` peer dependency:
74

75
```json
76
{
77
  "peerDependencies": {
78
    "@vue/compiler-sfc": "3.x"
79
  },
80
  "peerDependenciesMeta": {
81
    "@vue/compiler-sfc": {
82
      "optional": true
83
    }
84
  }
85
}
86
```
87

88
**Installation:**
89
```bash
90
npm install --save-dev @vue/compiler-sfc
91
```
92

93
## Svelte Support
94

95
### sveltePreprocessor
96

97
Preprocessor for Svelte component files (.svelte) with dynamic parser loading.
98

99
```typescript { .api }
100
function sveltePreprocessor(code: string, options: PrettierOptions): string
101
```
102

103
**Parameters:**
104
- `code`: Svelte component source code string  
105
- `options`: Prettier options including plugin configuration
106

107
**Returns:** Processed Svelte component code with sorted imports in script sections
108

109
The Svelte preprocessor provides:
110

111
1. **Component Parsing**: Understands Svelte component structure
112
2. **Script Block Handling**: Processes both regular and module script blocks
113
3. **Import Sorting**: Applies sorting rules within script contexts
114
4. **Markup Preservation**: Leaves HTML template and CSS unchanged
115
5. **Dynamic Loading**: Conditionally loads Svelte parser support
116

117
#### Svelte Component Example
118

119
**Input:**
120
```svelte
121
<script>
122
  import { onMount } from 'svelte';
123
  import { utils } from './utils';
124
  import axios from 'axios';
125
  import { writable } from 'svelte/store';
126
  
127
  let data = writable([]);
128
  
129
  onMount(async () => {
130
    const response = await axios.get('/api/data');
131
    data.set(response.data);
132
  });
133
</script>
134

135
<main>
136
  <h1>Hello Svelte!</h1>
137
</main>
138

139
<style>
140
  main { padding: 1rem; }
141
</style>
142
```
143

144
**Output (with appropriate configuration):**
145
```svelte
146
<script>
147
  import axios from 'axios';
148
  
149
  import { onMount } from 'svelte';
150
  import { writable } from 'svelte/store';
151
  
152
  import { utils } from './utils';
153
  
154
  let data = writable([]);
155
  
156
  onMount(async () => {
157
    const response = await axios.get('/api/data');
158
    data.set(response.data);
159
  });
160
</script>
161

162
<main>
163
  <h1>Hello Svelte!</h1>
164
</main>
165

166
<style>
167
  main { padding: 1rem; }
168
</style>
169
```
170

171
### Svelte Parser Creation
172

173
```typescript { .api }
174
function createSvelteParsers(): { parsers?: any } | {}
175
```
176

177
Dynamically imports and creates Svelte parsers with graceful fallback:
178

179
- **Dynamic Import**: Attempts to require `prettier-plugin-svelte`
180
- **Fallback Handling**: Returns empty object if plugin not available
181
- **Parser Integration**: Integrates with Prettier's parser system
182

183
### Svelte Configuration Requirements
184

185
Svelte support requires peer dependencies:
186

187
```json
188
{
189
  "peerDependencies": {
190
    "prettier-plugin-svelte": "3.x",
191
    "svelte": "4.x || 5.x"
192
  },
193
  "peerDependenciesMeta": {
194
    "prettier-plugin-svelte": {
195
      "optional": true
196
    },
197
    "svelte": {
198
      "optional": true
199
    }
200
  }
201
}
202
```
203

204
**Installation:**
205
```bash
206
npm install --save-dev prettier-plugin-svelte svelte
207
```
208

209
## Framework Integration
210

211
### Parser Registration
212

213
Both framework preprocessors integrate with Prettier's parser system:
214

215
```typescript { .api }
216
// Vue integration
217
parsers: {
218
  vue: {
219
    ...htmlParsers.vue,
220
    preprocess: vuePreprocessor,
221
  }
222
}
223

224
// Svelte integration (conditional)
225
parsers: {
226
  svelte: {
227
    ...svelteParsers.parsers.svelte,
228
    preprocess: sveltePreprocessor,
229
  }
230
}
231
```
232

233
### File Type Detection
234

235
Framework preprocessors are automatically applied based on file extensions:
236

237
- **Vue files**: `.vue` extension triggers `vuePreprocessor`
238
- **Svelte files**: `.svelte` extension triggers `sveltePreprocessor`
239
- **Default handling**: `defaultPreprocessor` skips these file types
240

241
### Configuration Compatibility
242

243
Framework preprocessors respect all plugin configuration options:
244

245
```javascript
246
// Works with both Vue and Svelte files
247
{
248
  "importOrder": ["^svelte", "^vue", "^@/(.*)$", "^[./]"],
249
  "importOrderSeparation": true,
250
  "importOrderSortSpecifiers": true,
251
  "importOrderGroupNamespaceSpecifiers": true
252
}
253
```
254

255
## Advanced Framework Features
256

257
### TypeScript Support
258

259
Both preprocessors fully support TypeScript:
260

261
```vue
262
<script setup lang="ts">
263
import type { Component } from 'vue';
264
import { ref } from 'vue';
265
</script>
266
```
267

268
```svelte
269
<script lang="ts">
270
  import type { Writable } from 'svelte/store';
271
  import { writable } from 'svelte/store';
272
</script>
273
```
274

275
### Module Script Blocks
276

277
Svelte module script blocks are also processed:
278

279
```svelte
280
<script context="module" lang="ts">
281
  import { browser } from '$app/environment';
282
  import { utils } from './utils';
283
  
284
  export const preload = () => {
285
    if (browser) {
286
      return utils.loadData();
287
    }
288
  };
289
</script>
290

291
<script>
292
  import { onMount } from 'svelte';
293
  // Regular script content
294
</script>
295
```
296

297
### Error Handling
298

299
Framework preprocessors include robust error handling:
300

301
- **Missing Dependencies**: Graceful fallback when peer dependencies unavailable
302
- **Parse Errors**: Preserve original code on framework-specific parse failures  
303
- **Invalid Structure**: Handle malformed component files safely
304
- **Import Conflicts**: Resolve conflicts between framework and user imports
305

306
## Framework-Specific Considerations
307

308
### Vue Considerations
309

310
- **Composition API**: Handles both Options API and Composition API imports
311
- **Setup Script**: Properly processes `<script setup>` syntax
312
- **SFC Compiler**: Requires compatible `@vue/compiler-sfc` version
313
- **Template Dependencies**: Preserves imports used only in templates
314

315
### Svelte Considerations
316

317
- **SvelteKit Integration**: Compatible with SvelteKit project structure
318
- **Store Imports**: Properly handles Svelte store imports and usage
319
- **Component Imports**: Sorts both component and utility imports
320
- **Preprocessor Chain**: Integrates with other Svelte preprocessors