Add eslint & prettier

Author: skryukov

.prettierignore

@@ -0,0 +1,5 @@
+# Ignore artifacts:
+build
+coverage
+
+app/frontend/routes

.prettierrc

@@ -0,0 +1,9 @@
+{
+  "printWidth": 80,
+  "semi": false,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "plugins": [
+    "prettier-plugin-tailwindcss"
+  ]
+}

app/frontend/entrypoints/inertia.ts

@@ -1,5 +1,6 @@
-import { createInertiaApp } from '@inertiajs/vue3'
-import { createApp, DefineComponent, h } from 'vue'
+import { createInertiaApp } from "@inertiajs/vue3"
+import type { DefineComponent } from "vue"
+import { createApp, h } from "vue"
 
 createInertiaApp({
   // Set default page title
@@ -13,7 +14,7 @@ createInertiaApp({
   // progress: false,
 
   resolve: (name) => {
-    const pages = import.meta.glob<DefineComponent>('../pages/**/*.vue', {
+    const pages = import.meta.glob<DefineComponent>("../pages/**/*.vue", {
       eager: true,
     })
     return pages[`../pages/${name}.vue`]

app/frontend/pages/InertiaExample.vue

@@ -34,12 +34,12 @@
 </template>
 
 <script setup lang="ts">
-import { Head } from '@inertiajs/vue3'
-import { ref } from 'vue'
+import { Head } from "@inertiajs/vue3"
+import { ref } from "vue"
 
-import inertiaSvg from '/assets/inertia.svg'
-import viteRubySvg from '/assets/vite_ruby.svg'
-import vueSvg from '/assets/vue.svg'
+import inertiaSvg from "/assets/inertia.svg"
+import viteRubySvg from "/assets/vite_ruby.svg"
+import vueSvg from "/assets/vue.svg"
 
 defineProps({
   name: String,

eslint.config.js

@@ -0,0 +1,45 @@
+import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript'
+import pluginVue from 'eslint-plugin-vue'
+import skipFormatting from '@vue/eslint-config-prettier/skip-formatting'
+import importPlugin from "eslint-plugin-import"
+
+// To allow more languages other than `ts` in `.vue` files, uncomment the following lines:
+// import { configureVueProject } from '@vue/eslint-config-typescript'
+// configureVueProject({ scriptLangs: ['ts', 'tsx'] })
+// More info at https://github.com/vuejs/eslint-config-typescript/#advanced-setup
+
+export default defineConfigWithVueTs(
+  {
+    name: 'app/files-to-lint',
+    files: ["app/frontend/**/*.{ts,mts,tsx,vue}"]
+  },
+  { ignores: ["app/frontend/routes/*"] },
+
+  pluginVue.configs['flat/essential'],
+  vueTsConfigs.recommended,
+  {
+    ...importPlugin.flatConfigs.recommended,
+    ...importPlugin.flatConfigs.typescript,
+    rules: {
+      "import/order": [
+        "error",
+        {
+          pathGroups: [
+            {
+              pattern: "@/**",
+              group: "external",
+              position: "after",
+            },
+          ],
+          "newlines-between": "always",
+          "named": true,
+          alphabetize: { order: "asc" },
+        },
+      ],
+      "import/first": "error",
+      "import/extensions": ["error", "never", { "svg": "always", "png": "always", "jpg": "always", "jpeg": "always", "gif": "always", "webp": "always" }],
+      "@typescript-eslint/consistent-type-imports": "error",
+    },
+  },
+  skipFormatting,
+)