Fin config es-lint.

@@ -26,9 +26,15 @@ defineProps({
         :alt="movie.title"
         :src="`https://image.tmdb.org/t/p/w500${movie.poster_path}`"
         class="absolute inset-0 w-full h-full object-cover"
-      />
-      <div v-else class="absolute inset-0 w-full h-full bg-gray-700 flex items-center justify-center">
-        <FilmIcon :size="48" class="text-gray-500" />
+      >
+      <div
+        v-else
+        class="absolute inset-0 w-full h-full bg-gray-700 flex items-center justify-center"
+      >
+        <FilmIcon
+          :size="48"
+          class="text-gray-500"
+        />
       </div>
       <div
         class="absolute top-2 right-2 bg-primary text-white rounded-full w-10 h-10 flex items-center justify-center font-bold"

@@ -35,27 +35,49 @@ watch(
 <template>
   <section>
     <!-- Liste des commentaires -->
-    <section v-if="comments.length > 0" class="mt-10">
+    <section
+      v-if="comments.length > 0"
+      class="mt-10"
+    >
       <h2>Commentaires publiés</h2>
-      <div v-for="(comment, index) in comments" :key="index" class="bg-gray-800 rounded-lg p-6 mb-4">
+      <div
+        v-for="(comment, index) in comments"
+        :key="index"
+        class="bg-gray-800 rounded-lg p-6 mb-4"
+      >
         <div class="flex justify-between items-start mb-2">
           <section>
-            <h4 class="font-bold text-lg">Par {{ comment.username }}</h4>
-            <p class="text-sm text-gray-400">Le {{ useDateFormat(comment.createdAt, "DD-MM-YYYY") }}</p>
+            <h4 class="font-bold text-lg">
+              Par {{ comment.username }}
+            </h4>
+            <p class="text-sm text-gray-400">
+              Le {{ useDateFormat(comment.createdAt, "DD-MM-YYYY") }}
+            </p>
           </section>
           <section class="bg-primary text-white rounded-full w-10 h-10 flex items-center justify-center font-bold">
             {{ comment.rating }}
           </section>
         </div>
-        <p :id="`message${index}`" class="text-gray-300">
+        <p
+          :id="`message${index}`"
+          class="text-gray-300"
+        >
           {{ comment.message }}
         </p>
       </div>
     </section>
     <!-- Si aucun commentaire -->
-    <section v-else class="text-center py-8 bg-gray-800 rounded-lg mt-10">
-      <MessageSquareIcon :size="48" class="mx-auto mb-3 text-gray-600" />
-      <p class="text-gray-400">Aucun commentaire pour le moment. Soyez le premier à donner votre avis !</p>
+    <section
+      v-else
+      class="text-center py-8 bg-gray-800 rounded-lg mt-10"
+    >
+      <MessageSquareIcon
+        :size="48"
+        class="mx-auto mb-3 text-gray-600"
+      />
+      <p class="text-gray-400">
+        Aucun commentaire pour le moment. Soyez le premier à donner votre avis !
+      </p>
     </section>
   </section>
 </template>

@@ -151,7 +151,9 @@ onBeforeUnmount(() => {
 
 <template>
   <section>
-    <h1 class="text-4xl font-bold mb-8 text-center">Découvrez les films populaires</h1>
+    <h1 class="text-4xl font-bold mb-8 text-center">
+      Découvrez les films populaires
+    </h1>
     <!-- Barre de recherche -->
     <ui-components-search-bar
       placeholder="Rechercher un film..."
@@ -167,24 +169,46 @@ onBeforeUnmount(() => {
     />
 
     <!-- Liste des films -->
-    <div v-else-if="movies.length > 0" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-      <div v-for="movie in movies" :key="movie.id">
+    <div
+      v-else-if="movies.length > 0"
+      class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"
+    >
+      <div
+        v-for="movie in movies"
+        :key="movie.id"
+      >
         <movie-card :movie="movie" />
       </div>
     </div>
 
     <!-- Message si aucun film trouvé -->
-    <section v-else-if="searchQuery && !movies.length" class="text-center py-12">
-      <SearchXIcon :size="64" class="mx-auto mb-4 text-gray-600" />
-      <h3 class="text-xl font-bold mb-2">Aucun film trouvé</h3>
-      <p class="text-gray-400">Essayez avec un autre terme de recherche</p>
+    <section
+      v-else-if="searchQuery && !movies.length"
+      class="text-center py-12"
+    >
+      <SearchXIcon
+        :size="64"
+        class="mx-auto mb-4 text-gray-600"
+      />
+      <h3 class="text-xl font-bold mb-2">
+        Aucun film trouvé
+      </h3>
+      <p class="text-gray-400">
+        Essayez avec un autre terme de recherche
+      </p>
     </section>
 
     <!-- Loader pour le chargement de plus de films -->
-    <ui-components-loader :is-initial-loading="isInitialLoading" :is-loading="isLoadingMore" />
+    <ui-components-loader
+      :is-initial-loading="isInitialLoading"
+      :is-loading="isLoadingMore"
+    />
 
     <!-- Élément observé pour le défilement infini -->
-    <div ref="loadMoreTrigger" class="h-10 mt-4" />
+    <div
+      ref="loadMoreTrigger"
+      class="h-10 mt-4"
+    />
   </section>
 </template>
 

@@ -17,7 +17,11 @@ defineProps({
 <template>
   <section class="mb-6">
     <div class="flex flex-wrap gap-2">
-      <span v-for="genre in genres" :key="genre.id" class="px-3 py-1 bg-gray-800 rounded-full text-sm">
+      <span
+        v-for="genre in genres"
+        :key="genre.id"
+        class="px-3 py-1 bg-gray-800 rounded-full text-sm"
+      >
         {{ genre.name }}
       </span>
     </div>

@@ -34,7 +34,9 @@ const formatVoteCount = (count: number) => {
       {{ score.toFixed(1) }}
     </section>
     <section>
-      <p class="font-semibold">Note TMDB</p>
+      <p class="font-semibold">
+        Note TMDB
+      </p>
       <div class="text-sm text-gray-400">
         {{ formatVoteCount(nbVote) }}
       </div>

@@ -123,13 +123,22 @@ function handleMessageEvent(event: string) {
           }
         "
       >
-        <span v-if="isSubmitting" class="flex items-center justify-center">
+        <span
+          v-if="isSubmitting"
+          class="flex items-center justify-center"
+        >
           <span class="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin mr-2" />
           Envoi en cours...
         </span>
         <span v-else>Publier le commentaire</span>
       </v-btn>
-      <v-btn class="mt-6 mr-4" color="primary" @click="clear"> effacer </v-btn>
+      <v-btn
+        class="mt-6 mr-4"
+        color="primary"
+        @click="clear"
+      >
+        effacer
+      </v-btn>
     </VForm>
   </section>
 </template>

@@ -17,7 +17,10 @@ defineProps({
 </script>
 
 <template>
-  <section v-if="isLoading && !isInitialLoading" class="flex justify-center mt-8">
+  <section
+    v-if="isLoading && !isInitialLoading"
+    class="flex justify-center mt-8"
+  >
     <div class="w-10 h-10 border-4 border-primary border-t-transparent rounded-full animate-spin" />
   </section>
 </template>

@@ -20,9 +20,20 @@ defineProps({
 <template>
   <section class="w-full md:w-1/3 lg:w-1/4">
     <div class="rounded-lg overflow-hidden shadow-lg bg-gray-800">
-      <v-img v-if="src" :alt="title" :src="`https://image.tmdb.org/t/p/w500${src}`" class="w-full h-auto" />
-      <div v-else class="aspect-[2/3] bg-gray-700 flex items-center justify-center">
-        <FilmIcon :size="64" class="text-gray-500" />
+      <v-img
+        v-if="src"
+        :alt="title"
+        :src="`https://image.tmdb.org/t/p/w500${src}`"
+        class="w-full h-auto"
+      />
+      <div
+        v-else
+        class="aspect-[2/3] bg-gray-700 flex items-center justify-center"
+      >
+        <FilmIcon
+          :size="64"
+          class="text-gray-500"
+        />
       </div>
     </div>
   </section>

@@ -49,7 +49,7 @@ function handleClearSearchEvent() {
         class="w-full px-4 py-3 bg-gray-800 rounded-full text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary"
         type="text"
         @input="handleSearchEvent"
-      />
+      >
       <button
         v-if="searchQuery"
         class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-white"
@@ -57,7 +57,10 @@ function handleClearSearchEvent() {
       >
         <XIcon :size="20" />
       </button>
-      <button v-else class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400">
+      <button
+        v-else
+        class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"
+      >
         <SearchIcon :size="20" />
       </button>
     </div>

@@ -18,8 +18,15 @@ defineProps({
 
 <template>
   <!-- Skeleton loader pendant le chargement initial -->
-  <section v-if="isInitialLoading" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
-    <div v-for="i in skeletonNumber" :key="i" class="bg-gray-800 rounded-lg overflow-hidden shadow-lg animate-pulse">
+  <section
+    v-if="isInitialLoading"
+    class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"
+  >
+    <div
+      v-for="i in skeletonNumber"
+      :key="i"
+      class="bg-gray-800 rounded-lg overflow-hidden shadow-lg animate-pulse"
+    >
       <div class="h-80 bg-gray-700" />
       <div class="p-4">
         <div class="h-6 bg-gray-700 rounded mb-3" />

@@ -79,9 +79,16 @@ watch(
 
 <template>
   <div>
-    <editor v-model="content" :api-key="runtimeConfig.public.apiTinyMceSecret" :init="init" />
+    <editor
+      v-model="content"
+      :api-key="runtimeConfig.public.apiTinyMceSecret"
+      :init="init"
+    />
   </div>
-  <div v-if="errorMessage" class="text-red-500 text-sm mt-1">
+  <div
+    v-if="errorMessage"
+    class="text-red-500 text-sm mt-1"
+  >
     {{ errorMessage }}
   </div>
 </template>

@@ -3,7 +3,10 @@
 <template>
   <v-container class="bg-gray-900">
     <v-row class="bg-gray-900">
-      <v-col cols="12" sm="4">
+      <v-col
+        cols="12"
+        sm="4"
+      >
         <v-skeleton-loader
           class="mx-auto border bg-gray-800"
           color="#1f2937"
@@ -12,7 +15,10 @@
           type="paragraph, image"
         />
       </v-col>
-      <v-col cols="12" sm="8">
+      <v-col
+        cols="12"
+        sm="8"
+      >
         <v-skeleton-loader
           class="mx-auto mt-10"
           color="#1f2937"

@@ -12,7 +12,8 @@
     "lint:js": "eslint --ext \".ts,.vue\" . --fix",
     "lint:prettier": "prettier --write \"{components,pages,plugins,middleware,layouts,composables,assets}/**/*.{js,jsx,ts,tsx,vue,html,css,scss,json,md}\" .",
     "lint": "npm run lint:js && npm run lint:prettier",
-    "format": "prettier --write \"{components,pages,plugins,middleware,layouts,composables,assets}/**/*.{js,jsx,ts,tsx,vue,html,css,scss,json,md}\"",
+    "format": "prettier --write \"{components,pages,plugins,middleware,layouts,composables,assets}/**/*.{js,jsx,ts,tsx,vue,html,css,scss,json,md}\" --list-different .",
+    "lintfix": "npm run format && npm run lint:js",
     "test": "vitest"
   },
   "dependencies": {

@@ -153,9 +153,16 @@ onMounted(() => {
     <ui-components-skeleton-movie-detail-loader v-if="isLoading" />
 
     <!-- Contenu du film -->
-    <div v-else-if="movie" class="relative">
+    <div
+      v-else-if="movie"
+      class="relative"
+    >
       <!-- Backdrop image -->
-      <ui-components-backdrop-image v-if="movie.backdrop_path" :src="movie.backdrop_path" :title="movie.title" />
+      <ui-components-backdrop-image
+        v-if="movie.backdrop_path"
+        :src="movie.backdrop_path"
+        :title="movie.title"
+      />
 
       <!-- Contenu principal -->
       <div class="container mx-auto px-4 py-8 relative z-10 pt-20">
@@ -163,41 +170,64 @@ onMounted(() => {
           class="flex items-center text-gray-400 hover:text-white mb-8 transition-colors"
           @click="navigateTo('/')"
         >
-          <ArrowLeftIcon :size="20" class="mr-2" />
+          <ArrowLeftIcon
+            :size="20"
+            class="mr-2"
+          />
           Retour
         </button>
 
         <div class="flex flex-col md:flex-row gap-8">
           <!-- Poster -->
-          <ui-components-poster v-if="movie.poster_path" :src="movie.poster_path" :title="movie.title" />
+          <ui-components-poster
+            v-if="movie.poster_path"
+            :src="movie.poster_path"
+            :title="movie.title"
+          />
 
           <!-- Informations du film -->
           <section class="w-full md:w-2/3 lg:w-3/4">
             <h1 class="text-3xl md:text-4xl font-bold mb-2">
               {{ movie.title }}
             </h1>
-            <p v-if="movie.release_date" class="text-gray-400 mb-4">
+            <p
+              v-if="movie.release_date"
+              class="text-gray-400 mb-4"
+            >
               {{ useDateFormat(movie.release_date, "DD-MM-YYYY") }} • {{ formatRuntime(movie.runtime) }}
             </p>
 
             <!-- Note et votes -->
-            <details-score-and-vote :nb-vote="movie.vote_count" :score="movie.vote_average" />
+            <details-score-and-vote
+              :nb-vote="movie.vote_count"
+              :score="movie.vote_average"
+            />
 
             <!-- Genres -->
             <details-movie-gender :genres="movie.genres" />
 
             <!-- Synopsis -->
             <div class="mb-6">
-              <h2 class="text-xl font-bold mb-2">Synopsis</h2>
+              <h2 class="text-xl font-bold mb-2">
+                Synopsis
+              </h2>
               <p class="text-gray-300">
                 {{ movie.overview || "Aucun synopsis disponible." }}
               </p>
             </div>
 
             <!-- Réalisateur et têtes d'affiche -->
-            <div v-if="movie.credit" class="mb-6">
-              <h2 class="text-xl font-bold mb-2">Équipe</h2>
-              <div v-if="director" class="mb-2">
+            <div
+              v-if="movie.credit"
+              class="mb-6"
+            >
+              <h2 class="text-xl font-bold mb-2">
+                Équipe
+              </h2>
+              <div
+                v-if="director"
+                class="mb-2"
+              >
                 <span class="font-semibold">Réalisateur:</span> {{ director.name }}
               </div>
               <div v-if="movie.credit.cast.length > 0">
@@ -212,7 +242,9 @@ onMounted(() => {
               </div>
             </div>
             <!--  Comments form.  -->
-            <h3 class="text-xl font-bold mt-8 mb-4">Ajouter un commentaire</h3>
+            <h3 class="text-xl font-bold mt-8 mb-4">
+              Ajouter un commentaire
+            </h3>
             <form-movie-comment-form @event:submit="handleSubmitEvent" />
 
             <!-- Liste des commentaires -->
@@ -223,10 +255,20 @@ onMounted(() => {
     </div>
 
     <!-- Erreur -->
-    <section v-else class="container mx-auto px-4 py-16 text-center">
-      <AlertTriangleIcon :size="64" class="mx-auto mb-4 text-red-500" />
-      <h2 class="text-2xl font-bold mb-2">Film non trouvé</h2>
-      <p class="text-gray-400 mb-6">Nous n'avons pas pu trouver le film que vous cherchez.</p>
+    <section
+      v-else
+      class="container mx-auto px-4 py-16 text-center"
+    >
+      <AlertTriangleIcon
+        :size="64"
+        class="mx-auto mb-4 text-red-500"
+      />
+      <h2 class="text-2xl font-bold mb-2">
+        Film non trouvé
+      </h2>
+      <p class="text-gray-400 mb-6">
+        Nous n'avons pas pu trouver le film que vous cherchez.
+      </p>
       <button
         class="px-6 py-2 bg-primary text-white font-bold rounded-md hover:bg-primary-dark transition-colors"
         @click="navigateTo('/')"