✨ vue-script-setup-reorder

A CLI codemod to automatically reorder Vue 3 <script setup> blocks
Built to enforce team structure, reduce review noise, and stay editor‑agnostic.

🚀 Why this exists

In many teams, Vue files grow organically and reviews often include comments like:

“Can you move computed above watches?”
“Please keep stores at the top.”

This tool eliminates those discussions by encoding the agreed structure into automation.

If the computer can enforce it, humans shouldn’t argue about it.

🧠 What it does

For Vue 3 components using:

<script setup lang="ts">

The tool:

1. Parses the script using AST
2. Reorders top‑level statements into a consistent order
3. Formats the result using Prettier
4. Leaves templates & styles untouched

📐 Default ordering

1. Imports
2. Store declarations (useXxx)
3. Refs
4. Computed properties
5. Watches
6. Functions
7. Async functions
8. Lifecycle hooks
9. Everything else (expose, misc)

📦 Installation

Option 1 — Run instantly (no install)

npx vue-script-setup-reorder src/App.vue

Option 2 — Install as a dev dependency (recommended)

yarn add -D vue-script-setup-reorder

Add a script:

{
  "scripts": {
    "format:vue": "vue-reorder src/**/*.vue"
  }
}

Run it:

yarn format:vue

🛠 Usage

Single file

vue-reorder src/App.vue

Multiple files (glob)

vue-reorder src/**/*.vue

With npx

npx vue-script-setup-reorder src/**/*.vue

✍️ Example

Before

<script setup lang="ts">
import { computed, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useGeneral } from '@/stores/general'

const direction = computed(() => ...)
const store = useGeneral()

watch(direction, ...)
const route = useRoute()
</script>

After

<script setup lang="ts">
import { computed, watch } from 'vue'
import { useRoute } from 'vue-router'
import { useGeneral } from '@/stores/general'

const store = useGeneral()
const route = useRoute()

const direction = computed(() => ...)

watch(direction, ...)
</script>

🧩 Editor integration (recommended)

This tool is editor‑agnostic.
Instead of plugins, simply call the CLI.

WebStorm

1. Preferences → Tools → External Tools
2. Program: vue-reorder
3. Arguments: $FilePath$
4. Working directory: $ProjectFileDir$

VS Code (Task)

{
  "label": "Reorder Vue script setup",
  "type": "shell",
  "command": "vue-reorder",
  "args": ["${file}"]
}

🔒 ESLint & Prettier compatibility

• ✅ Uses Prettier programmatically
• ❌ Does not run ESLint on your project
• ❌ Does not ship any ESLint config

Your project stays fully in control.

⚠️ Limitations

• Only <script setup> is supported
• Only top‑level statements are reordered
• No business‑logic refactoring
• No feature splitting

This is a structure tool, not an architecture tool.

🧪 Recommended workflow

yarn format:vue
git diff

Run before committing or during reviews.

🧾 License

MIT

❤️ Philosophy

Consistency beats preference.
Automation beats discussion.

Happy coding 🚀