prettier config

gearbox-solutions · Jun 7, 2024 · 3e58e6b · 3e58e6b
1 parent ecd6aee
commit 3e58e6b
Show file tree

Hide file tree

Showing 17 changed files with 9,448 additions and 338 deletions.
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -1,8 +1,9 @@
 // @ts-check
 import { createConfigForNuxt } from '@nuxt/eslint-config/flat'
+import eslintConfigPrettier from "eslint-config-prettier";
 
 // Run `npx @eslint/config-inspector` to inspect the resolved config interactively
-export default createConfigForNuxt({
+const nuxtConfig = createConfigForNuxt({
   features: {
     // Rules for module authors
     tooling: true,
@@ -15,6 +16,5 @@ export default createConfigForNuxt({
     ],
   },
 })
-  .append(
-    // your custom flat config here...
-  )
+
+export default [nuxtConfig.toConfigs(), eslintConfigPrettier]
diff --git a/package.json b/package.json
@@ -42,7 +42,10 @@
   },
   "dependencies": {
     "@nuxt/kit": "^3.11.2",
+    "eslint-config-prettier": "^9.1.0",
     "lodash-es": "^4.17.21",
+    "prettier": "^3.3.1",
+    "prettier-plugin-tailwindcss": "^0.6.2",
     "zod": "^3.23.8"
   },
   "devDependencies": {
@@ -52,12 +55,9 @@
     "@nuxt/schema": "^3.11.2",
     "@nuxt/test-utils": "^3.12.1",
     "@types/node": "^20.12.11",
-    "autoprefixer": "^10.4.19",
     "changelogen": "^0.5.5",
     "eslint": "^9.2.0",
     "nuxt": "^3.11.2",
-    "postcss": "^8.4.38",
-    "tailwindcss": "^3.4.4",
     "typescript": "latest",
     "vitest": "^1.6.0",
     "vue-tsc": "^2.0.16"

diff --git a/playground/app.vue b/playground/app.vue
@@ -1,18 +1,15 @@
 <script setup>
 useHead({
-  title: 'useForm Tester',
+  title: "useForm Tester",
   bodyAttrs: {
-    class: 'bg-gray-800 text-gray-200',
+    class: "text-gray-200 bg-gray-800",
   },
-})
+});
 </script>
 
 <template>
   <Head>
-    <Meta
-      name="color-scheme"
-      content="dark"
-    />
+    <Meta name="color-scheme" content="dark" />
   </Head>
   <NuxtLayout>
     <NuxtPage />

diff --git a/playground/components/ButtonPrimary.vue b/playground/components/ButtonPrimary.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts"></script>
 
 <template>
-  <button class="rounded-md bg-blue-900 px-4 py-2 hover:bg-blue-800 disabled:bg-gray-400 disabled:text-gray-500 disabled:cursor-not-allowed">
+  <button
+    class="rounded-md bg-blue-900 px-4 py-2 hover:bg-blue-800 disabled:cursor-not-allowed disabled:bg-gray-400 disabled:text-gray-500"
+  >
     <slot />
   </button>
 </template>
diff --git a/playground/components/LabeledInput.vue b/playground/components/LabeledInput.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { PropType } from 'vue'
+import type { PropType } from "vue";
 
-const model = defineModel<string | number>()
+const model = defineModel<string | number>();
 defineProps({
   label: {
     type: String,
@@ -19,20 +19,17 @@ defineProps({
     type: Array as PropType<string[]>,
     default: null,
   },
-})
+});
 defineOptions({
   inheritAttrs: false,
-})
+});
 
-defineEmits(['change'])
+defineEmits(["change"]);
 </script>
 
 <template>
   <div class="space-y-1">
-    <label
-      :for="id"
-      class="block text-sm uppercase"
-    >{{ label }}</label>
+    <label :for="id" class="block text-sm uppercase">{{ label }}</label>
 
     <input
       v-bind="$attrs"
@@ -41,12 +38,8 @@ defineEmits(['change'])
       :name="name"
       class="rounded-md px-2 py-1"
       @change="$emit('change')"
-    >
-    <div
-      v-for="error in errors"
-      :key="error"
-      class="text-red-500"
-    >
+    />
+    <div v-for="error in errors" :key="error" class="text-red-500">
       {{ error }}
     </div>
   </div>

diff --git a/playground/components/nav/NavBar.vue b/playground/components/nav/NavBar.vue
@@ -1,31 +1,16 @@
 <script setup lang="ts">
-import ContentWidthContainer from '~/components/ContentWidthContainer.vue'
+import ContentWidthContainer from "~/components/ContentWidthContainer.vue";
 </script>
 
 <template>
   <div class="bg-gray-900">
     <ContentWidthContainer>
       <div class="flex justify-between">
         <div class="flex">
-          <NuxtLink
-            href="/"
-            class="px-4 py-2 hover:bg-gray-800"
-          >
-            Home
-          </NuxtLink>
+          <NuxtLink href="/" class="px-4 py-2 hover:bg-gray-800"> Home </NuxtLink>
 
-          <NuxtLink
-            href="/todo"
-            class="px-4 py-2 hover:bg-gray-800"
-          >
-            Todo
-          </NuxtLink>
-          <NuxtLink
-            href="/todo-precog"
-            class="px-4 py-2 hover:bg-gray-800"
-          >
-            Todo-Precognitive
-          </NuxtLink>
+          <NuxtLink href="/todo" class="px-4 py-2 hover:bg-gray-800"> Todo </NuxtLink>
+          <NuxtLink href="/todo-precog" class="px-4 py-2 hover:bg-gray-800"> Todo-Precognitive </NuxtLink>
         </div>
       </div>
     </ContentWidthContainer>

diff --git a/playground/layouts/default.vue b/playground/layouts/default.vue
@@ -1,15 +1,13 @@
 <script setup lang="ts">
-import ContentWidthContainer from '~/components/ContentWidthContainer.vue'
-import NavBar from '~/components/nav/NavBar.vue'
+import ContentWidthContainer from "~/components/ContentWidthContainer.vue";
+import NavBar from "~/components/nav/NavBar.vue";
 </script>
 
 <template>
   <div>
     <NavBar />
     <ContentWidthContainer>
-      <div
-        class="px-4 py-4"
-      >
+      <div class="px-4 py-4">
         <slot />
       </div>
     </ContentWidthContainer>

diff --git a/playground/nuxt.config.ts b/playground/nuxt.config.ts
@@ -1,13 +1,13 @@
 export default defineNuxtConfig({
-  modules: ['../src/module'],
+  modules: ["../src/module"],
   myModule: {},
   devtools: { enabled: true },
-  css: ['~/assets/app.css'],
+  css: ["~/assets/app.css"],
 
   postcss: {
     plugins: {
-      tailwindcss: { config: './playground/tailwind.config.js' },
+      tailwindcss: { config: "./playground/tailwind.config.js" },
       autoprefixer: {},
     },
   },
-})
+});
diff --git a/playground/package.json b/playground/package.json
@@ -9,5 +9,13 @@
   },
   "dependencies": {
     "nuxt": "^3.11.2"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.19",
+    "eslint-config-prettier": "^9.1.0",
+    "postcss": "^8.4.38",
+    "prettier": "^3.3.1",
+    "prettier-plugin-tailwindcss": "^0.6.2",
+    "tailwindcss": "^3.4.4"
   }
 }
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
@@ -1,8 +1,5 @@
-<script setup lang="ts">
-</script>
+<script setup lang="ts"></script>
 
 <template>
-  <div>
-    Home
-  </div>
+  <div>Home</div>
 </template>
diff --git a/playground/pages/todo-precog.vue b/playground/pages/todo-precog.vue
@@ -3,30 +3,27 @@
 //   description: '',
 // })
 
-const entries = ref([])
+const entries = ref([]);
 
-const form = usePrecognitionForm('post', '/api/todo-precog', {
-  description: '',
+const form = usePrecognitionForm("post", "/api/todo-precog", {
+  description: "",
   age: null,
-})
+});
 
 const submitForm = async () => {
   await form.submit({
     onSuccess: (response) => {
-      console.log('onSuccess callback', response)
-      entries.value.push(response._data)
+      console.log("onSuccess callback", response);
+      entries.value.push(response._data);
     },
-  })
-}
+  });
+};
 </script>
 
 <template>
   <div>
     <div class="flex gap-x-8">
-      <form
-        class="space-y-4"
-        @submit.prevent="submitForm"
-      >
+      <form class="space-y-4" @submit.prevent="submitForm">
         <div class="">
           <LabeledInput
             id="description"
@@ -52,22 +49,15 @@ const submitForm = async () => {
         </div>
 
         <div>
-          <ButtonPrimary :disabled="form.processing || form.hasErrors">
-            Submit
-          </buttonprimary>
+          <ButtonPrimary :disabled="form.processing || form.hasErrors"> Submit </ButtonPrimary>
         </div>
       </form>
       <pre>{{ form }}</pre>
     </div>
     <div class="pt-12">
       <pre />
-      <div class="text-lg font-bold uppercase">
-        Entries
-      </div>
-      <div
-        v-for="(entry, index) in entries"
-        :key="index"
-      >
+      <div class="text-lg font-bold uppercase">Entries</div>
+      <div v-for="(entry, index) in entries" :key="index">
         {{ entry.description }}
       </div>
     </div>

diff --git a/playground/pages/todo.vue b/playground/pages/todo.vue
@@ -1,25 +1,22 @@
 <script setup lang="ts">
-const entries = ref([])
+const entries = ref([]);
 const form = useForm({
-  description: '',
-})
+  description: "",
+});
 
 const submitForm = async () => {
-  await form.post('/api/todo', {
+  await form.post("/api/todo", {
     onSuccess: (response) => {
-      entries.value.push(response._data)
+      entries.value.push(response._data);
     },
-  })
-}
+  });
+};
 </script>
 
 <template>
   <div>
     <div class="flex gap-x-8">
-      <form
-        class="space-y-4"
-        @submit.prevent="submitForm"
-      >
+      <form class="space-y-4" @submit.prevent="submitForm">
         <div class="space-x-4">
           <LabeledInput
             id="description"
@@ -32,22 +29,15 @@ const submitForm = async () => {
         </div>
 
         <div>
-          <ButtonPrimary :disabled="form.processing">
-            Submit
-          </buttonprimary>
+          <ButtonPrimary :disabled="form.processing"> Submit </ButtonPrimary>
         </div>
       </form>
       <pre>{{ form }}</pre>
     </div>
     <div class="pt-12">
       <pre />
-      <div class="text-lg font-bold uppercase">
-        Entries
-      </div>
-      <div
-        v-for="(entry, index) in entries"
-        :key="index"
-      >
+      <div class="text-lg font-bold uppercase">Entries</div>
+      <div v-for="(entry, index) in entries" :key="index">
         {{ entry.description }}
       </div>
     </div>