chore: migrate to eslint v9

Author: danielroe

.eslintignore

@@ -0,0 +1,3 @@
+{
+  "eslint.experimental.useFlatConfig": true
+}

.eslintrc

@@ -0,0 +1,14 @@
+// @ts-check
+import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
+
+export default createConfigForNuxt({
+  features: {
+    tooling: true,
+    stylistic: true,
+  },
+  dirs: {
+    src: [
+      './playground',
+    ],
+  },
+})

.vscode/settings.json

@@ -31,13 +31,13 @@
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {
-    "@nuxt/eslint-config": "^0.1.1",
+    "@nuxt/eslint-config": "^0.3.6",
     "@nuxt/module-builder": "^0.2.1",
     "@nuxt/schema": "^3.1.1",
     "@nuxt/test-utils": "^3.1.1",
     "changelogen": "^0.4.1",
-    "eslint": "^8.33.0",
+    "eslint": "^9.0.0",
     "nuxt": "^3.1.1",
     "vitest": "^0.28.3"
   }
-}
+}

eslint.config.js

@@ -46,10 +46,10 @@
             shadow-md
             focus:outline-none
           hover:bg-amber-700 hover:text-white"
-            @click="setLanguage(lang, 
-                                lang == 'fr' ? 
-                                  {actions: { continue_shopping: 'Revenir a votre magnifique magasin override runtime' }} : 
-                                  {}
+            @click="setLanguage(lang,
+                                lang == 'fr'
+                                  ? { actions: { continue_shopping: 'Revenir a votre magnifique magasin override runtime' } }
+                                  : {},
             )"
           >
             <RadioGroupDescription
@@ -62,7 +62,7 @@
       </RadioGroup>
       <div class="mt-4">
         <h1 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
-          {{ product.data.name }} 
+          {{ product.data.name }}
         </h1>
       </div>
       <section
@@ -136,14 +136,14 @@
 </template>
 
 <script setup lang="ts">
-import { useSnipcart } from '#imports';
-import { ref, watch } from "vue"
+import { ref, watch } from 'vue'
 import { StarIcon, ShoppingBagIcon, UserCircleIcon } from '@heroicons/vue/20/solid'
-import { RadioGroup, RadioGroupDescription,  RadioGroupOption,  } from '@headlessui/vue'
+import { RadioGroup, RadioGroupDescription, RadioGroupOption } from '@headlessui/vue'
+import { useSnipcart } from '#imports'
 
 const langs = [
-  "en",
-  "fr"
+  'en',
+  'fr',
 ]
 
 const selected = ref(langs[0])
@@ -161,25 +161,23 @@ const product = {
     price: 220,
     id: 1,
     description:
-      "Don't compromise on snack-carrying capacity with this lightweight and spacious bag. The drawstring top keeps all your favorite chips, crisps, fries, biscuits, crackers, and cookies secure.",
+      'Don\'t compromise on snack-carrying capacity with this lightweight and spacious bag. The drawstring top keeps all your favorite chips, crisps, fries, biscuits, crackers, and cookies secure.',
     src: 'https://images.unsplash.com/photo-1525966222134-fcfa99b8ae77?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=796&q=80',
     alt: 'Model wearing light green backpack with black canvas straps and front zipper pouch.',
-    reviews: { average: 4, totalCount: 7 }
+    reviews: { average: 4, totalCount: 7 },
   },
   customFields: [
     {
-        "name": "Color",
-        "options": "Black|Brown|Gold"
+      name: 'Color',
+      options: 'Black|Brown|Gold',
     },
-  ]
+  ],
 }
 
-
 const bindFullProduct = () => {
   return {
     ...bindProductItemCustom(product.customFields),
-    ...bindProductItem(product.data)
+    ...bindProductItem(product.data),
   }
 }
-
 </script>

package.json

@@ -1,22 +1,22 @@
 export default defineNuxtConfig({
   modules: ['../src/module'],
   snipcart: {
-    templatesUrl: "/snipcart-custom.html",
-    publicApiKey: "MTA3ODg5YmMtZTA3ZS00M2QxLWE1N2QtOGI3ZDM5OGNmMGRjNjM3Mjg0MTM0MzA2MjQ2OTg2",
-    language: "en",
-    modalStyle: "side",
+    templatesUrl: '/snipcart-custom.html',
+    publicApiKey: 'MTA3ODg5YmMtZTA3ZS00M2QxLWE1N2QtOGI3ZDM5OGNmMGRjNjM3Mjg0MTM0MzA2MjQ2OTg2',
+    language: 'en',
+    modalStyle: 'side',
     translations: {
       en: {
         actions: {
-          continue_shopping: "Go back to your awesome store"
-        }
+          continue_shopping: 'Go back to your awesome store',
+        },
       },
       fr: {
         actions: {
-          continue_shopping: "Revenir a votre magnifique magasin"
-        }
-      }
-    }
+          continue_shopping: 'Revenir a votre magnifique magasin',
+        },
+      },
+    },
   },
   postcss: {
     plugins: {
@@ -27,11 +27,11 @@ export default defineNuxtConfig({
   app: {
     head: {
       script: [
-        { src: "https://cdn.tailwindcss.com" }
-      ]
-    }
+        { src: 'https://cdn.tailwindcss.com' },
+      ],
+    },
   },
   css: [
-    "~/assets/index.css"
-  ]
+    '~/assets/index.css',
+  ],
 })

playground/app.vue

@@ -1,11 +1,11 @@
 module.exports = {
   content: [
-    "./playground/components/**/*.{js,vue,ts}",
-    "./playground/layouts/**/*.vue",
-    "./playground/pages/**/*.vue",
-    "./playground/plugins/**/*.{js,ts}",
-    "./playground/nuxt.config.{js,ts}",
-    "./playground/app.vue",
+    './playground/components/**/*.{js,vue,ts}',
+    './playground/layouts/**/*.vue',
+    './playground/pages/**/*.vue',
+    './playground/plugins/**/*.{js,ts}',
+    './playground/nuxt.config.{js,ts}',
+    './playground/app.vue',
   ],
   theme: {
     extend: {},