Force imports ordering with eslint

skryukov · skryukov · commit 5e31661ee1fd · 2025-03-18T13:49:09.000+03:00
diff --git a/.prettierrc b/.prettierrc
@@ -3,12 +3,7 @@
   "semi": false,
   "tabWidth": 2,
   "trailingComma": "all",
-  "importOrder": ["^@/(.*)$", "^[./]"],
-  "importOrderSeparation": true,
-  "importOrderSortSpecifiers": true,
   "plugins": [
-    "prettier-plugin-organize-imports",
-    "prettier-plugin-tailwindcss",
-    "@trivago/prettier-plugin-sort-imports"
+    "prettier-plugin-tailwindcss"
   ]
 }
diff --git a/app/frontend/components/ui/avatar.tsx b/app/frontend/components/ui/avatar.tsx
@@ -50,4 +50,4 @@ function AvatarFallback({
   )
 }
 
-export { Avatar, AvatarImage, AvatarFallback }
+export { Avatar, AvatarFallback, AvatarImage }
diff --git a/app/frontend/components/ui/breadcrumb.tsx b/app/frontend/components/ui/breadcrumb.tsx
@@ -100,10 +100,10 @@ function BreadcrumbEllipsis({
 
 export {
   Breadcrumb,
-  BreadcrumbList,
+  BreadcrumbEllipsis,
   BreadcrumbItem,
   BreadcrumbLink,
+  BreadcrumbList,
   BreadcrumbPage,
   BreadcrumbSeparator,
-  BreadcrumbEllipsis,
 }
diff --git a/app/frontend/components/ui/card.tsx b/app/frontend/components/ui/card.tsx
@@ -83,10 +83,10 @@ function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
 
 export {
   Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
   CardAction,
-  CardDescription,
   CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
 }
diff --git a/app/frontend/components/ui/collapsible.tsx b/app/frontend/components/ui/collapsible.tsx
@@ -28,4 +28,4 @@ function CollapsibleContent({
   )
 }
 
-export { Collapsible, CollapsibleTrigger, CollapsibleContent }
+export { Collapsible, CollapsibleContent, CollapsibleTrigger }
diff --git a/app/frontend/components/ui/dropdown-menu.tsx b/app/frontend/components/ui/dropdown-menu.tsx
@@ -240,18 +240,18 @@ function DropdownMenuSubContent({
 
 export {
   DropdownMenu,
-  DropdownMenuPortal,
-  DropdownMenuTrigger,
+  DropdownMenuCheckboxItem,
   DropdownMenuContent,
   DropdownMenuGroup,
-  DropdownMenuLabel,
   DropdownMenuItem,
-  DropdownMenuCheckboxItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
   DropdownMenuSub,
-  DropdownMenuSubTrigger,
   DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
 }
diff --git a/app/frontend/components/ui/navigation-menu.tsx b/app/frontend/components/ui/navigation-menu.tsx
@@ -157,12 +157,12 @@ function NavigationMenuIndicator({
 
 export {
   NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
   NavigationMenuContent,
-  NavigationMenuTrigger,
-  NavigationMenuLink,
   NavigationMenuIndicator,
-  NavigationMenuViewport,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
   navigationMenuTriggerStyle,
+  NavigationMenuViewport,
 }
diff --git a/app/frontend/components/ui/sheet.tsx b/app/frontend/components/ui/sheet.tsx
@@ -127,11 +127,11 @@ function SheetDescription({
 
 export {
   Sheet,
-  SheetTrigger,
   SheetClose,
   SheetContent,
-  SheetHeader,
+  SheetDescription,
   SheetFooter,
+  SheetHeader,
   SheetTitle,
-  SheetDescription,
+  SheetTrigger,
 }
diff --git a/app/frontend/components/ui/sidebar.tsx b/app/frontend/components/ui/sidebar.tsx
@@ -1,8 +1,8 @@
 "use client"
 
 import { Slot } from "@radix-ui/react-slot"
-import type { VariantProps } from "class-variance-authority"
 import { cva } from "class-variance-authority"
+import type { VariantProps } from "class-variance-authority"
 import { PanelLeftIcon } from "lucide-react"
 import * as React from "react"
 
diff --git a/app/frontend/components/ui/tooltip.tsx b/app/frontend/components/ui/tooltip.tsx
@@ -56,4 +56,4 @@ function TooltipContent({
   )
 }
 
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }
diff --git a/app/frontend/pages/home/index.tsx b/app/frontend/pages/home/index.tsx
@@ -1,6 +1,6 @@
 import { Head, Link, usePage } from "@inertiajs/react"
 
-import AppLogoIcon from "@/components/app-logo-icon.tsx"
+import AppLogoIcon from "@/components/app-logo-icon"
 import { dashboardPath, signInPath } from "@/routes"
 import type { SharedData } from "@/types"
 
diff --git a/eslint.config.js b/eslint.config.js
@@ -1,21 +1,22 @@
-import globals from "globals";
-import pluginJs from "@eslint/js";
-import tseslint from "typescript-eslint";
-import pluginReact from "eslint-plugin-react";
-import prettierConfig from 'eslint-config-prettier';
+import pluginJs from "@eslint/js"
+import prettierConfig from "eslint-config-prettier"
+import importPlugin from "eslint-plugin-import"
+import pluginReact from "eslint-plugin-react"
+import globals from "globals"
+import tseslint from "typescript-eslint"
 
 /** @type {import('eslint').Linter.Config[]} */
 export default [
-  {files: ["app/frontend/**/*.{js,mjs,cjs,ts,jsx,tsx}"]},
-  {ignores: ["app/frontend/routes/*"]},
+  { files: ["app/frontend/**/*.{js,mjs,cjs,ts,jsx,tsx}"] },
+  { ignores: ["app/frontend/routes/*"] },
   {
     settings: {
       react: {
-        version: 'detect',
+        version: "detect",
       },
     },
     languageOptions: {
-      globals: {...globals.browser, ...globals.node},
+      globals: { ...globals.browser, ...globals.node },
       parserOptions: {
         projectService: true,
         tsconfigRootDir: import.meta.dirname,
@@ -26,15 +27,32 @@ export default [
   ...tseslint.configs.stylisticTypeChecked,
   ...tseslint.configs.recommendedTypeChecked,
   pluginReact.configs.flat.recommended,
-  pluginReact.configs.flat['jsx-runtime'],
+  pluginReact.configs.flat["jsx-runtime"],
   prettierConfig,
   {
+    ...importPlugin.flatConfigs.recommended,
+    ...importPlugin.flatConfigs.typescript,
     rules: {
-      "@typescript-eslint/consistent-type-imports": "error"
-    }
+      "import/order": [
+        "error",
+        {
+          pathGroups: [
+            {
+              pattern: "@/**",
+              group: "external",
+              position: "after",
+            },
+          ],
+          "newlines-between": "always",
+          alphabetize: { order: "asc" },
+        },
+      ],
+      "import/first": "error",
+      "import/extensions": ["error", "never"],
+    },
   },
   {
+    files: ["**/*.js"],
     ...tseslint.configs.disableTypeChecked,
-    files: ['**/*.js'],
-  }
-];
+  },
+]
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json

Original file line number	Diff line number	Diff line change
`@@ -3,12 +3,7 @@`
`3`	`3`	`"semi": false,`
`4`	`4`	`"tabWidth": 2,`
`5`	`5`	`"trailingComma": "all",`
`6`		`- "importOrder": ["^@/(.*)$", "^[./]"],`
`7`		`- "importOrderSeparation": true,`
`8`		`- "importOrderSortSpecifiers": true,`
`9`	`6`	`"plugins": [`
`10`		`- "prettier-plugin-organize-imports",`
`11`		`- "prettier-plugin-tailwindcss",`
`12`		`- "@trivago/prettier-plugin-sort-imports"`
	`7`	`+ "prettier-plugin-tailwindcss"`
`13`	`8`	`]`
`14`	`9`	`}`
Original file line number	Diff line number	Diff line change
`@@ -50,4 +50,4 @@ function AvatarFallback({`
`50`	`50`	`)`
`51`	`51`	`}`
`52`	`52`
`53`		`-export { Avatar, AvatarImage, AvatarFallback }`
	`53`	`+export { Avatar, AvatarFallback, AvatarImage }`
Original file line number	Diff line number	Diff line change
`@@ -28,4 +28,4 @@ function CollapsibleContent({`
`28`	`28`	`)`
`29`	`29`	`}`
`30`	`30`
`31`		`-export { Collapsible, CollapsibleTrigger, CollapsibleContent }`
	`31`	`+export { Collapsible, CollapsibleContent, CollapsibleTrigger }`
Original file line number	Diff line number	Diff line change
`@@ -56,4 +56,4 @@ function TooltipContent({`
`56`	`56`	`)`
`57`	`57`	`}`
`58`	`58`
`59`		`-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }`
	`59`	`+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }`