Merge pull request #434 from taeuscherpferd/Add-ESLint-File-Import-Organization-Rule

feat: Add eslint file import organization rule

Author: bbohlender

.eslintrc

@@ -18,12 +18,31 @@
     "plugin:import/recommended",
     "plugin:@react-three/recommended"
   ],
-  "plugins": ["@typescript-eslint", "react", "react-hooks", "import", "prettier", "@react-three"],
+  "plugins": [ "@typescript-eslint", "react", "react-hooks", "import", "unused-imports", "prettier", "@react-three" ],
   "rules": {
     "import/no-unresolved": "off",
     "import/named": "off",
     "import/namespace": "off",
     "import/no-named-as-default-member": "off",
-    "import/extensions": ["error", "ignorePackages"]
+    "import/extensions": [ "error", "ignorePackages" ],
+
+    "import/order": ["error", {
+      "groups": [
+        "builtin",
+        "external",
+        "internal",
+        ["parent", "sibling", "index"],
+        "object",
+        "type"
+      ],
+      "newlines-between": "never",
+      "alphabetize": {
+        "order": "asc",
+        "caseInsensitive": true
+      }
+    }],
+
+    // "simple-import-sort/imports": "error",
+    "unused-imports/no-unused-imports": "error"
   }
-}
+}

.vscode/settings.json

@@ -0,0 +1,14 @@
+{
+  // enable ESLint only for this workspace
+  "eslint.enable": true,
+
+  // Run the equivalent of `eslint --fix` each time you save
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+
+  // Disable the built‑in “Organize Imports” so it doesn’t fight ESLint
+  "editor.formatOnSave": false,
+  "typescript.preferences.organizeImports": false,
+}
+

examples/demo-controller/app.tsx

@@ -1,10 +1,10 @@
+import { XRControllerGamepadComponentId, XRControllerLayout, getXRControllerComponentObject } from '@pmndrs/xr'
+import { Environment, OrbitControls } from '@react-three/drei'
 import { Canvas, createPortal, ThreeElements, useFrame } from '@react-three/fiber'
+import { Container, Root, Text } from '@react-three/uikit'
 import { useLoadXRControllerLayout, useLoadXRControllerModel } from '@react-three/xr'
-import { XRControllerGamepadComponentId, XRControllerLayout, getXRControllerComponentObject } from '@pmndrs/xr'
 import { PropsWithChildren, Suspense, useEffect, useRef, useState } from 'react'
 import { Group, MeshBasicMaterial, Object3D } from 'three'
-import { Environment, OrbitControls } from '@react-three/drei'
-import { Container, Root, Text } from '@react-three/uikit'
 
 export function App() {
   return (

examples/demo-controller/index.tsx

@@ -1,6 +1,6 @@
+import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { App } from './app.js'
-import { StrictMode } from 'react'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>

examples/demo-controller/package.json

@@ -5,6 +5,8 @@
         "@react-three/xr": "workspace:~"
     },
     "scripts": {
-        "dev": "vite --host"
+        "dev": "vite --host",
+        "check:eslint": "eslint \"*.{ts,tsx}\"",
+        "fix:eslint": "eslint \"*.{ts,tsx}\" --fix"
     }
-}
+}

examples/demo-controller/vite.config.ts

@@ -1,6 +1,6 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
 import basicSsl from '@vitejs/plugin-basic-ssl'
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({

examples/editor/app.tsx

@@ -1,4 +1,8 @@
+import { applyDampedScreenCameraState, defaultApply, HandleState, HandleStore } from '@pmndrs/handle'
+import { getVoidObject, PointerEventsMap, PointerEvent } from '@pmndrs/pointer-events'
+import { PositionalAudio, RoundedBox, useGLTF } from '@react-three/drei'
 import { Canvas, Color, extend, RootState, useFrame, useThree } from '@react-three/fiber'
+import { OrbitHandles, Handle, HandleTarget, createScreenCameraStore, PivotHandles } from '@react-three/handle'
 import {
   createXRStore,
   IfInSessionMode,
@@ -13,15 +17,8 @@ import {
   XRLayer,
   XROrigin,
 } from '@react-three/xr'
-import { PositionalAudio, RoundedBox, useGLTF } from '@react-three/drei'
-import {
-  OrbitHandles,
-  Handle,
-  HandleTarget,
-  createScreenCameraStore,
-  ScreenCameraStateAndFunctions,
-  PivotHandles,
-} from '@react-three/handle'
+import { MeshLineGeometry, MeshLineMaterial } from 'meshline'
+import { CopyPass, EffectComposer, RenderPass, ShaderPass } from 'postprocessing'
 import {
   ComponentPropsWithoutRef,
   CSSProperties,
@@ -53,18 +50,8 @@ import {
   PositionalAudio as PAudio,
   BackSide,
 } from 'three'
-import { create } from 'zustand'
-import {
-  applyDampedScreenCameraState,
-  defaultApply,
-  defaultOrbitHandlesScreenCameraApply,
-  HandleState,
-  HandleStore,
-} from '@pmndrs/handle'
 import { damp } from 'three/src/math/MathUtils.js'
-import { getVoidObject, PointerEventsMap, PointerEvent } from '@pmndrs/pointer-events'
-import { CopyPass, EffectComposer, RenderPass, ShaderPass } from 'postprocessing'
-import { MeshLineGeometry, MeshLineMaterial } from 'meshline'
+import { create } from 'zustand'
 
 function createDefaultTransformation(x: number, y: number, z: number) {
   return {

examples/editor/index.tsx

@@ -1,6 +1,6 @@
+import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { App } from './app.js'
-import { StrictMode } from 'react'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>

examples/editor/package.json

@@ -10,6 +10,8 @@
   },
   "scripts": {
     "dev": "vite --host",
-    "build": "vite build"
+    "build": "vite build",
+    "check:eslint": "eslint \"*.{ts,tsx}\"",
+    "fix:eslint": "eslint \"*.{ts,tsx}\" --fix"
   }
 }

examples/editor/vite.config.ts

@@ -1,6 +1,6 @@
-import { defineConfig } from 'vite'
-import react from '@vitejs/plugin-react'
 import basicSsl from '@vitejs/plugin-basic-ssl'
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
 
 // https://vitejs.dev/config/
 export default defineConfig({