Que fait vue-jsx-best-practices ?
Syntaxe JSX dans Vue (par exemple, class vs className, configuration du plugin JSX).
Configuration
Pour utiliser JSX dans Vue 3, installez et configurez le plugin @vitejs/plugin-vue-jsx dans votre fichier vite.config.ts :
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
plugins: [vue(), vueJsx()],
})
Syntaxe JSX de base
Dans JSX avec Vue, utilisez class au lieu de className :
// Correct (Vue)
<div class="my-class">Contenu</div>
// Incorrect (React)
<div className="my-class">Contenu</div>
Directives Vue dans JSX
Utilisez v-show, v-if, v-for et autres directives comme attributs JSX :
<template>
<div v-if="condition">Condition vraie</div>
<ul>
<li v-for="item in items" :key="item.id">{ item.text }</li>
</ul>
</template>
Événements
Les événements sont liés avec on suivi du nom de l'événement en camelCase :
<button onClick={() => handleClick()}>Cliquez-moi</button>
Liaison d'attributs dynamiques
Utilisez des accolades simples pour lier des attributs dynamiques :
<img src={ imageUrl } alt="Image dynamique" />
Composants
Les composants s'utilisent comme en React :
import MonComposant from './MonComposant.vue'
<MonComposant prop="valeur" />