hyf0/vue-jsx-best-practices

Que fait vue-jsx-best-practices ?

Bonnes pratiques pour la syntaxe JSX dans Vue (ex. : class vs className, configuration du plugin JSX).

Introduction

Ce guide couvre les bonnes pratiques pour utiliser JSX dans les projets Vue.js. Il aborde les différences syntaxiques avec le JSX de React, la configuration requise et les recommandations pour écrire du code maintenable.

Différences clés

• Attribut class : Dans Vue JSX, utilisez class (et non className comme dans React). Exemple : <div class={dynamicClass}>...</div>.
• Attribut style : Accepte un objet ou une chaîne de caractères. Exemple : <div style={{ color: 'red', fontSize: '14px' }}>.
• Événements : Utilisez la syntaxe on suivi du nom d'événement en camelCase. Exemple : <button onClick={handleClick}>Cliquez</button>.
• Directives : Les directives telles que v-if, v-for, v-model peuvent être utilisées avec JSX via des approches spécifiques (voir ci-dessous).

Configuration

Avec Vite (recommandé)

Installez et configurez le plugin Vite officiel :

npm install @vitejs/plugin-vue-jsx -D

Ajoutez-le dans votre fichier vite.config.js :

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'

export default defineConfig({
  plugins: [vue(), vueJsx()],
})

Avec Babel (alternative)

Si vous utilisez Babel, installez le plugin officiel :

npm install @vue/babel-plugin-jsx -D

Configurez-le dans babel.config.js :

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: ['@vue/babel-plugin-jsx'],
}

Utilisation de base

Composant simple

import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    return () => <div class="container">Bonjour Vue JSX</div>
  },
})

Avec des événements

const App = defineComponent({
  setup() {
    const count = ref(0)
    const increment = () => count.value++
    return () => (
      <button onClick={increment}>Compteur : {count.value}</button>
    )
  },
})

v-model

Utilisez v-model comme attribut :

<input v-model={inputValue} />

v-if / v-for

Utilisez des expressions JavaScript directement :

const condition = true
const items = [1, 2, 3]

return (
  <div>
    {condition && <span>Condition vraie</span>}
    {items.map(item => <p key={item}>Élément {item}</p>)}
  </div>
)

Bonnes pratiques

1. Toujours utiliser class : Évitez className car cela peut causer des confusions et n'est pas supporté nativement par Vue JSX.
2. Événements en camelCase : Utilisez onClick, onChange, etc., pour rester cohérent avec le JSX standard.
3. Fragments : Si vous devez retourner plusieurs éléments racines, utilisez des fragments vides <>...</> ou <Fragment>...</Fragment>.
4. Clés dans les listes : Toujours définir une key unique lors de l'utilisation de map() pour aider Vue à optimiser le rendu.
5. Props dynamiques : Utilisez la syntaxe {...props} pour passer plusieurs attributs dynamiquement.

Ressources supplémentaires

• Documentation officielle Vue JSX
• Plugin Vite Vue JSX

Licence

Ce contenu est fourni à titre éducatif. Veuillez consulter les licences respectives des outils mentionnés.