Insert defineOptions after import declarations in vue/prefer-define-options (#2275)

Author: ItMaga

lib/rules/prefer-define-options.js

@@ -34,9 +34,14 @@ module.exports = {
     let defineOptionsNode = null
     /** @type {ExportDefaultDeclaration | null} */
     let exportDefaultDeclaration = null
+    /** @type {ImportDeclaration|null} */
+    let lastImportDeclaration = null
 
     return utils.compositingVisitors(
       utils.defineScriptSetupVisitor(context, {
+        ImportDeclaration(node) {
+          lastImportDeclaration = node
+        },
         onDefineOptionsEnter(node) {
           defineOptionsNode = node
         }
@@ -109,10 +114,13 @@ module.exports = {
                 })
         }
 
+        /** @type {VStartTag | ImportDeclaration} */
+        const insertAfterTag = lastImportDeclaration || scriptSetup.startTag
+
         return [
           fixer.removeRange(removeRange),
           fixer.insertTextAfter(
-            scriptSetup.startTag,
+            insertAfterTag,
             `\ndefineOptions(${sourceCode.getText(node.declaration)})\n`
           )
         ]

tests/lib/rules/prefer-define-options.js

@@ -104,6 +104,32 @@ defineOptions({ name: 'Foo' })
           line: 4
         }
       ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup>
+      import { ref } from 'vue'
+      const props = defineProps(['foo'])
+      </script>
+      <script>
+      export default { name: 'Foo' }
+      </script>
+      `,
+      output: `
+      <script setup>
+      import { ref } from 'vue'
+defineOptions({ name: 'Foo' })
+
+      const props = defineProps(['foo'])
+      </script>
+      `,
+      errors: [
+        {
+          message: 'Use `defineOptions` instead of default export.',
+          line: 7
+        }
+      ]
     }
   ]
 })