From 7e31422724635757485e60fb06b119f64d3381b0 Mon Sep 17 00:00:00 2001 From: jcserv Date: Sun, 26 Jan 2025 12:08:21 -0500 Subject: [PATCH] tweak: improved eslint config --- cypress/support/component.ts | 3 ++- eslint.config.js | 35 +++++++++++++++++++++++++++++++--- src/components/Header.cy.tsx | 4 +++- src/components/Header.tsx | 3 ++- src/components/mode-toggle.tsx | 2 +- src/lib/utils.test.ts | 3 ++- src/lib/utils.ts | 2 +- src/main.tsx | 7 +++++-- src/routes/__root.tsx | 3 ++- src/routes/index.lazy.tsx | 6 ++++-- vite.config.ts | 6 +++--- 11 files changed, 57 insertions(+), 17 deletions(-) diff --git a/cypress/support/component.ts b/cypress/support/component.ts index 4423dbb..4df8433 100644 --- a/cypress/support/component.ts +++ b/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 { diff --git a/eslint.config.js b/eslint.config.js index 642c453..1ffd28f 100644 --- a/eslint.config.js +++ b/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 + ["^[./].*(? { it("should render the header contents", () => { const router = createRouter({ routeTree }); diff --git a/src/components/Header.tsx b/src/components/Header.tsx index a69cc65..c3c414a 100644 --- a/src/components/Header.tsx +++ b/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 ( diff --git a/src/components/mode-toggle.tsx b/src/components/mode-toggle.tsx index 2a02f55..df9d229 100644 --- a/src/components/mode-toggle.tsx +++ b/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(); diff --git a/src/lib/utils.test.ts b/src/lib/utils.test.ts index df80772..5512624 100644 --- a/src/lib/utils.test.ts +++ b/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); }); diff --git a/src/lib/utils.ts b/src/lib/utils.ts index d9d3122..9595b5c 100644 --- a/src/lib/utils.ts +++ b/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[]) { diff --git a/src/main.tsx b/src/main.tsx index 317592d..acf2ef5 100644 --- a/src/main.tsx +++ b/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 }); diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx index 39c1d4b..704b56e 100644 --- a/src/routes/__root.tsx +++ b/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: () => ( <> diff --git a/src/routes/index.lazy.tsx b/src/routes/index.lazy.tsx index a5a27ce..bed7c2c 100644 --- a/src/routes/index.lazy.tsx +++ b/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, diff --git a/vite.config.ts b/vite.config.ts index 3046f69..a38d63f 100644 --- a/vite.config.ts +++ b/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({