tweak: improved eslint config

cypress/support/component.ts

@@ -1,8 +1,9 @@
-import "./commands";
 import { mount } from "cypress/react18";
 
 import "../../src/index.css";
 
+import "./commands";
+
 declare global {
   namespace Cypress {
     interface Chainable {

eslint.config.js

@@ -1,7 +1,8 @@
-import globals from "globals";
 import pluginJs from "@eslint/js";
-import tseslint from "typescript-eslint";
 import pluginReact from "eslint-plugin-react";
+import simpleImportSort from "eslint-plugin-simple-import-sort";
+import globals from "globals";
+import tseslint from "typescript-eslint";
 
 export default [
   { files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
@@ -18,5 +19,33 @@ export default [
   pluginJs.configs.recommended,
   ...tseslint.configs.recommended,
   pluginReact.configs.flat.recommended,
-  { rules: { "react/react-in-jsx-scope": "off" } },
+  {
+    plugins: {
+      "simple-import-sort": simpleImportSort,
+    },
+    rules: {
+      "no-console": "error",
+      "simple-import-sort/imports": [
+        "error",
+        {
+          groups: [
+            // React import
+            ["^react", "^react-dom"],
+            // External packages
+            ["^([a-z]|@[^/])+"],
+            // Internal paths starting with @/
+            ["^@/(?!assets).*"],
+            // Assets imports
+            ["^@/assets"],
+            // Style imports
+            ["^[./].*(?<!\\.(c|le|sc)ss)$"],
+            // CSS imports
+            ["\\.(c|le|sc)ss$"],
+          ],
+        },
+      ],
+      "simple-import-sort/exports": "error",
+      "react/react-in-jsx-scope": "off",
+    },
+  },
 ];

src/components/Header.cy.tsx

@@ -1,8 +1,10 @@
 import { mount } from "@cypress/react18";
-import { Header } from "./Header";
 import { createRouter, RouterContextProvider } from "@tanstack/react-router";
+
 import { routeTree } from "@/routeTree.gen";
 
+import { Header } from "./Header";
+
 describe("Header", () => {
   it("should render the header contents", () => {
     const router = createRouter({ routeTree });

src/components/Header.tsx

@@ -1,7 +1,8 @@
+import { Link } from "@tanstack/react-router";
 import { Github } from "lucide-react";
+
 import { ModeToggle } from "@/components";
 import { Button } from "@/components/ui";
-import { Link } from "@tanstack/react-router";
 
 export const Header: React.FC = () => {
   return (

src/components/mode-toggle.tsx

@@ -1,7 +1,7 @@
 import { Moon, Sun } from "lucide-react";
 
-import { Button } from "@/components/ui/button";
 import { useTheme } from "@/components/theme-provider";
+import { Button } from "@/components/ui/button";
 
 export function ModeToggle() {
   const { theme, setTheme } = useTheme();

src/lib/utils.test.ts

@@ -1,6 +1,7 @@
-import { add } from "./utils";
 import { expect, test } from "vitest";
 
+import { add } from "./utils";
+
 test("adds 1 + 2 to equal 3", () => {
   expect(add(1, 2)).toBe(3);
 });

src/lib/utils.ts

@@ -1,4 +1,4 @@
-import { clsx, type ClassValue } from "clsx";
+import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {

src/main.tsx

@@ -1,9 +1,12 @@
 import { StrictMode } from "react";
 import ReactDOM from "react-dom/client";
-import { RouterProvider, createRouter } from "@tanstack/react-router";
 
-import { routeTree } from "./routeTree.gen";
+import { createRouter, RouterProvider } from "@tanstack/react-router";
+
 import { ThemeProvider } from "@/components/theme-provider";
+
+import { routeTree } from "./routeTree.gen";
+
 import "./index.css";
 
 const router = createRouter({ routeTree });

src/routes/__root.tsx

@@ -1,7 +1,8 @@
-import { Footer, Header } from "@/components";
 import { createRootRoute, Outlet } from "@tanstack/react-router";
 import { TanStackRouterDevtools } from "@tanstack/router-devtools";
 
+import { Footer, Header } from "@/components";
+
 export const Route = createRootRoute({
   component: () => (
     <>

src/routes/index.lazy.tsx

@@ -1,4 +1,5 @@
-import dog from "@/assets/dog.jpg";
+import { createLazyFileRoute } from "@tanstack/react-router";
+
 import {
   AlertDialog,
   AlertDialogAction,
@@ -10,7 +11,8 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "@/components/ui";
-import { createLazyFileRoute } from "@tanstack/react-router";
+
+import dog from "@/assets/dog.jpg";
 
 export const Route = createLazyFileRoute("/")({
   component: Index,

vite.config.ts

@@ -1,7 +1,7 @@
-import { defineConfig } from "vite";
-import path from "path";
-import react from "@vitejs/plugin-react";
 import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
+import react from "@vitejs/plugin-react";
+import path from "path";
+import { defineConfig } from "vite";
 
 // https://vitejs.dev/config/
 export default defineConfig({