chore: lint

app/app.vue

@@ -17,7 +17,7 @@ useHead({
 
 <template>
   <div v-if="errorInfo" grid h-full w-full place-content-center whitespace-pre-line p4>
-    <ConfigInspectorBadge font-200 text-xl mb6 />
+    <ConfigInspectorBadge mb6 text-xl font-200 />
 
     <div text-2xl text-red5 font-bold>
       Failed to load <span rounded bg-red:5 px2>eslint.config.js</span><br>
@@ -27,18 +27,18 @@ useHead({
       {{ errorInfo.error }}
     </div>
 
-    <div op50 mt6>
+    <div mt6 op50>
       Note that
       <a href="https://github.com/eslint/config-inspector" target="_blank" hover:underline>config inspector</a>
       only works with the <a href="https://eslint.org/docs/latest/use/configure/configuration-files-new" target="_blank" font-bold hover:underline>flat config format</a>.
     </div>
   </div>
-  <div v-else-if="isLoading" p4 flex="~ col" w-full h-full items-center justify-center>
-    <div animate-pulse flex="~ gap-2 items-center" text-xl flex-auto>
+  <div v-else-if="isLoading" flex="~ col" h-full w-full items-center justify-center p4>
+    <div flex="~ gap-2 items-center" flex-auto animate-pulse text-xl>
       <div i-svg-spinners-90-ring-with-bg />
       Loading config...
     </div>
-    <ConfigInspectorBadge font-200 text-xl mt6 :show-version="false" />
+    <ConfigInspectorBadge mt6 text-xl font-200 :show-version="false" />
   </div>
   <div v-else px4 py6 lg:px14 lg:py10>
     <NavBar />

app/components/ColorizedRuleName.vue

@@ -43,7 +43,7 @@ const parsed = computed(() => {
 <template>
   <component
     :is="as || 'div'"
-    ws-nowrap font-mono of-hidden text-ellipsis
+    of-hidden text-ellipsis ws-nowrap font-mono
     :class="[
       deprecated ? 'line-through' : '',
       borderless ? '' : 'badge',

app/components/ConfigInspectorBadge.vue

@@ -21,7 +21,7 @@ withDefaults(
     </a>
     <a
       v-if="showVersion"
-      op50 font-mono inline-block translate-y--5 ml1 text-0.6em font-200
+      ml1 inline-block translate-y--5 text-0.6em font-200 font-mono op50
       :href="`https://github.com/eslint/config-inspector/releases/tag/v${version}`" target="_blank"
     >
       v{{ version }}

app/components/ConfigItem.vue

@@ -60,8 +60,8 @@ const extraConfigs = computed(() => {
         #{{ index + 1 }}
       </div>
       <div flex="~ gap-2 items-start wrap items-center" cursor-pointer select-none bg-hover px2 py2 text-sm font-mono>
-        <div i-ph-caret-right class="[details[open]_&]:rotate-90" transition op50 />
-        <div flex flex-col gap-3 md:flex-row flex-auto>
+        <div class="[details[open]_&]:rotate-90" i-ph-caret-right op50 transition />
+        <div flex flex-auto flex-col gap-3 md:flex-row>
           <span :class="config.name ? '' : 'op50 italic'" flex-auto>
             <ColorizedConfigName v-if="config.name" :name="config.name" />
             <span v-else>anonymous #{{ index + 1 }}</span>
@@ -104,11 +104,11 @@ const extraConfigs = computed(() => {
       </div>
     </summary>
 
-    <div absolute right-2 top-2 text-right text-5em font-mono op5 pointer-events-none>
+    <div pointer-events-none absolute right-2 top-2 text-right text-5em font-mono op5>
       #{{ index + 1 }}
     </div>
 
-    <div v-if="hasShown" px4 py3 flex="~ col gap-4" of-auto>
+    <div v-if="hasShown" flex="~ col gap-4" of-auto px4 py3>
       <div v-if="config.files" flex="~ gap-2 items-start">
         <div i-ph-file-magnifying-glass-duotone my1 flex-none />
         <div flex="~ col gap-2">
@@ -211,7 +211,7 @@ const extraConfigs = computed(() => {
           </div>
           <template v-for="v, k in extraConfigs" :key="k">
             <div border="~ base rounded-lg">
-              <div p2 px3 op50 of-auto>
+              <div of-auto p2 px3 op50>
                 {{ k }}
               </div>
               <Shiki

app/components/FileGroupItem.vue

@@ -56,8 +56,8 @@ function goToConfig(idx: number) {
         #{{ index + 1 }}
       </div>
       <div flex="~ gap-2 items-start wrap items-center" cursor-pointer select-none bg-hover px2 py2 text-sm font-mono>
-        <div i-ph-caret-right class="[details[open]_&]:rotate-90" transition op50 />
-        <div flex flex-col gap-3 md:flex-row flex-auto>
+        <div class="[details[open]_&]:rotate-90" i-ph-caret-right op50 transition />
+        <div flex flex-auto flex-col gap-3 md:flex-row>
           <span flex-auto flex="~ gap-2 items-center">
             <template v-if="groupName?.type === 'config'">
               <span op75>Config</span>
@@ -100,11 +100,11 @@ function goToConfig(idx: number) {
       </div>
     </summary>
 
-    <div absolute right-2 top-2 text-right text-5em font-mono op5 pointer-events-none>
+    <div pointer-events-none absolute right-2 top-2 text-right text-5em font-mono op5>
       #{{ index + 1 }}
     </div>
 
-    <div v-if="hasShown" px4 py4 flex="~ col gap-4" of-auto>
+    <div v-if="hasShown" flex="~ col gap-4" of-auto px4 py4>
       <div flex="~ gap-2 items-center">
         <div i-ph-stack-duotone flex-none />
         <div>Configs Specific to the Files ({{ group.configs.length }})</div>

app/components/GlobItem.vue

@@ -40,13 +40,13 @@ const Noop = defineComponent({ setup: (_, { slots }) => () => slots.default?.()
   <component :is="showsPopup ? VDropdown : Noop">
     <component
       :is="showsPopup ? 'button' : 'div'"
-      font-mono text-gray
+      text-gray font-mono
       :class="active === true ? 'badge-active' : active === false ? 'badge op50' : 'badge'"
     >
       <span class="filter-hue-rotate-180" v-html="highlighted" />
     </component>
     <template #popper="{ shown, hide }">
-      <div v-if="shown && popup === 'files'" max-h="30vh" min-w-80 p3 of-auto>
+      <div v-if="shown && popup === 'files'" max-h="30vh" min-w-80 of-auto p3>
         <div v-if="files?.size" flex="~ col gap-1">
           <div>Files that matches this glob</div>
           <FileItem
@@ -56,12 +56,12 @@ const Noop = defineComponent({ setup: (_, { slots }) => () => slots.default?.()
             @click="hide()"
           />
         </div>
-        <div v-else op50 text-center italic>
+        <div v-else text-center italic op50>
           No files matched this glob.
         </div>
       </div>
 
-      <div v-if="shown && popup === 'configs'" max-h="30vh" min-w-80 p3 of-auto>
+      <div v-if="shown && popup === 'configs'" max-h="30vh" min-w-80 of-auto p3>
         <div v-if="configs?.length" flex="~ col gap-1">
           <div>Configs that contains this glob</div>
           <div v-for="config of configs" :key="config.name" flex="~ gap-2">
@@ -73,7 +73,7 @@ const Noop = defineComponent({ setup: (_, { slots }) => () => slots.default?.()
             </button>
           </div>
         </div>
-        <div v-else op50 text-center italic>
+        <div v-else text-center italic op50>
           No configs matched this glob.
         </div>
       </div>

app/components/NavBar.vue

@@ -30,7 +30,7 @@ function toggleRuleView() {
 
 <template>
   <ConfigInspectorBadge text-3xl font-200 />
-  <div v-if="payload.meta.configPath" flex="~ gap-1 items-center" text-sm my1>
+  <div v-if="payload.meta.configPath" flex="~ gap-1 items-center" my1 text-sm>
     <span font-mono op35>{{ payload.meta.configPath }}</span>
   </div>
   <div flex="~ gap-1 items-center wrap" text-sm>
@@ -41,24 +41,24 @@ function toggleRuleView() {
     <div
       v-if="isFetching"
       flex="~ gap-2 items-center"
-      text-green ml2 animate-pulse
+      ml2 animate-pulse text-green
     >
-      <div i-svg-spinners-90-ring-with-bg text-sm flex-none />
+      <div i-svg-spinners-90-ring-with-bg flex-none text-sm />
       Fetching updates...
     </div>
   </div>
   <div flex="~ gap-3 items-center wrap" py4>
     <NuxtLink
       to="/configs"
-      btn-action text-base px3 py1
+      px3 py1 text-base btn-action
       active-class="btn-action-active"
     >
       <div i-ph-stack-duotone flex-none />
       Configs
     </NuxtLink>
     <NuxtLink
       to="/rules"
-      btn-action text-base px3 py1
+      px3 py1 text-base btn-action
       active-class="btn-action-active"
     >
       <div i-ph-list-dashes-duotone flex-none />
@@ -67,7 +67,7 @@ function toggleRuleView() {
     <NuxtLink
       v-if="payload.filesResolved"
       to="/files"
-      btn-action text-base px3 py1
+      px3 py1 text-base btn-action
       active-class="btn-action-active"
     >
       <div i-ph-files-duotone flex-none />
@@ -80,17 +80,17 @@ function toggleRuleView() {
     />
     <button
       title="Toggle Rule View"
-      lt-md:hidden
+
       :class="stateStorage.viewType === 'list' ? 'i-ph-list-duotone' : 'i-ph-grid-four-duotone'"
-      text-xl op50 hover:op75
+      text-xl op50 lt-md:hidden hover:op75
       @click="toggleRuleView()"
     />
     <NuxtLink
       href="https://github.com/eslint/config-inspector" target="_blank"
       i-carbon-logo-github text-lg op50 hover:op75
     />
     <template v-if="deprecatedUsing.length">
-      <div w-1px border="l base" h-5 ml3 mr2 />
+      <div border="l base" ml3 mr2 h-5 w-1px />
       <button
         to="/configs"
         border="~ orange/20 rounded-full"

app/components/RuleItem.vue

@@ -127,7 +127,7 @@ function capitalize(str?: string) {
 
   <div
     v-if="gridView && (rule.deprecated || rule.fixable || rule.docs?.recommended)"
-    flex-auto justify-end flex flex-col items-start
+    flex flex-auto flex-col items-start justify-end
   >
     <div flex="~ gap-2" mt1>
       <div v-if="rule.deprecated" border="~ red/25 rounded" bg-red:5 px1 text-xs text-red>

app/components/RuleLevelIcon.vue

@@ -32,6 +32,6 @@ const icon = computed(() => ({
 <template>
   <div relative :class="[color, props.class]" :title="title">
     <div :class="icon" />
-    <div v-if="hasOptions" op75 bg-current rounded-full h-6px w-6px absolute top--2px right--2px />
+    <div v-if="hasOptions" absolute right--2px top--2px h-6px w-6px rounded-full bg-current op75 />
   </div>
 </template>

app/components/RuleStateItem.vue

@@ -41,7 +41,7 @@ function goto() {
         <button hover="!color-base" text-gray @click="goto()">
           <ColorizedConfigName
             v-if="config.name" :name="config.name"
-            font-mono px2 border="~ base rounded"
+            px2 font-mono border="~ base rounded"
           />
           <span op50> the </span>
           {{ nth(state.configIndex + 1) }}

app/pages/configs.vue

@@ -220,9 +220,9 @@ onMounted(async () => {
         >
           <button
             v-for="file, idx of autoCompleteFiles"
-            :key="file.item" px3 py0.5 text-left font-mono
+            :key="file.item"
             :class="idx === autoCompleteIndex ? 'bg-active' : ''"
-            hover:bg-active
+            hover:bg-active px3 py0.5 text-left font-mono
             @click="autoCompleteConfirm(idx)"
           >
             <template v-if="file.matches">
@@ -287,7 +287,7 @@ onMounted(async () => {
           <div border="~ base rounded" flex>
             <button
               :class="stateStorage.viewFileMatchType === 'configs' ? 'btn-action-active' : 'op50'"
-              btn-action border-none
+              border-none btn-action
               @click="stateStorage.viewFileMatchType = stateStorage.viewFileMatchType === 'configs' ? 'merged' : 'configs'"
             >
               <div i-ph-stack-duotone />
@@ -296,7 +296,7 @@ onMounted(async () => {
             <div border="l base" />
             <button
               :class="stateStorage.viewFileMatchType !== 'configs' ? 'btn-action-active' : 'op50'"
-              btn-action border-none
+              border-none btn-action
               @click="stateStorage.viewFileMatchType = stateStorage.viewFileMatchType === 'configs' ? 'merged' : 'configs'"
             >
               <div i-ph-film-script-duotone />
@@ -318,21 +318,21 @@ onMounted(async () => {
         </label>
         <div flex-auto />
         <button
-          btn-action px3
+          px3 btn-action
           @click="expandAll"
         >
           Expand All
         </button>
         <button
-          btn-action px3
+          px3 btn-action
           @click="collapseAll"
         >
           Collapse All
         </button>
       </div>
 
       <template v-if="!filteredConfigs.length">
-        <div italic op50 mt5>
+        <div mt5 italic op50>
           No matched config items.
         </div>
         <template v-if="fileMatchResult?.globs.length">
@@ -362,7 +362,7 @@ onMounted(async () => {
               :rules="mergedRules.common"
             />
           </details>
-          <details class="flat-config-item" border="~ base rounded-lg" relative open>
+          <details class="flat-config-item" border="~ base rounded-lg" open relative>
             <summary block>
               <div flex="~ gap-2 items-start" cursor-pointer select-none bg-hover px2 py2 text-sm font-mono op75>
                 <div i-ph-caret-right class="[details[open]_&]:rotate-90" transition />

app/pages/files.vue

@@ -21,7 +21,7 @@ function collapseAll() {
       <div border="~ base rounded" flex="~ inline">
         <button
           :class="stateStorage.viewFilesTab === 'list' ? 'btn-action-active' : 'op50'"
-          btn-action border-none
+          border-none btn-action
           @click="stateStorage.viewFilesTab = 'list'"
         >
           <div i-ph-files-duotone />
@@ -30,7 +30,7 @@ function collapseAll() {
         <div border="l base" />
         <button
           :class="stateStorage.viewFilesTab === 'group' ? 'btn-action-active' : 'op50'"
-          btn-action border-none
+          border-none btn-action
           @click="stateStorage.viewFilesTab = 'group' "
         >
           <div i-ph-rows-duotone />
@@ -40,13 +40,13 @@ function collapseAll() {
       <div flex-auto />
       <template v-if="stateStorage.viewFilesTab === 'group'">
         <button
-          btn-action px3
+          px3 btn-action
           @click="expandAll"
         >
           Expand All
         </button>
         <button
-          btn-action px3
+          px3 btn-action
           @click="collapseAll"
         >
           Collapse All
@@ -74,7 +74,7 @@ function collapseAll() {
     </div>
   </div>
   <div v-else>
-    <div op50 italic p3>
+    <div p3 italic op50>
       No matched files found in the workspace.
     </div>
   </div>

app/pages/rules.vue

@@ -135,7 +135,7 @@ function resetFilters() {
         >
           <template #default="{ value, title }">
             <div class="flex items-center">
-              <div flex ml--1 mr-1 items-center>
+              <div ml--1 mr-1 flex items-center>
                 <RuleLevelIcon v-if="value === 'error' || value === 'overloads'" level="error" />
                 <RuleLevelIcon v-if="value === 'warn' || value === 'overloads'" level="warn" />
                 <RuleLevelIcon v-if="value === 'off' || value === 'off-only' || value === 'overloads'" level="off" />
@@ -153,10 +153,10 @@ function resetFilters() {
           :titles="['All', 'Active', 'Recommended', 'Fixable', 'Deprecated']"
         >
           <template #default="{ value, title }">
-            <div flex gap-1 items-center>
-              <div v-if="value === 'recommended'" ml--0.5 i-ph-check-square-duotone text-green />
-              <div v-if="value === 'fixable'" ml--0.5 i-ph-wrench-duotone text-amber />
-              <div v-if="value === 'deprecated'" ml--1 i-ph-prohibit-inset-duotone text-gray />
+            <div flex items-center gap-1>
+              <div v-if="value === 'recommended'" i-ph-check-square-duotone ml--0.5 text-green />
+              <div v-if="value === 'fixable'" i-ph-wrench-duotone ml--0.5 text-amber />
+              <div v-if="value === 'deprecated'" i-ph-prohibit-inset-duotone ml--1 text-gray />
               {{ title || value }}
             </div>
           </template>