Update eslint

.eslintrc.json

@@ -1,28 +0,0 @@
-{
-    "env": {
-        "browser": true,
-        "es2021": true
-    },
-    "extends": [
-        "eslint:recommended",
-        "plugin:vue/vue3-recommended",
-        "prettier"
-    ],
-    "parserOptions": {
-        "ecmaVersion": "latest",
-        "sourceType": "module"
-    },
-    "plugins": [
-        "vue"
-    ],
-    "overrides": [
-        {
-            "files": [
-                "*.vue"
-            ],
-            "rules": {
-                "vue/multi-word-component-names": "off"
-            }
-        }
-    ]
-}

eslint.config.mjs

@@ -0,0 +1,43 @@
+import eslint from '@eslint/js';
+import eslintPluginVue from 'eslint-plugin-vue';
+import typescriptEslint from 'typescript-eslint';
+import globals from 'globals';
+
+export default typescriptEslint.config(
+    { ignores: ['*.d.ts', '**/coverage', '**/dist'] },
+    {
+        extends: [
+            eslint.configs.recommended,
+            ...typescriptEslint.configs.recommended,
+            ...eslintPluginVue.configs['flat/recommended'],
+        ],
+        files: ['**/*.{ts,vue}'],
+        languageOptions: {
+            ecmaVersion: 2022,
+            sourceType: 'module',
+            globals: globals.browser,
+            parserOptions: {
+                parser: typescriptEslint.parser,
+            },
+        },
+        rules: {
+            'indent': ['error', 4],
+            'vue/html-indent': ['error', 4],
+            'linebreak-style': ['error', 'unix'],
+            'quotes': ['error', 'single'],
+            'semi': ['error', 'always'],
+            'vue/no-reserved-component-names': 'off',
+            'vue/multi-word-component-names': 'off',
+            'vue/max-attributes-per-line': 'off',
+            'vue/singleline-html-element-content-newline': 'off',
+            "vue/first-attribute-linebreak": ["error", {
+                "singleline": "beside",
+                "multiline": "beside"
+            }],
+            'vue/no-undef-properties': ['error', {
+                'ignores': ['/^\\$/']
+            }]
+        },
+    },
+);
+

package.json

@@ -16,9 +16,6 @@
         "autoprefixer": "^10.4.17",
         "axios": "^1.6.6",
         "dayjs": "^1.11.10",
-        "eslint": "^8.56.0",
-        "eslint-config-prettier": "^8.10.0",
-        "eslint-plugin-vue": "^8.7.1",
         "postcss": "^8.4.33",
         "tailwindcss": "^3.4.1",
         "vue-axios": "^3.5.2"
@@ -34,6 +31,8 @@
         "@vitejs/plugin-vue": "^4.6.2",
         "change-case": "^4.1.2",
         "editorjs-alert": "^1.1.3",
+        "eslint": "^9.28.0",
+        "eslint-plugin-vue": "^10.2.0",
         "floating-vue": "^2.0.0",
         "laravel-echo": "^1.15.3",
         "laravel-vite-plugin": "^0.7.8",
@@ -41,9 +40,9 @@
         "merge": "^2.1.1",
         "pinia": "^2.1.7",
         "postcss-import": "^14.1.0",
-        "prettier": "^2.8.8",
         "pusher-js": "^8.3.0",
         "svg-sprite": "^2.0.2",
+        "typescript-eslint": "^8.34.0",
         "vite": "^4.5.2",
         "vue": "^3.3.4",
         "vue-toastification": "^2.0.0-rc.5",

tsconfig.json

@@ -0,0 +1,59 @@
+{
+    "compilerOptions": {
+        // Most non-library projects don't need to emit declarations.
+        // So we add this option by default to make the config more friendly to most users.
+        "noEmit": true,
+
+        // As long as you are using a build tool, we recommend you to author and ship in ES modules.
+        // Even if you are targeting Node.js, because
+        //  - `CommonJS` is too outdated
+        //  - the ecosystem hasn't fully caught up with `Node16`/`NodeNext`
+        // This recommendation includes environments like Vitest, Vite Config File, Vite SSR, etc.
+        "module": "ESNext",
+
+        // We expect users to use bundlers.
+        // So here we enable some resolution features that are only available in bundlers.
+        "moduleResolution": "bundler",
+        "resolveJsonModule": true,
+        "allowImportingTsExtensions": true,
+        // Even files without `import` or `export` are treated as modules.
+        // It helps to avoid mysterious errors such as `Cannot redeclare block-scoped variable 'name`.
+        // https://www.totaltypescript.com/cannot-redeclare-block-scoped-variable#solution-3-your-module-isnt-a-module
+        "moduleDetection": "force",
+
+        // Required in Vue projects
+        "jsx": "preserve",
+        "jsxImportSource": "vue",
+
+        // `"noImplicitThis": true` is part of `strict`
+        // Added again here in case some users decide to disable `strict`.
+        // This enables stricter inference for data properties on `this`.
+        "noImplicitThis": true,
+        "strict": true,
+
+        // <https://devblogs.microsoft.com/typescript/announcing-typescript-5-0/#verbatimmodulesyntax>
+        // Any imports or exports without a type modifier are left around. This is important for `<script setup>`.
+        // Anything that uses the type modifier is dropped entirely.
+        "verbatimModuleSyntax": true,
+
+        // A few notes:
+        // - Vue 3 supports ES2016+
+        // - For Vite, the actual compilation target is determined by the
+        //   `build.target` option in the Vite config.
+        //   So don't change the `target` field here. It has to be
+        //   at least `ES2020` for dynamic `import()`s and `import.meta` to work correctly.
+        // - If you are not using Vite, feel free to overwrite the `target` field.
+        "target": "ESNext",
+        // For spec compliance.
+        // `true` by default if the `target` is `ES2020` or higher.
+        // Explicitly set it to `true` here in case some users want to overwrite the `target`.
+        "useDefineForClassFields": true,
+
+        // Recommended
+        "esModuleInterop": true,
+        "forceConsistentCasingInFileNames": true,
+        // See <https://github.com/vuejs/vue-cli/pull/5688>
+        "skipLibCheck": true,
+        "types": ["vite/client"]
+    }
+}