ESLint

An ESLint plugin for vue-jsx that provides automatic code formatting for directives and macros.

Installation

pnpm add @vue-jsx/eslint

Configuration

// eslint.config.ts
import vueJsx from '@vue-jsx/eslint'

export default [vueJsx()]

Rules

define-style

Formats styles within the defineStyle macro using Prettier.

import  from '@vue-jsx/eslint'

export default [
  ({
    : {
      'vue-jsx/define-style': [1, { : 2 }],
    },
  }),
]

jsx-sort-props

A modified version of @stylistic/jsx/jsx-sort-props with support for custom reservedFirst and reservedLast options.

import  from '@vue-jsx/eslint'

export default [
  ({
    : {
      'vue-jsx/jsx-sort-props': [
        2,
        {
          : ['v-if', 'v-for'],
          : ['v-slot'],
        },
      ],
    },
  }),
]

reservedFirst

Default: ['v-if', 'v-else-if', 'v-else', 'v-for', 'key', 'ref', 'v-model']

When provided as an array, these values override the default list of reserved props. Props listed here will appear first, respecting the specified order:

// Before
const Before = <App a v-for={i in list} v-if={list} b />

// After
const After = <App v-if={list} v-for={i in list} a b />

reservedLast

Default: ['v-slot', 'v-slots', 'v-text', 'v-html']

When provided as an array, these props will be placed after all other props, respecting the specified order:

// Before
const Before = <App v-slot={{ foo }} onClick={onClick} />

// After
const After = <App onClick={onClick} v-slot={{ foo }} />