Effortless Index Files with VS Code
Why use index files?
If you lean heavily into Javascript/Typescript in your day-to-day coding you’ll be well aware of the pain of dealing with imports. Keeping track of the deeply nested files where you’ve saved reusable variables/functions can be exhausting and confusing. If the messy import statement shown below gives you anxiety then read on!
We could simplify the import above by creating an index.js file inside the ComponentOne directory as shown below. It acts as a table of contents of all the exportable variables and functions within its files.
Now, when we want to import NestedComponentOne, we don’t need to know its exact file location. Rather, we only need to know the root directory name it’s contained in. When a filename is not referenced within an import statement, Javascript and Typescript automatically looks for an index file to find what you’re looking for. It allows a clean import like this.
Simplifying your workflow
The only drawback to working with index files is manually keeping track of all the exportables within a directory. That’s what led me to creating Indexify! After installing the extension, all you have to do is right-click on any directory within your VS Code explorer and you’ll get the options to create either a shallow or deep index (the difference is explained below). One click and all your indexing is handled for you!
Indexify handles all new and old Javascript/Typescript/Node.js export formatting. It also automatically determines whether an index.js or index.ts file is required (based on whats being exported).
Creating a shallow index
Creating a shallow index will only include files in the root of the selected directory. All sub-directories within the selected folder will be ignored.
Creating a deep index
Creating a deep index will analyze all files and directories within the selected folder (no matter how deeply nested your files are — they’ll be indexed!).
Afterthoughts
If you find any bugs while using the extension please drop a comment either here or in the Visual Studio Marketplace and i’ll be happy to address it. I hope you find this extension as useful as I do.
You can find more details here: https://marketplace.visualstudio.com/items?itemName=JordanEckowitz.indexify
