chore(lint): switched to a better lint config

src/tools/html-wysiwyg-editor/editor/editor.vue

@@ -1,14 +1,3 @@
-<template>
-  <c-card v-if="editor" important:p0>
-    <menu-bar class="editor-header" :editor="editor" />
-    <n-divider style="margin-top: 0" />
-
-    <div px8 pb6>
-      <editor-content class="editor-content" :editor="editor" />
-    </div>
-  </c-card>
-</template>
-
 <script setup lang="ts">
 import { tryOnBeforeUnmount, useVModel } from '@vueuse/core';
 import { Editor, EditorContent } from '@tiptap/vue-3';
@@ -16,9 +5,9 @@ import StarterKit from '@tiptap/starter-kit';
 import { useThemeVars } from 'naive-ui';
 import MenuBar from './menu-bar.vue';
 
-const themeVars = useThemeVars();
 const props = defineProps<{ html: string }>();
 const emit = defineEmits(['update:html']);
+const themeVars = useThemeVars();
 const html = useVModel(props, 'html', emit);
 
 const editor = new Editor({
@@ -33,6 +22,17 @@ tryOnBeforeUnmount(() => {
 });
 </script>
 
+<template>
+  <c-card v-if="editor" important:p0>
+    <MenuBar class="editor-header" :editor="editor" />
+    <n-divider style="margin-top: 0" />
+
+    <div px8 pb6>
+      <EditorContent class="editor-content" :editor="editor" />
+    </div>
+  </c-card>
+</template>
+
 <style scoped lang="less">
 ::v-deep(.ProseMirror-focused) {
   outline: none;

src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue

@@ -1,3 +1,10 @@
+<script setup lang="ts">
+import { type Component, toRefs } from 'vue';
+
+const props = defineProps<{ icon: Component; title: string; action: () => void; isActive?: () => boolean }>();
+const { icon, title, action, isActive } = toRefs(props);
+</script>
+
 <template>
   <n-tooltip trigger="hover">
     <template #trigger>
@@ -9,12 +16,3 @@
     {{ title }}
   </n-tooltip>
 </template>
-
-<script setup lang="ts">
-import { toRefs, type Component } from 'vue';
-
-const props = defineProps<{ icon: Component; title: string; action: () => void; isActive?: () => boolean }>();
-const { icon, title, action, isActive } = toRefs(props);
-</script>
-
-<style scoped></style>

src/tools/html-wysiwyg-editor/editor/menu-bar.vue

@@ -1,12 +1,3 @@
-<template>
-  <div flex items-center>
-    <template v-for="(item, index) in items">
-      <n-divider v-if="item.type === 'divider'" :key="`divider${index}`" vertical />
-      <menu-bar-item v-else-if="item.type === 'button'" :key="index" v-bind="item" />
-    </template>
-  </div>
-</template>
-
 <script setup lang="ts">
 import type { Editor } from '@tiptap/vue-3';
 import {
@@ -27,7 +18,7 @@ import {
   Strikethrough,
   TextWrap,
 } from '@vicons/tabler';
-import { toRefs, type Component } from 'vue';
+import { type Component, toRefs } from 'vue';
 import MenuBarItem from './menu-bar-item.vue';
 
 const props = defineProps<{ editor: Editor }>();
@@ -35,12 +26,12 @@ const { editor } = toRefs(props);
 
 type MenuItem =
   | {
-      icon: Component;
-      title: string;
-      action: () => void;
-      isActive?: () => boolean;
-      type: 'button';
-    }
+    icon: Component
+    title: string
+    action: () => void
+    isActive?: () => boolean
+    type: 'button'
+  }
   | { type: 'divider' };
 
 const items: MenuItem[] = [
@@ -166,4 +157,11 @@ const items: MenuItem[] = [
 ];
 </script>
 
-<style scoped></style>
+<template>
+  <div flex items-center>
+    <template v-for="(item, index) in items">
+      <n-divider v-if="item.type === 'divider'" :key="`divider${index}`" vertical />
+      <MenuBarItem v-else-if="item.type === 'button'" :key="index" v-bind="item" />
+    </template>
+  </div>
+</template>

src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue

@@ -1,16 +1,14 @@
-<template>
-  <editor v-model:html="html" />
-  <textarea-copyable :value="format(html, { parser: 'html', plugins: [htmlParser] })" language="html" />
-</template>
-
 <script setup lang="ts">
-import TextareaCopyable from '@/components/TextareaCopyable.vue';
 import { format } from 'prettier';
 import htmlParser from 'prettier/parser-html';
 import { useStorage } from '@vueuse/core';
 import Editor from './editor/editor.vue';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
 
 const html = useStorage('html-wysiwyg-editor--html', '<h1>Hey!</h1><p>Welcome to this html wysiwyg editor</p>');
 </script>
 
-<style lang="less" scoped></style>
+<template>
+  <Editor v-model:html="html" />
+  <TextareaCopyable :value="format(html, { parser: 'html', plugins: [htmlParser] })" language="html" />
+</template>