Amélioration config es-lint + fix.

@@ -37,8 +37,12 @@ defineProps({
       </div>
       </div>
     </div>
     </div>
     <div class="p-4">
     <div class="p-4">
-      <h2 class="text-lg font-bold mb-1 line-clamp-1">{{ movie.title }}</h2>
-      <p class="text-sm text-gray-400">{{ useDateFormat(movie.release_date, "DD-MM-YYYY") }}</p>
+      <h2 class="text-lg font-bold mb-1 line-clamp-1">
+        {{ movie.title }}
+      </h2>
+      <p class="text-sm text-gray-400">
+        {{ useDateFormat(movie.release_date, "DD-MM-YYYY") }}
+      </p>
     </div>
     </div>
   </section>
   </section>
 </template>
 </template>

@@ -47,7 +47,9 @@ watch(
             {{ comment.rating }}
             {{ comment.rating }}
           </section>
           </section>
         </div>
         </div>
-        <p :id="`message${index}`" class="text-gray-300">{{ comment.message }}</p>
+        <p :id="`message${index}`" class="text-gray-300">
+          {{ comment.message }}
+        </p>
       </div>
       </div>
     </section>
     </section>
     <!-- Si aucun commentaire -->
     <!-- Si aucun commentaire -->

 <script lang="ts" setup>
 <script lang="ts" setup>
 //#region --Props--.
 //#region --Props--.
-const props = defineProps({
+defineProps({
   score: {
   score: {
     type: Number,
     type: Number,
     required: true,
     required: true,
@@ -35,7 +35,9 @@ const formatVoteCount = (count: number) => {
     </section>
     </section>
     <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>
+      <div class="text-sm text-gray-400">
+        {{ formatVoteCount(nbVote) }}
+      </div>
     </section>
     </section>
   </section>
   </section>
 </template>
 </template>

@@ -56,9 +56,9 @@ const formData = reactive({
 const v$ = useVuelidate(rules, formData);
 const v$ = useVuelidate(rules, formData);
 //#endregion
 //#endregion
 
 
-const errormessages = computed(() => {
-  return v$.value.message.$errors.map((e) => e.$message);
-});
+// const errormessages = computed(() => {
+//   return v$.value.message.$errors.map((e) => e.$message);
+// });
 
 
 //#region --Function--.
 //#region --Function--.
 async function submitComment() {
 async function submitComment() {
@@ -129,7 +129,7 @@ function handleMessageEvent(event: string) {
         </span>
         </span>
         <span v-else>Publier le commentaire</span>
         <span v-else>Publier le commentaire</span>
       </v-btn>
       </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>
     </VForm>
   </section>
   </section>
 </template>
 </template>

 // @ts-check
 // @ts-check
 import withNuxt from "./.nuxt/eslint.config.mjs";
 import withNuxt from "./.nuxt/eslint.config.mjs";
+import js from "@eslint/js";
+import eslintPluginVue from "eslint-plugin-vue";
+import ts from "typescript-eslint";
 
 
-export default withNuxt();
-// Your custom configs here
+export default withNuxt(
+  // Your custom configs here
+  js.configs.recommended,
+  ...ts.configs.recommended,
+  ...eslintPluginVue.configs["flat/recommended"],
+  {
+    files: ["*.vue", "**/*.vue"],
+    languageOptions: {
+      parserOptions: {
+        parser: "@typescript-eslint/parser",
+      },
+    },
+    rules: {
+      "vue/multi-word-component-names": "off",
+    },
+  },
+  // your custom flat configs go here, for example:
+  // {
+  //   files: ['**/*.ts', '**/*.tsx'],
+  //   rules: {
+  //     'no-console': 'off' // allow console.log in TypeScript files
+  //   }
+  // },
+  // {
+  //   ...
+  // }
+);

@@ -9,8 +9,8 @@ export interface CreditInterface {
 
 
 export type CreditsResponse = {
 export type CreditsResponse = {
   id: number;
   id: number;
-  cast: CreditInterface[],
-  crew: CreditInterface[],
+  cast: CreditInterface[];
+  crew: CreditInterface[];
   movie_id: unknown;
   movie_id: unknown;
   movie: MovieInterface;
   movie: MovieInterface;
-}
+};

-import type { CreditInterface, CreditsResponse } from "~/interfaces/credit";
+import type { CreditsResponse } from "~/interfaces/credit";
 
 
 export interface MovieInterface {
 export interface MovieInterface {
   id: number;
   id: number;
@@ -12,7 +12,7 @@ export interface MovieInterface {
   popularity: number;
   popularity: number;
   poster_path: string | null;
   poster_path: string | null;
   release_date: string;
   release_date: string;
-  runtime: number
+  runtime: number;
   title: string;
   title: string;
   video: boolean;
   video: boolean;
   vote_average: number;
   vote_average: number;
@@ -21,6 +21,6 @@ export interface MovieInterface {
 }
 }
 
 
 export type Genre = {
 export type Genre = {
-  id: number,
-  name: string,
-}
+  id: number;
+  name: string;
+};

@@ -22,10 +22,10 @@ export class MovieComment extends Model {
     return {
     return {
       // Attributs.
       // Attributs.
       id: this.uid(),
       id: this.uid(),
-      createdAt: this.string(''),
-      username: this.string(''),
-      message: this.string(''),
-      rating: this.string(''),
+      createdAt: this.string(""),
+      username: this.string(""),
+      message: this.string(""),
+      rating: this.string(""),
       // Relations.
       // Relations.
       movie_id: this.attr(null),
       movie_id: this.attr(null),
       movie: this.belongsTo(Movie, "movie_id", "id"),
       movie: this.belongsTo(Movie, "movie_id", "id"),

@@ -9,7 +9,7 @@
     "generate": "nuxt generate",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
     "postinstall": "nuxt prepare",
-    "lint:js": "eslint --ext \".ts,.vue\" .",
+    "lint:js": "eslint --ext \".ts,.vue\" . --fix",
     "lint:prettier": "prettier --write .",
     "lint:prettier": "prettier --write .",
     "lint": "npm run lint:js && npm run lint:prettier",
     "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}\"",

@@ -173,7 +173,9 @@ onMounted(() => {
 
 
           <!-- Informations du film -->
           <!-- Informations du film -->
           <section class="w-full md:w-2/3 lg:w-3/4">
           <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>
+            <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) }}
               {{ useDateFormat(movie.release_date, "DD-MM-YYYY") }} • {{ formatRuntime(movie.runtime) }}
             </p>
             </p>
@@ -187,7 +189,9 @@ onMounted(() => {
             <!-- Synopsis -->
             <!-- Synopsis -->
             <div class="mb-6">
             <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>
+              <p class="text-gray-300">
+                {{ movie.overview || "Aucun synopsis disponible." }}
+              </p>
             </div>
             </div>
 
 
             <!-- Réalisateur et têtes d'affiche -->
             <!-- Réalisateur et têtes d'affiche -->

 export type Comment = {
 export type Comment = {
-  username: string
-  message: string
-  rating: number
-}
+  username: string;
+  message: string;
+  rating: number;
+};

 // vite.config.js
 // vite.config.js
-import vue from '@vitejs/plugin-vue'
+import vue from "@vitejs/plugin-vue";
 
 
 export default {
 export default {
   plugins: [vue()],
   plugins: [vue()],
@@ -8,4 +8,4 @@ export default {
     environment: "happy-dom",
     environment: "happy-dom",
     // Additional test configurations can be added here
     // Additional test configurations can be added here
   },
   },
-}
+};

-import { defineVitestConfig } from '@nuxt/test-utils/config'
-import vue from '@vitejs/plugin-vue'
-import { fileURLToPath } from 'node:url'
+import { defineVitestConfig } from "@nuxt/test-utils/config";
+import { fileURLToPath } from "node:url";
 
 
 export default defineVitestConfig({
 export default defineVitestConfig({
   /**
   /**
@@ -8,31 +7,31 @@ export default defineVitestConfig({
    * any custom Vitest config you require
    * any custom Vitest config you require
    */
    */
   test: {
   test: {
-    environment: 'nuxt',
+    environment: "nuxt",
     globals: true,
     globals: true,
     // you can optionally set Nuxt-specific environment options
     // you can optionally set Nuxt-specific environment options
     environmentOptions: {
     environmentOptions: {
       nuxt: {
       nuxt: {
-        rootDir: fileURLToPath(new URL('./', import.meta.url)),
-        domEnvironment: 'happy-dom', // 'happy-dom' (default) or 'jsdom'
+        rootDir: fileURLToPath(new URL("./", import.meta.url)),
+        domEnvironment: "happy-dom", // 'happy-dom' (default) or 'jsdom'
         overrides: {
         overrides: {
           // other Nuxt config you want to pass
           // other Nuxt config you want to pass
         },
         },
         mock: {
         mock: {
           intersectionObserver: true,
           intersectionObserver: true,
           indexedDb: true,
           indexedDb: true,
-        }
+        },
       },
       },
     },
     },
     coverage: {
     coverage: {
-      provider: 'v8',
-      reporter: ['text', 'json', 'html'],
-    }
+      provider: "v8",
+      reporter: ["text", "json", "html"],
+    },
   },
   },
   resolve: {
   resolve: {
     alias: {
     alias: {
-      '~': fileURLToPath(new URL('./', import.meta.url)),
-      '@': fileURLToPath(new URL('./', import.meta.url)),
-    }
-  }
-})
+      "~": fileURLToPath(new URL("./", import.meta.url)),
+      "@": fileURLToPath(new URL("./", import.meta.url)),
+    },
+  },
+});