chore: use ESLint V9 and fix errors

Author: chengpeiquan

.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+auto-install-peers=true

.vscode/settings.json

@@ -1,5 +1,4 @@
 {
-  "eslint.experimental.useFlatConfig": true,
   "cSpell.words": [
     "astro",
     "astrojs",
@@ -14,5 +13,11 @@
     "taze",
     "tsconfigs",
     "tsup"
-  ]
+  ],
+  "editor.formatOnSave": true,
+  "eslint.useFlatConfig": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "always",
+    "source.fixAll.prettier": "always"
+  }
 }

docs/astro.config.mts

@@ -1,8 +1,8 @@
-import { defineConfig } from 'astro/config'
-import { capitalize } from '@bassist/utils'
 import react from '@astrojs/react'
 import starlight from '@astrojs/starlight'
 import tailwind from '@astrojs/tailwind'
+import { capitalize } from '@bassist/utils'
+import { defineConfig } from 'astro/config'
 
 const autogenerates = {
   reference: {

docs/src/components/AppliesTo.tsx

@@ -1,6 +1,6 @@
 import React, { Fragment, useMemo } from 'react'
+import { type Languages, getTranslation } from '@/i18n'
 import pkg from '../../../package.json'
-import { getTranslation, type Languages } from '@/i18n'
 
 const repoUrl = pkg.repository.url
 
@@ -24,15 +24,15 @@ export const AppliesTo: React.FC<AppliesToProps> = ({
   })
 
   return (
-    <blockquote className="flex items-center gap-2 w-full mt-6">
+    <blockquote className="mt-6 flex w-full items-center gap-2">
       {title}
       <span className="flex items-center gap-3">{componentsDisplay}</span>
     </blockquote>
   )
 }
 
 const formatGitHubIssue = (url: string) => {
-  const pattern = /github\.com\/([^\/]+\/[^\/]+)\/issues\/(\d+)/
+  const pattern = /github\.com\/([^/]+\/[^/]+)\/issues\/(\d+)/
   const match = url.match(pattern)
 
   if (match) {
@@ -89,7 +89,7 @@ export const RelatedIssues: React.FC<{
   }, [issues])
 
   return (
-    <blockquote className="flex items-center gap-2 w-full">
+    <blockquote className="flex w-full items-center gap-2">
       {title}
       <span className="flex items-center gap-2">{issuesDisplay}</span>
     </blockquote>

docs/src/components/CodeCollapser.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from 'react'
-import { getTranslation, type Languages } from '@/i18n'
+import { type Languages, getTranslation } from '@/i18n'
 
 export const CodeCollapser: React.FC<{
   open?: boolean
@@ -24,7 +24,7 @@ export const CodeCollapser: React.FC<{
   }, [lang, open])
 
   return (
-    <details className="w-full my-6" open={open} onToggle={onToggle}>
+    <details className="my-6 w-full" open={open} onToggle={onToggle}>
       <summary>{summary}</summary>
 
       {children}

docs/src/components/Developer.tsx

@@ -7,17 +7,17 @@ export const Developer: React.FC<{
 }> = ({ avatar, name, homepage }) => {
   return (
     <a
-      className="flex items-center gap-2 h-8 mt-8 mb-2 no-underline hover:underline"
+      className="mb-2 mt-8 flex h-8 items-center gap-2 no-underline hover:underline"
       href={homepage}
       title={name}
       target="_blank"
       rel="noreferrer"
     >
-      <div className="w-7 h-7 rounded-full overflow-hidden">
-        <img className="w-full h-full object-fit" src={avatar} alt={name} />
+      <div className="size-7 overflow-hidden rounded-full">
+        <img className="size-full object-cover" src={avatar} alt={name} />
       </div>
 
-      <span className="text-lg font-600">{name}</span>
+      <span className="text-lg font-[600]">{name}</span>
     </a>
   )
 }

docs/src/components/StatisticalData.tsx

@@ -1,5 +1,5 @@
-import React, { useMemo } from 'react'
 import clsx from 'clsx'
+import React, { useMemo } from 'react'
 import pkg from '../../../package.json'
 import type { Languages } from '@/i18n'
 
@@ -56,7 +56,7 @@ const getContributors = async (cols = 10) => {
   try {
     const url = `https://contrib.nn.ci/api?repo=${repo}&cols=${cols}&no_bot`
     return await fetch(url).then((res) => res.text() || '')
-  } catch (e) {
+  } catch {
     return ''
   }
 }
@@ -99,7 +99,7 @@ export const Contributors: React.FC<{
     return lang === 'zh' ? '加载中...' : 'Loading…'
   }, [lang])
 
-  const cls = clsx('flex flex-wrap gap-6 w-full mt-6', {
+  const cls = clsx('mt-6 flex w-full flex-wrap gap-6', {
     '<lg:justify-center': !!items.length,
   })
 
@@ -117,11 +117,11 @@ export const Contributors: React.FC<{
             href={i.homepage}
             target="_blank"
             rel="noreferrer"
-            className="flex flex-col items-center no-underline group"
+            className="group flex flex-col items-center no-underline"
           >
-            <div className="w-16 h-16 rounded-full overflow-hidden group-hover:opacity-70 transition-opacity">
+            <div className="size-16 overflow-hidden rounded-full transition-opacity group-hover:opacity-70">
               <img
-                className="w-full h-full object-cover"
+                className="size-full object-cover"
                 src={i.avatar}
                 alt={i.username}
               />

docs/src/components/examples/Widgets.tsx

@@ -1,13 +1,13 @@
-import React, { useMemo } from 'react'
 import clsx from 'clsx'
-import { getTranslation, type Languages, type TranslationKey } from '@/i18n'
+import React, { useMemo } from 'react'
+import { type Languages, type TranslationKey, getTranslation } from '@/i18n'
 import {
-  RichText,
   ChineseRichText,
   ChineseStringText,
-  StringText,
-  ShorterStringText,
+  RichText,
   ShorterChineseStringText,
+  ShorterStringText,
+  StringText,
 } from './Data'
 
 export const DEFAULT_WIDTH_VALUE = 100
@@ -26,7 +26,7 @@ const ExampleContainer = React.forwardRef<
   return (
     <div
       ref={ref}
-      className="w-full box-border p-3 bg-[var(--sl-color-gray-6)] my-6"
+      className="my-6 box-border w-full bg-[var(--sl-color-gray-6)] p-3"
       style={{
         border:
           '1px solid color-mix(in srgb, var(--sl-color-gray-5), transparent 25%)',
@@ -50,14 +50,17 @@ const ExampleFormLabel: React.FC<ExampleFormLabelProps> = ({
   lang,
   labelKey,
 }) => {
-  const titleCls = clsx('flex flex-shrink-0', lang === 'zh' ? 'w-24' : 'w-34')
+  const titleCls = clsx(
+    'flex shrink-0',
+    lang === 'zh' ? 'w-[96px]' : 'w-[136px]',
+  )
   return <span className={titleCls}>{getTranslation(lang, labelKey)}</span>
 }
 
 const ExampleFormItem: React.FC<{
   children: React.ReactNode
 }> = ({ children }) => {
-  return <div className="flex items-center gap-3 my-6">{children}</div>
+  return <div className="my-6 flex items-center gap-3">{children}</div>
 }
 
 const inputCls = 'w-100 max-w-3/4 cursor-pointer'

docs/src/components/examples/middle-truncate/ControllableMiddleTruncate.tsx

@@ -1,13 +1,13 @@
-import React, { useState } from 'react'
 import { MiddleTruncate } from '@re-dev/react-truncate'
+import React, { useState } from 'react'
 import {
   DEFAULT_END_VALUE,
   DEFAULT_HTML_VALUE,
   DEFAULT_WIDTH_VALUE,
   EW,
 } from '@/components/examples/Widgets'
-import { useLang, type Languages } from '@/i18n'
 import { useRefreshKey } from '@/hooks/use-refresh-key'
+import { type Languages, useLang } from '@/i18n'
 
 export const ControllableMiddleTruncate: React.FC<{
   lang: Languages

docs/src/components/examples/show-more/BasicShowMore.tsx

@@ -1,7 +1,7 @@
-import React from 'react'
 import { ShowMore } from '@re-dev/react-truncate'
+import React from 'react'
 import { EW } from '@/components/examples/Widgets'
-import { useLang, type Languages } from '@/i18n'
+import { type Languages, useLang } from '@/i18n'
 
 export const BasicShowMore: React.FC<{
   lang: Languages