feat: support vue sfc

README.md

@@ -210,8 +210,8 @@ Having some trouble or an issue ? You can check [FAQ / Troubleshooting section](
 | NodeJS with ES Modules | ✅ Everything            | -                                                |
 | React                  | ✅ Everything            | -                                                |
 | Angular                | ✅ Everything            | Supported through `importOrderParserPlugins` API |
-| Vue                    | ⚠️ Soon to be supported. | Any contribution is welcome.                     |
-| Svelte                 | ⚠️ Soon to be supported. | Any contribution is welcome.                     |
+| Vue                    | ✅ Everything            | -                                                |
+| Svelte                 | ⚠️ Soon to be supported.  | Any contribution is welcome.                     |
 
 ### Used by
 

package.json

@@ -38,13 +38,14 @@
     "@babel/traverse": "7.17.3",
     "@babel/types": "7.17.0",
     "javascript-natural-sort": "0.7.1",
-    "lodash": "4.17.21"
+    "lodash": "4.17.21",
+    "@vue/compiler-sfc": "^3.2.40"
   },
   "devDependencies": {
     "@types/chai": "4.2.15",
     "@types/jest": "26.0.20",
-    "@types/node": "14.14.34",
     "@types/lodash": "4.14.168",
+    "@types/node": "14.14.34",
     "jest": "26.6.3",
     "prettier": "2.7.1",
     "ts-jest": "26.5.3",

src/index.ts

@@ -1,8 +1,10 @@
 import { parsers as babelParsers } from 'prettier/parser-babel';
 import { parsers as flowParsers } from 'prettier/parser-flow';
 import { parsers as typescriptParsers } from 'prettier/parser-typescript';
+import { parsers as htmlParsers } from 'prettier/parser-html';
 
-import { preprocessor } from './preprocessor';
+import { defaultPreprocessor } from './preprocessors/default-processor';
+import { vuePreprocessor } from './preprocessors/vue-preprocessor';
 
 const options = {
     importOrder: {
@@ -52,15 +54,19 @@ module.exports = {
     parsers: {
         babel: {
             ...babelParsers.babel,
-            preprocess: preprocessor,
+            preprocess: defaultPreprocessor,
         },
         flow: {
             ...flowParsers.flow,
-            preprocess: preprocessor,
+            preprocess: defaultPreprocessor,
         },
         typescript: {
             ...typescriptParsers.typescript,
-            preprocess: preprocessor,
+            preprocess: defaultPreprocessor,
+        },
+        vue: {
+            ...htmlParsers.vue,
+            preprocess: vuePreprocessor,
         },
     },
     options,

src/preprocessors/default-processor.ts

@@ -0,0 +1,7 @@
+import { PrettierOptions } from '../types';
+import { preprocessor } from './preprocessor';
+
+export function defaultPreprocessor(code: string, options: PrettierOptions) {
+    if (options.filepath?.endsWith('.vue')) return code;
+    return preprocessor(code, options);
+}

src/preprocessor.ts → src/preprocessors/preprocessor.ts

@@ -2,10 +2,10 @@ import { ParserOptions, parse as babelParser } from '@babel/parser';
 import traverse, { NodePath } from '@babel/traverse';
 import { ImportDeclaration, isTSModuleDeclaration } from '@babel/types';
 
-import { PrettierOptions } from './types';
-import { getCodeFromAst } from './utils/get-code-from-ast';
-import { getExperimentalParserPlugins } from './utils/get-experimental-parser-plugins';
-import { getSortedNodes } from './utils/get-sorted-nodes';
+import { PrettierOptions } from '../types';
+import { getCodeFromAst } from '../utils/get-code-from-ast';
+import { getExperimentalParserPlugins } from '../utils/get-experimental-parser-plugins';
+import { getSortedNodes } from '../utils/get-sorted-nodes';
 
 export function preprocessor(code: string, options: PrettierOptions) {
     const {

src/preprocessors/vue-preprocessor.ts

@@ -0,0 +1,12 @@
+import { parse } from '@vue/compiler-sfc';
+
+import { PrettierOptions } from '../types';
+import { preprocessor } from './preprocessor';
+
+export function vuePreprocessor(code: string, options: PrettierOptions) {
+    const { descriptor } = parse(code);
+    const content =
+        (descriptor.script ?? descriptor.scriptSetup)?.content ?? code;
+
+    return code.replace(content, `\n${preprocessor(content, options)}\n`);
+}

tests/Vue/__snapshots__/ppsi.spec.js.snap

@@ -0,0 +1,229 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`setup.vue - vue-verify: setup.vue 1`] = `
+<script setup>
+// I am top level comment in this file.
+import z from 'z';
+import threeLevelRelativePath from "../../../threeLevelRelativePath";
+import sameLevelRelativePath from "./sameLevelRelativePath";
+import thirdParty from "third-party";
+import oneLevelRelativePath from "../oneLevelRelativePath";
+import otherthing from "@core/otherthing";
+import abc from "@core/abc";
+import twoLevelRelativePath from "../../twoLevelRelativePath";
+import component from "@ui/hello";
+import fourLevelRelativePath from "../../../../fourLevelRelativePath";
+import something from "@server/something";
+import xyz from "@ui/xyz";
+import { defineComponent } from 'vue'
+
+function add(a,b) {
+  return a + b;
+}
+</script>
+
+<template>
+  <div></div>
+</template>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<script setup>
+// I am top level comment in this file.
+import thirdParty from "third-party";
+import { defineComponent } from "vue";
+import z from "z";
+
+import abc from "@core/abc";
+import otherthing from "@core/otherthing";
+
+import something from "@server/something";
+
+import component from "@ui/hello";
+import xyz from "@ui/xyz";
+
+import fourLevelRelativePath from "../../../../fourLevelRelativePath";
+import threeLevelRelativePath from "../../../threeLevelRelativePath";
+import twoLevelRelativePath from "../../twoLevelRelativePath";
+import oneLevelRelativePath from "../oneLevelRelativePath";
+import sameLevelRelativePath from "./sameLevelRelativePath";
+
+function add(a, b) {
+    return a + b;
+}
+</script>
+
+<template>
+    <div></div>
+</template>
+
+`;
+
+exports[`sfc.vue - vue-verify: sfc.vue 1`] = `
+<script>
+// I am top level comment in this file.
+import z from 'z';
+import threeLevelRelativePath from "../../../threeLevelRelativePath";
+import sameLevelRelativePath from "./sameLevelRelativePath";
+import thirdParty from "third-party";
+import oneLevelRelativePath from "../oneLevelRelativePath";
+import otherthing from "@core/otherthing";
+import abc from "@core/abc";
+import twoLevelRelativePath from "../../twoLevelRelativePath";
+import component from "@ui/hello";
+import fourLevelRelativePath from "../../../../fourLevelRelativePath";
+import something from "@server/something";
+import xyz from "@ui/xyz";
+import { defineComponent } from 'vue';
+
+function add(a,b) {
+  return a + b;
+}
+
+export default defineComponent({
+
+})
+</script>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<script>
+// I am top level comment in this file.
+import thirdParty from "third-party";
+import { defineComponent } from "vue";
+import z from "z";
+
+import abc from "@core/abc";
+import otherthing from "@core/otherthing";
+
+import something from "@server/something";
+
+import component from "@ui/hello";
+import xyz from "@ui/xyz";
+
+import fourLevelRelativePath from "../../../../fourLevelRelativePath";
+import threeLevelRelativePath from "../../../threeLevelRelativePath";
+import twoLevelRelativePath from "../../twoLevelRelativePath";
+import oneLevelRelativePath from "../oneLevelRelativePath";
+import sameLevelRelativePath from "./sameLevelRelativePath";
+
+function add(a, b) {
+    return a + b;
+}
+
+export default defineComponent({});
+</script>
+
+`;
+
+exports[`ts.vue - vue-verify: ts.vue 1`] = `
+<script lang="ts">
+// I am top level comment in this file.
+import z from 'z';
+import threeLevelRelativePath from "../../../threeLevelRelativePath";
+import sameLevelRelativePath from "./sameLevelRelativePath";
+import thirdParty from "third-party";
+import oneLevelRelativePath from "../oneLevelRelativePath";
+import otherthing from "@core/otherthing";
+import abc from "@core/abc";
+import twoLevelRelativePath from "../../twoLevelRelativePath";
+import component from "@ui/hello";
+import fourLevelRelativePath from "../../../../fourLevelRelativePath";
+import something from "@server/something";
+import xyz from "@ui/xyz";
+import { defineComponent } from 'vue';
+
+function add(a,b) {
+  return a + b;
+}
+
+export default defineComponent({
+
+})
+</script>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<script lang="ts">
+// I am top level comment in this file.
+import thirdParty from "third-party";
+import { defineComponent } from "vue";
+import z from "z";
+
+import abc from "@core/abc";
+import otherthing from "@core/otherthing";
+
+import something from "@server/something";
+
+import component from "@ui/hello";
+import xyz from "@ui/xyz";
+
+import fourLevelRelativePath from "../../../../fourLevelRelativePath";
+import threeLevelRelativePath from "../../../threeLevelRelativePath";
+import twoLevelRelativePath from "../../twoLevelRelativePath";
+import oneLevelRelativePath from "../oneLevelRelativePath";
+import sameLevelRelativePath from "./sameLevelRelativePath";
+
+function add(a, b) {
+    return a + b;
+}
+
+export default defineComponent({});
+</script>
+
+`;
+
+exports[`tsx.vue - vue-verify: tsx.vue 1`] = `
+<script lang="tsx">
+// I am top level comment in this file.
+import z from 'z';
+import threeLevelRelativePath from "../../../threeLevelRelativePath";
+import sameLevelRelativePath from "./sameLevelRelativePath";
+import thirdParty from "third-party";
+import oneLevelRelativePath from "../oneLevelRelativePath";
+import otherthing from "@core/otherthing";
+import abc from "@core/abc";
+import twoLevelRelativePath from "../../twoLevelRelativePath";
+import component from "@ui/hello";
+import fourLevelRelativePath from "../../../../fourLevelRelativePath";
+import something from "@server/something";
+import xyz from "@ui/xyz";
+import { defineComponent } from 'vue';
+
+function add(a,b) {
+  return a + b;
+}
+
+export default defineComponent({
+  render() {
+    return <div />
+  }
+})
+</script>
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+<script lang="tsx">
+// I am top level comment in this file.
+import thirdParty from "third-party";
+import { defineComponent } from "vue";
+import z from "z";
+
+import abc from "@core/abc";
+import otherthing from "@core/otherthing";
+
+import something from "@server/something";
+
+import component from "@ui/hello";
+import xyz from "@ui/xyz";
+
+import fourLevelRelativePath from "../../../../fourLevelRelativePath";
+import threeLevelRelativePath from "../../../threeLevelRelativePath";
+import twoLevelRelativePath from "../../twoLevelRelativePath";
+import oneLevelRelativePath from "../oneLevelRelativePath";
+import sameLevelRelativePath from "./sameLevelRelativePath";
+
+function add(a, b) {
+    return a + b;
+}
+
+export default defineComponent({
+    render() {
+        return <div />;
+    },
+});
+</script>
+
+`;

tests/Vue/ppsi.spec.js

@@ -0,0 +1,4 @@
+run_spec(__dirname, ["vue"], {
+    importOrder: ['^@core/(.*)$', '^@server/(.*)', '^@ui/(.*)$', '^[./]'],
+    importOrderSeparation: true,
+});

tests/Vue/setup.vue

@@ -0,0 +1,24 @@
+<script setup>
+// I am top level comment in this file.
+import z from 'z';
+import threeLevelRelativePath from "../../../threeLevelRelativePath";
+import sameLevelRelativePath from "./sameLevelRelativePath";
+import thirdParty from "third-party";
+import oneLevelRelativePath from "../oneLevelRelativePath";
+import otherthing from "@core/otherthing";
+import abc from "@core/abc";
+import twoLevelRelativePath from "../../twoLevelRelativePath";
+import component from "@ui/hello";
+import fourLevelRelativePath from "../../../../fourLevelRelativePath";
+import something from "@server/something";
+import xyz from "@ui/xyz";
+import { defineComponent } from 'vue'
+
+function add(a,b) {
+  return a + b;
+}
+</script>
+
+<template>
+  <div></div>
+</template>

tests/Vue/sfc.vue

@@ -0,0 +1,24 @@
+<script>
+// I am top level comment in this file.
+import z from 'z';
+import threeLevelRelativePath from "../../../threeLevelRelativePath";
+import sameLevelRelativePath from "./sameLevelRelativePath";
+import thirdParty from "third-party";
+import oneLevelRelativePath from "../oneLevelRelativePath";
+import otherthing from "@core/otherthing";
+import abc from "@core/abc";
+import twoLevelRelativePath from "../../twoLevelRelativePath";
+import component from "@ui/hello";
+import fourLevelRelativePath from "../../../../fourLevelRelativePath";
+import something from "@server/something";
+import xyz from "@ui/xyz";
+import { defineComponent } from 'vue';
+
+function add(a,b) {
+  return a + b;
+}
+
+export default defineComponent({
+
+})
+</script>