Framework Support

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

Vue Support

vuePreprocessor

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

function vuePreprocessor(code: string, options: PrettierOptions): string

Parameters:

• code: Vue SFC source code string
• options: Prettier options including plugin configuration

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

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

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

Vue SFC Example

Input:

<template>
  <div>{{ message }}</div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { utils } from './utils';
import { computed } from 'vue';
import axios from 'axios';

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

<style scoped>
div { color: blue; }
</style>

Output (with appropriate configuration):

<template>
  <div>{{ message }}</div>
</template>

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

import { computed, ref } from 'vue';

import { utils } from './utils';

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

<style scoped>
div { color: blue; }
</style>

Vue Configuration Requirements

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

{
  "peerDependencies": {
    "@vue/compiler-sfc": "3.x"
  },
  "peerDependenciesMeta": {
    "@vue/compiler-sfc": {
      "optional": true
    }
  }
}

Installation:

npm install --save-dev @vue/compiler-sfc

Svelte Support

sveltePreprocessor

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

function sveltePreprocessor(code: string, options: PrettierOptions): string

Parameters:

• code: Svelte component source code string
• options: Prettier options including plugin configuration

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

The Svelte preprocessor provides:

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

Svelte Component Example

Input:

<script>
  import { onMount } from 'svelte';
  import { utils } from './utils';
  import axios from 'axios';
  import { writable } from 'svelte/store';
  
  let data = writable([]);
  
  onMount(async () => {
    const response = await axios.get('/api/data');
    data.set(response.data);
  });
</script>

<main>
  <h1>Hello Svelte!</h1>
</main>

<style>
  main { padding: 1rem; }
</style>

Output (with appropriate configuration):

<script>
  import axios from 'axios';
  
  import { onMount } from 'svelte';
  import { writable } from 'svelte/store';
  
  import { utils } from './utils';
  
  let data = writable([]);
  
  onMount(async () => {
    const response = await axios.get('/api/data');
    data.set(response.data);
  });
</script>

<main>
  <h1>Hello Svelte!</h1>
</main>

<style>
  main { padding: 1rem; }
</style>

Svelte Parser Creation

function createSvelteParsers(): { parsers?: any } | {}

Dynamically imports and creates Svelte parsers with graceful fallback:

• Dynamic Import: Attempts to require prettier-plugin-svelte
• Fallback Handling: Returns empty object if plugin not available
• Parser Integration: Integrates with Prettier's parser system

Svelte Configuration Requirements

Svelte support requires peer dependencies:

{
  "peerDependencies": {
    "prettier-plugin-svelte": "3.x",
    "svelte": "4.x || 5.x"
  },
  "peerDependenciesMeta": {
    "prettier-plugin-svelte": {
      "optional": true
    },
    "svelte": {
      "optional": true
    }
  }
}

Installation:

npm install --save-dev prettier-plugin-svelte svelte

Framework Integration

Parser Registration

Both framework preprocessors integrate with Prettier's parser system:

// Vue integration
parsers: {
  vue: {
    ...htmlParsers.vue,
    preprocess: vuePreprocessor,
  }
}

// Svelte integration (conditional)
parsers: {
  svelte: {
    ...svelteParsers.parsers.svelte,
    preprocess: sveltePreprocessor,
  }
}

File Type Detection

Framework preprocessors are automatically applied based on file extensions:

• Vue files: .vue extension triggers vuePreprocessor
• Svelte files: .svelte extension triggers sveltePreprocessor
• Default handling: defaultPreprocessor skips these file types

Configuration Compatibility

Framework preprocessors respect all plugin configuration options:

// Works with both Vue and Svelte files
{
  "importOrder": ["^svelte", "^vue", "^@/(.*)$", "^[./]"],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true,
  "importOrderGroupNamespaceSpecifiers": true
}

Advanced Framework Features

TypeScript Support

Both preprocessors fully support TypeScript:

<script setup lang="ts">
import type { Component } from 'vue';
import { ref } from 'vue';
</script>

<script lang="ts">
  import type { Writable } from 'svelte/store';
  import { writable } from 'svelte/store';
</script>

Module Script Blocks

Svelte module script blocks are also processed:

<script context="module" lang="ts">
  import { browser } from '$app/environment';
  import { utils } from './utils';
  
  export const preload = () => {
    if (browser) {
      return utils.loadData();
    }
  };
</script>

<script>
  import { onMount } from 'svelte';
  // Regular script content
</script>

Error Handling

Framework preprocessors include robust error handling:

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

Framework-Specific Considerations

Vue Considerations

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

Svelte Considerations

• SvelteKit Integration: Compatible with SvelteKit project structure
• Store Imports: Properly handles Svelte store imports and usage
• Component Imports: Sorts both component and utility imports
• Preprocessor Chain: Integrates with other Svelte preprocessors