Use @vue/tsconfig

package.json

@@ -22,6 +22,7 @@
     "@typescript-eslint/eslint-plugin": "^7.3.1",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vue/eslint-config-typescript": "^13.0.0",
+    "@vue/tsconfig": "^0.5.1",
     "eslint": "^8.57.0",
     "eslint-plugin-vue": "^9.23.0",
     "sass": "^1.72.0",

src/components/Editor.vue

@@ -18,16 +18,16 @@ import {
 } from 'vue';
 
 import brace, {
-  Position,
-  IEditSession,
-  Editor as IEditor,
+  type Position,
+  type IEditSession,
+  type Editor,
 } from 'brace';
 import 'brace/theme/tomorrow';
 import 'brace/ext/language_tools';
 import '@/editor/rdt';
 
-import ISelection from '@/types/selection';
-import IIcon from '@/types/icon';
+import type ISelection from '@/types/selection';
+import type IIcon from '@/types/icon';
 
 import useClientSize from '@/composables/useClientSize';
 import bindEditorValue from '@/composables/bindEditorValue';
@@ -40,7 +40,7 @@ const props = defineProps<{
 }>();
 
 const holder = ref<HTMLElement>();
-const editor = ref<IEditor>();
+const editor = ref<Editor>();
 
 const content = defineModel<string>('content');
 bindEditorValue(editor, content);
@@ -71,7 +71,7 @@ const holderSize = useClientSize(holder);
 watch(holderSize, () => editor.value?.resize());
 
 function getCompletions(
-  _editor: IEditor,
+  _editor: Editor,
   _session: IEditSession,
   _pos: Position,
   _prefix: string,

src/composables/bindEditorSelection.ts

@@ -3,7 +3,7 @@ import type { Editor, Range, VirtualRenderer } from 'brace';
 
 import onRefAssigned from './onRefAssigned';
 
-import ISelection from '@/types/selection';
+import type ISelection from '@/types/selection';
 
 interface Renderer extends VirtualRenderer {
   scrollTop: number;

src/stores/editor.ts

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
 import { ref, watch } from 'vue';
 import { debounce } from 'radash';
 
-import ISelection from '@/types/selection';
+import type ISelection from '@/types/selection';
 
 const debouncedSetItem = debounce({ delay: 200 }, localStorage.setItem.bind(localStorage));
 

src/stores/icon.ts

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
 import { ref } from 'vue';
 import md5 from 'md5';
 
-import IIcon from '@/types/icon';
+import type IIcon from '@/types/icon';
 
 const baseUrl = 'https://upload.wikimedia.org/wikipedia/commons';
 

tsconfig.json

@@ -1,31 +1,16 @@
 {
+  "extends": "@vue/tsconfig/tsconfig.json",
   "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    "strict": true,
-    "jsx": "preserve",
-    "importHelpers": true,
-    "moduleResolution": "node",
-    "experimentalDecorators": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "sourceMap": true,
     "baseUrl": ".",
     "paths": {
       "@/*": [
-        "src/*"
-      ]
+        "src/*",
+      ],
     },
     "types": [
-      "naive-ui/volar"
+      "vite/client",
+      "naive-ui/volar",
     ],
-    "lib": [
-      "esnext",
-      "dom",
-      "dom.iterable",
-      "scripthost",
-    ]
   },
   "include": [
     "src/**/*.ts",

vite.config.js

@@ -5,7 +5,7 @@ import { resolve } from 'path';
 export default defineConfig({
   resolve: {
     alias: {
-      "@": resolve(__dirname, './src'),
+      '@': resolve('./src'),
     },
   },
   plugins: [