sync eslint and prettier config

.eslintrc.js

@@ -17,13 +17,22 @@ module.exports = {
     ecmaVersion: 'latest',
     sourceType: 'module',
   },
-  plugins: ['@typescript-eslint'],
+  plugins: ['@typescript-eslint', 'unused-imports'],
   rules: {
     'react-hooks/exhaustive-deps': 'off',
     'react/react-in-jsx-scope': 'off',
     'no-unused-vars': 'off',
+    "unused-imports/no-unused-imports": "error",
+    "unused-imports/no-unused-vars": [
+      "warn",
+      {
+        "vars": "all",
+        "varsIgnorePattern": "^_",
+        "args": "after-used",
+        "argsIgnorePattern": "^_"
+      }
+    ],
     '@typescript-eslint/no-unused-vars': ['error'],
-    '@typescript-eslint/no-empty-interface': 'off',
     '@typescript-eslint/no-explicit-any': 'off',
     'require-jsdoc': 'off',
     'spaced-comment': 'off',

.prettierrc.json

@@ -1,9 +1,29 @@
 {
-  "tabWidth": 2,
   "semi": true,
+  "tabWidth": 2,
   "singleQuote": true,
+  "useTabs": false,
+  "printWidth": 100,
   "jsxSingleQuote": true,
   "trailingComma": "es5",
   "bracketSpacing": true,
-  "arrowParens": "always"
+  "arrowParens": "always",
+  "plugins": [
+    "@ianvs/prettier-plugin-sort-imports",
+    "prettier-plugin-tailwindcss"
+  ],
+  "importOrder": [
+    "^(react/(.*)$)|^(react$)",
+    "^(next/(.*)$)|^(next$)",
+    "<THIRD_PARTY_MODULES>",
+    "",
+    "^@/(.*)$",
+    "",
+    "^~/",
+    "^[../]",
+    "^[./]"
+  ],
+  "importOrderParserPlugins": ["typescript", "jsx", "decorators-legacy"],
+  "importOrderTypeScriptVersion": "5.1.6",
+  "tailwindFunctions": ["cn", "cva"]
 }

app/about/loading.tsx

@@ -2,7 +2,7 @@ import { Skeleton } from '@/components/custom/skeleton';
 
 export default function Loading() {
   return (
-    <section className='flex justify-center h-full pt-20 px-4'>
+    <section className='flex h-full justify-center px-4 pt-20'>
       <Skeleton numberOfRows={10} />
     </section>
   );

app/about/page.tsx

@@ -1,17 +1,18 @@
+import { SiDiscord } from 'react-icons/si';
 import ReactMarkdown from 'react-markdown';
-import content from '../../public/features/about.md';
+
 import SocialLinkButton from '../../components/custom/social-link-button';
-import { SiDiscord } from 'react-icons/si';
+import content from '../../public/features/about.md';
 
 export default async function AboutPage() {
   return (
     <main className='flex flex-col items-center'>
       <article
         data-testid='content-article'
-        className='leading-normal w-10/12 pt-16 lg:pt-32 pb-24'
+        className='w-10/12 pb-24 pt-16 leading-normal lg:pt-32'
       >
         <ReactMarkdown>{content}</ReactMarkdown>
-        <div className='sticky z-40 bottom-4 w-full flex gap-2 justify-center px-2 mt-2'>
+        <div className='sticky bottom-4 z-40 mt-2 flex w-full justify-center gap-2 px-2'>
           <SocialLinkButton
             content='Join Discord Community'
             icon={<SiDiscord />}

app/add-level/loading.tsx

@@ -2,7 +2,7 @@ import { Skeleton } from '@/components/custom/skeleton';
 
 export default function Loading() {
   return (
-    <section className='flex justify-center h-full w-full pt-20 px-4'>
+    <section className='flex h-full w-full justify-center px-4 pt-20'>
       <Skeleton numberOfRows={10} />
     </section>
   );