Add linting

Author: RBogie

eslint.config.mjs

@@ -0,0 +1,30 @@
+import eslint from '@eslint/js'
+import prettierConfig from 'eslint-config-prettier'
+import tseslint from 'typescript-eslint'
+import tailwind from 'eslint-plugin-tailwindcss'
+
+export default tseslint.config(
+  eslint.configs.recommended,
+  ...tseslint.configs.recommendedTypeChecked,
+  ...tailwind.configs['flat/recommended'],
+  {
+    languageOptions: {
+      parserOptions: {
+        projectService: true,
+        tsconfigRootDir: import.meta.dirname,
+      },
+    },
+  },
+  prettierConfig,
+  {
+    // Note: there should be no other properties in this object
+    ignores: [
+      'dist',
+      'src-tauri',
+      'eslint.config.mjs',
+      'postcss.config.js',
+      'tailwind.config.js',
+      'vite.config.ts',
+    ],
+  },
+)

package.json

@@ -8,6 +8,7 @@
     "build": "tsc && vite build",
     "preview": "vite preview",
     "tauri": "tauri",
+    "lint": "eslint . && cd src-tauri && cargo clippy",
     "format": "prettier . --write && cd src-tauri && cargo fmt",
     "format:check": "prettier . --check && cd src-tauri && cargo fmt --check"
   },
@@ -26,15 +27,20 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
+    "@eslint/js": "^9.17.0",
     "@tauri-apps/cli": "^2",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
+    "eslint": "^9.17.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-tailwindcss": "^3.17.5",
     "postcss": "^8.4.49",
     "prettier": "^3.4.2",
     "tailwindcss": "^3.4.17",
-    "typescript": "~5.6.2",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.18.2",
     "vite": "^6.0.3"
   }
 }

src/components/Checkbox.tsx

@@ -33,7 +33,7 @@ export default function Checkbox({ title, value, onChange }: CheckboxProps) {
       >
         <span
           aria-hidden="true"
-          className="pointer-events-none inline-block size-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out group-data-[checked]:translate-x-5"
+          className="pointer-events-none inline-block size-5 rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out group-data-[checked]:translate-x-5"
         />
       </Switch>
     </Field>

src/components/SettingsProvider.tsx

@@ -8,7 +8,7 @@ export default function SettingsProvider({ children }: PropsWithChildren) {
 
   useEffect(() => {
     let unlistenFn: UnlistenFn | undefined
-    ;(async () => {
+    void (async () => {
       setSettings(await invoke('get_settings'))
 
       unlistenFn = await listen<Settings>('settings_update', (event) => {

src/components/ThemeMetaSwitcher.tsx

@@ -10,7 +10,6 @@ export default function ThemeMetaSwitcher({ children }: PropsWithChildren) {
       theme.isDark ? 'dark' : 'light',
     )
     // trigger reflow so that overflow style is applied
-    document.body.clientWidth
     document.documentElement.style.display = ''
   }, [theme.isDark])
   return children

src/containers/CodeEditor.tsx

@@ -56,8 +56,8 @@ function CodeEditor() {
   const sortedLanguages = useSortedLanguages()
 
   return (
-    <div className="size-full grid grid-rows-[1fr_auto]">
-      <div className="overflow-auto h-full overscroll-contain">
+    <div className="grid size-full grid-rows-[1fr_auto]">
+      <div className="h-full overflow-auto overscroll-contain">
         <CodeMirror
           onUpdate={onUpdateHandler}
           extensions={extensions}

src/containers/Settings.tsx

@@ -13,7 +13,7 @@ function Settings() {
 
   return (
     <div
-      className="size-full flex flex-col p-8 gap-4"
+      className="flex size-full flex-col gap-4 p-8"
       style={{ backgroundColor: theme.background }}
     >
       <Dropdown

src/modules/useTheme.tsx

@@ -17,7 +17,7 @@ export default function useTheme() {
 
   useEffect(() => {
     let unlisten: UnlistenFn | undefined
-    ;(async () => {
+    void (async () => {
       const window = getCurrentWindow()
       setSystemTheme((await window.theme()) ?? 'light')