refactor: fix eslint

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-  "editor.formatOnSave": true
+  "editor.formatOnSave": true,
+  "eslint.experimental.useFlatConfig": true
 }

app.vue

@@ -20,7 +20,7 @@ const language = computed(() => {
         max-w="50%"
         min-w="50%"
       />
-      <ASTViewer flex-1 />
+      <AstViewer flex-1 />
     </div>
   </main>
 </template>

components/ASTViewer.vue

@@ -4,7 +4,7 @@ import { hideEmptyKeys, hideLocationData } from '#imports'
 
 const Error = globalThis.Error
 
-let shiki = await getHighlighter({
+const shiki = await getHighlighter({
   themes: ['vitesse-dark', 'vitesse-light'],
   langs: ['json'],
 })
@@ -46,25 +46,25 @@ const hideKeysValue = computed({
   <div flex="~ col gap-2" min-w-0>
     <div flex="~ gap-2">
       <label>
-        <input type="checkbox" v-model="hideEmptyKeys" /> Hide empty keys
+        <input v-model="hideEmptyKeys" type="checkbox" /> Hide empty keys
       </label>
       <label>
-        <input type="checkbox" v-model="hideLocationData" /> Hide location data
+        <input v-model="hideLocationData" type="checkbox" /> Hide location data
       </label>
       <label>
         Hide keys:
         <input
-          type="input"
           v-model="hideKeysValue"
+          type="input"
           border="~ $c-border"
-          px1
           rounded
+          px1
         />
       </label>
     </div>
-    <div v-if="error" text-red overflow-scroll>
+    <div v-if="error" overflow-scroll text-red>
       <pre v-text="error instanceof Error ? error.stack : error" />
     </div>
-    <div overflow-scroll v-else v-html="html" />
+    <div v-else overflow-scroll v-html="html" />
   </div>
 </template>

components/CodeEditor.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import * as monaco from 'monaco-editor'
+import type * as monaco from 'monaco-editor'
 import { type MonacoEditor } from '#build/components'
 import { type MonacoLanguage } from '~/composables/language'
 
@@ -27,14 +27,14 @@ const options = computed<monaco.editor.IStandaloneEditorConstructionOptions>(
 
 <template>
   <MonacoEditor
-    v-model="code"
     ref="editorRef"
+    v-model="code"
     h-full
     :lang="language"
     :options="options"
   >
-    <div flex="~ col gap-2" w-full h-full items-center justify-center>
-      <div i-ri:loader-2-line animate-spin text-4xl></div>
+    <div flex="~ col gap-2" h-full w-full items-center justify-center>
+      <div i-ri:loader-2-line animate-spin text-4xl />
       <span text-lg>Loading...</span>
     </div>
   </MonacoEditor>

components/LanguageOptions.vue

@@ -19,21 +19,21 @@ watchEffect(() => {
 </script>
 
 <template>
-  <div flex justify-center items-center>
+  <div flex items-center justify-center>
     <button class="i-ri:settings-line" @click="openDialog" />
-    <dialog ref="dialog" rounded h-50vh p0 @click="handleDialogClick">
-      <div text-center text-lg py2 font-bold>
+    <dialog ref="dialog" h-50vh rounded p0 @click="handleDialogClick">
+      <div py2 text-center text-lg font-bold>
         Parser Options
         <button
           class="i-ri:close-line"
-          p4
           float-right
+          p4
           @click="dialog?.close()"
         />
       </div>
       <CodeEditor
-        w-50vw
         v-model="value"
+        w-50vw
         :language="currentLanguage.options.language"
       />
     </dialog>

components/NavBar.vue

@@ -1,7 +1,7 @@
 <template>
-  <div p2 flex justify-between items-center>
+  <div flex items-center justify-between p2>
     <div flex="~ gap4">
-      <h1 font-bold text-lg>AST Viewer</h1>
+      <h1 text-lg font-bold>AST Explorer</h1>
       <LanguageSelect />
       <LanguageOptions v-if="currentLanguage.options.configurable" />
     </div>

components/dropdown/DropdownItem.vue

@@ -23,13 +23,13 @@ const handleClick = (evt: MouseEvent) => {
   <div
     v-bind="$attrs"
     ref="el"
+    hover-bg-active
     flex
-    gap-2
-    items-center
     cursor-pointer
+    items-center
+    gap-2
     px3
     py2
-    hover-bg-active
     :aria-label="text"
     @click="handleClick"
   >

components/dropdown/ctx.ts

@@ -1,4 +1,4 @@
-import type { InjectionKey } from 'vue'
+import { type InjectionKey } from 'vue'
 
 export const dropdownContextKey: InjectionKey<{
   hide: () => void

composables/language/index.ts

@@ -44,13 +44,14 @@ monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
   allowJs: true,
 })
 
-watchEffect(async () => {
+watchEffect(() => {
   try {
     ast.value = currentLanguage.value.parse(
       code.value,
       json5.parse(rawOptions.value)
     )
     error.value = null
+    // eslint-disable-next-line unicorn/catch-error-name
   } catch (err) {
     error.value = err
   }

composables/language/javascript.ts

@@ -1,7 +1,6 @@
-import { ParserOptions } from '@babel/parser'
-import { parse } from '@babel/parser'
+import { type ParserOptions, parse } from '@babel/parser'
 import { version } from '@babel/parser/package.json'
-import { LanguageOption } from '../language'
+import { type LanguageOption } from '../language'
 
 // @unocss-include
 export const javascript: LanguageOption = {

composables/language/vue.ts

@@ -1,5 +1,5 @@
-import { LanguageOption } from '../language'
 import { parse, version } from '@vue/compiler-sfc'
+import { type LanguageOption } from '../language'
 
 // @unocss-include
 export const vue: LanguageOption = {

composables/state.ts

@@ -1,5 +1,5 @@
 import json5 from 'json5'
-import type { Language } from './language'
+import { type Language } from './language'
 
 const PREFIX = 'ast-explorer:'
 

eslint.config.js

@@ -0,0 +1,13 @@
+import { sxzz } from '@sxzz/eslint-config'
+
+export default sxzz(
+  [
+    {
+      files: ['plugins/**'],
+      rules: {
+        'import/no-default-export': 'off',
+      },
+    },
+  ],
+  { unocss: true }
+)

package.json

@@ -1,30 +1,36 @@
 {
   "name": "ast-explorer",
   "private": true,
+  "type": "module",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
+    "lint": "eslint .",
     "postinstall": "nuxt prepare"
   },
+  "dependencies": {
+    "@babel/parser": "^7.22.14",
+    "@vue/compiler-sfc": "^3.3.4",
+    "json5": "^2.2.3",
+    "monaco-editor": "^0.41.0",
+    "shikiji": "^0.6.6"
+  },
   "devDependencies": {
     "@iconify-json/ri": "^1.1.12",
     "@iconify-json/vscode-icons": "^1.1.28",
     "@nuxt/devtools": "^0.8.2",
+    "@sxzz/eslint-config": "^3.5.1",
+    "@sxzz/prettier-config": "^1.0.4",
     "@unocss/nuxt": "^0.55.4",
     "@vueuse/nuxt": "^10.4.1",
+    "eslint": "^8.48.0",
     "floating-vue": "2.0.0-beta.24",
     "nuxt": "3.7.0",
     "nuxt-monaco-editor": "^1.2.3",
     "onigasm": "^2.2.5",
     "serve": "^14.2.1"
   },
-  "dependencies": {
-    "@babel/parser": "^7.22.14",
-    "@vue/compiler-sfc": "^3.3.4",
-    "json5": "^2.2.3",
-    "monaco-editor": "^0.41.0",
-    "shikiji": "^0.6.6"
-  }
+  "prettier": "@sxzz/prettier-config"
 }