https://github.com/d2a8k3u/eslint-plugin-vue-setup-order
ESLint plugin to enforce consistent order of statements in Vue 3 <script setup>
https://github.com/d2a8k3u/eslint-plugin-vue-setup-order
code-style eslint eslint-plugin formating order script-setup vue vue3
Last synced: 24 days ago
JSON representation
ESLint plugin to enforce consistent order of statements in Vue 3 <script setup>
- Host: GitHub
- URL: https://github.com/d2a8k3u/eslint-plugin-vue-setup-order
- Owner: d2a8k3u
- License: mit
- Created: 2025-12-20T07:20:11.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-12-22T06:19:40.000Z (5 months ago)
- Last Synced: 2025-12-22T15:30:42.162Z (5 months ago)
- Topics: code-style, eslint, eslint-plugin, formating, order, script-setup, vue, vue3
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/eslint-plugin-vue-setup-order
- Size: 66.4 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# eslint-plugin-vue-setup-order
[](https://www.npmjs.com/package/eslint-plugin-vue-setup-order)
[](https://www.npmjs.com/package/eslint-plugin-vue-setup-order)
[](https://opensource.org/licenses/MIT)
ESLint plugin to enforce a consistent order of statements within the Vue 3 `` block.
## Installation
```bash
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+)
```javascript
// 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)
```javascript
// .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
```vue
<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);
```
### Correct
```vue
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++;
}
```
## Options
### groupBlankLines
Ensures blank lines are present between different categories. Defaults to `true`.
```javascript
{
'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**
```javascript
{
'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:
```bash
npx eslint --fix "src/**/*.vue"
```
## License
MIT