🚀 Inertia IntelliSense
Supercharge your Inertia.js development experience in VS Code
✨ Features
📌 Intelligent Hyperlinks
Jump directly to component files with clickable links
No more manual searches through directories!
|
⚡ Smart Autocompletion
Domain-aware component suggestions as you type
Complete the right component name every time
|
🧩 Domain Support
Navigate modular architectures with ease
Perfect for domain-driven design approaches
|
🔧 Highly Configurable
Adapt to any project structure or convention
Works with your preferred setup
|
📦 Installation
# Via VS Code UI
# Search for "Inertia IntelliSense" in Extensions view
# Or via command line
code --install-extension jaush-m.inertia-intellisense
🛠️ Configuration
Component Groups
Defines how the extension should locate and identify your Inertia components.
"inertia.componentGroups": [
{
"glob": "resources/js/domains/*/pages/**/*.tsx", // Where to find components
"domainDir": "domains", // Domain directory identifier
"pagesDir": "pages" // Pages subdirectory
}
]
Directory Structure Example
resources/js/
├── domains/
│ ├── admin/
│ │ └── pages/
│ │ ├── dashboard.tsx // [admin]::dashboard
│ │ └── users.tsx // [admin]::users
│ ├── user/
│ │ └── pages/
│ │ ├── profile.tsx // [user]::profile
│ │ └── settings.tsx // [user]::settings
│ └── main/
│ │ └── pages/
│ │ └── welcome.tsx // welcome or [main]::welcome
│
⚙️ Additional Settings
| ⚙️ Setting |
📝 Purpose |
🔧 Default |
inertia.defaultDomain |
Domain to use when not specified explicitly |
"main" |
inertia.domainSeparator |
The separator between domain and component path
Must match your Inertia setup |
"::" |
inertia.domainDelimiters |
Array of delimiters used to wrap domain names in component strings |
[{start: "[", end: "]"}] |
inertia.fallbackPath |
Fallback Path if no domains are found |
"resources/js/pages/**/*.{tsx,jsx,vue}" |
inertia.pathSeparators |
Symbols that separate path segments within components |
["."] |
inertia.defaultExtension |
File extension for new components
Adapt for React (.tsx), Vue (.vue), etc. |
".tsx" |
🔍 Usage Examples
In PHP Files
// Clickable link + autocompletion for:
return Inertia::render('[Admin]::Dashboard', [
'stats' => $dashboardStats,
]);
React Setup with Domains
import { createInertiaApp } from "@inertiajs/react";
import { createRoot } from "react-dom/client";
createInertiaApp({
// This pattern works with the default configuration
resolve: (name) =>
resolvePageComponent(
name,
import.meta.glob("../domains/*/pages/**/*.tsx", { eager: false })
),
setup({ el, App, props }) {
createRoot(el).render(<App {...props} />);
},
});
🔄 Component Resolution Examples
| Component Name |
Resolves To |
[admin]::dashboard |
resources/js/domains/admin/pages/dashboard.tsx |
[user]::profile |
resources/js/domains/user/pages/profile.tsx |
welcome |
resources/js/domains/main/pages/welcome.tsx |
License
Released under the MIT License.
