eslint-plugin-vue-setup-order

eslint-plugin-vue-setup-order

ESLint plugin to enforce a consistent order of statements within the Vue 3 <script setup> block.

Installation

npm install -D eslint-plugin-vue-setup-order
# or
pnpm add -D eslint-plugin-vue-setup-order
# or
yarn add -D eslint-plugin-vue-setup-order

Configuration

ESLint Flat Config (ESLint 9+)

// eslint.config.js
import vueSetupOrder from 'eslint-plugin-vue-setup-order';

export default [
  vueSetupOrder.configs.flat.recommended,
  // Or manual configuration:
  {
    plugins: {
      'vue-setup-order': vueSetupOrder,
    },
    rules: {
      'vue-setup-order/order': 'error',
    },
  },
];

Legacy Config (.eslintrc)

// .eslintrc.js
module.exports = {
  plugins: ['vue-setup-order'],
  extends: ['plugin:vue-setup-order/recommended'],
  // Or manual configuration:
  rules: {
    'vue-setup-order/order': 'error',
  },
};

Default Order

The plugin enforces the following default sequence:

1. Imports: All import statements.
2. Type Declarations: TypeScript type, interface, and enum declarations.
3. Define Macros: defineProps, defineEmits, defineOptions, defineSlots, defineExpose, defineModel, and withDefaults.
4. Composables: Function calls following the useXxx pattern (e.g., useRouter, useStore).
5. Reactive State: Vue reactivity APIs such as ref, reactive, and shallowRef.
6. Computed Properties: computed declarations.
7. Watchers: watch and watchEffect calls.
8. Lifecycle Hooks: onMounted, onBeforeMount, and other lifecycle functions.
9. Functions: Regular function declarations and arrow functions.
10. Provide: provide calls.

Examples

Incorrect

<script setup>
  import { ref, computed } from 'vue';

  function increment() {
    // Error: function declared before reactive state
    count.value++;
  }

  const count = ref(0);

  onMounted(() => {}); // Error: lifecycle hook before computed property

  const doubled = computed(() => count.value * 2);
</script>

Correct

<script setup lang="ts">
  import { ref, computed, onMounted } from 'vue';
  import { useRouter } from 'vue-router';

  type Props = {
    title: string;
  };

  interface Emits {
    (e: 'update', value: string): void;
  }

  const props = defineProps<Props>();
  const emit = defineEmits<Emits>();

  const router = useRouter();

  const count = ref(0);

  const doubled = computed(() => count.value * 2);

  onMounted(() => {
    console.log('mounted');
  });

  function increment() {
    count.value++;
  }
</script>

Options

groupBlankLines

Ensures blank lines are present between different categories. Defaults to true.

{
  'vue-setup-order/order': ['error', {
    groupBlankLines: true,
  }]
}

order

Allows customization of the category sequence. Provide an array of category names to define your preferred order.

Available categories:

• import
• types (type, interface, enum)
• defineProps, defineEmits, defineOptions, defineSlots, defineExpose, defineModel, withDefaults
• composable (useXxx)
• ref, reactive, computed, watch, watchEffect
• onMounted, onBeforeMount, etc.
• function
• provide

Example: Custom order

{
  'vue-setup-order/order': ['error', {
    order: [
      'import',
      'types',
      'defineProps',
      'defineEmits',
      'composable',
      'ref',
      'reactive',
      'computed',
      'watch',
      'lifecycle',
      'function',
      'provide'
    ]
  }]
}

Auto-fix

This rule supports automatic fixing. Run ESLint with the --fix flag to resolve ordering issues:

npx eslint --fix "src/**/*.vue"

License

MIT