When dealing with a complex code base, especially with Javascript, you likely have an index file that just contains a million exports. Ordinarily, if there’s a pattern of any kind, we can program something to automatically handle it. But in this case, we’re dealing with physical files that become more and more difficult to programmatically deal with.
The problem:
Every time a new file is introduced, we have to go add it to the index file
Patterns dealing with physical files are annoying to deal with
This doesn’t feel like something a programmer should have to manually do
The solution:
Generate Index
Generate Index is a plugin for VS Code that uses minimatch patterns to find physical files, and generates code based on your output pattern. The more I use this plugin, the more automated a lot of my boring code generation has become. The below example is from the author’s repo:
How to Use
1. After installing the plugin, in the example above, generating an index starts with an @index comment, followed by your pattern. This pattern is minimatch based, and can get as complicated as you want. In my example below, I’m using it to actually import very specifically named dependencies:
And the output would be:
2. To run the generate command, open the command palette and run “Generate Index”
3. It will overwrite anything inside of the index block. So if you want it to end at a certain point, add this at the bottom of your automated area:
// @endindexThe Opportunity
I’ve been using Generate Index on more things than imports/exports. The more you use it, the more opportunities you’ll start to see. My team has been getting really creative with them, and uses them outside the index scope. Here are some examples.
This pattern looks for any Typescript files that have an .event.ts or .events.ts extension, in a
specific directory, and assumes that they have an export inside of them named after each file’s suffix. It then adds a line that “registers” them to this custom system object.
This pattern is an example of needing to use proper indentation on the generated lines, because it bypasses the auto-formatters in some use-cases.
Automating the Automation
You might be thinking that since we’re using Generate Index in a bunch of places, now we have to go into all these places and manually trigger the index a million times! Normally, you’d be right. But luckily, I lied at the beginning of this post. You actually don’t even need VS Code to use this, but it’s great for when you need to troubleshoot your index commands.
There’s actually a standalone version of this that the original author created, so it can be installed via npm/yarn:
# npm
npx vscode-generate-index-standalone src/ scripts/
# yarn
yarn vscode-generate-index-standalone src/ scripts/Then you can programmatically call it in your code base (instructions in the readme).
Or you can do what I do, which is run it every time I start the project, which is then part of the Continuous Integration stack by default. For example, if you use git-hooks, in your pre-commit and start-hook file, add this line in:
npx vscode-generate-index-standalone ./App/**Then, all your indexes will auto generate every time you start up your project! If you missed any, they’ll be added when your CI stack builds the project.
Generate Index is fun to use, saves a lot of time in the long-run, and works exactly as well as the patterns you create. If you want to talk more about indexes, you can reach out to me in our Bravo LT Discord server!
This post is brought to you by David Crawford, mobile app developer.
Comments