Resolve file with same name as folder as index

Suggestion

🔍 Search Terms

Filename matches containing directory (folder), resolves index (default) for directory

default filename match parent folder directory in addition to index

✅ Viability Checklist

My suggestion meets these guidelines:

• This wouldn’t be a breaking change in existing TypeScript/JavaScript code
• This wouldn’t change the runtime behavior of existing JavaScript code
• This could be implemented without emitting different JS based on the types of the expressions
• This isn’t a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
• This feature would agree with the rest of TypeScript’s Design Goals (suits 10, and 11 well).

⭐ Suggestion

Use the containing folder name as the index.tsx (for example, MyComponent/MyComponent.tsx) in addition to index.tsx (or index.ts), to improve IDE experiences, especially in VS Code.

📃 Motivating Example

It’d be great to be able to see the context provided by non-generic filenames in tab names, open files panel, and the search results panel, instead of a sea of index.ts[x] files, or be able to quickly open a module or component file by file name with the cmd+p menu in VS Code or other editors. VS Code does add a bit of context, but this gets quickly obscured when many files are opened, especially on laptop screens.

There are also issues with debugging/logging with sourcemaps in Chrome/Firefox/whatever, where all output or break point comes from index.ts[x] and browsers do a far WORSE job of providing additional context than does VS Code.

💻 Use Cases

When working with large projects, intended for compilation rather than use in node.js (source code projects), such as any large React component project, with css modules, storybook files, tests, etc., files tend to be grouped by component or module name, with the main file getting called index.ts[x]. This may even be lovely in node.js based apps, and a compilation step could be used to rename those files to index.js for node js.

The shortcomings of the current approach are simply that in a deeply nested module organization of source code, every file ends up with the same name - index - which doesn’t provide enough meaning in an editor environment.

The only workaround I use now is to rely on the existence of an adjacent file (like MyComponent.module.scss) to open, and fine the file next to it, but this is not a great workaround for the search panel - in that case, I have to simply make my search results super wide, to find that context, where a filename that matched the component directory name would make things much clearer.

There is a webpack plugin for .js projects, but I’m not aware of anything compatible with TypeScript, and it’d be great if we had this as a default, well supported option. My team prefers (and I entirely agree) to stick with idiomatic patterns. Adding this to typescript proper would help make it an idiomatic option for typescript projects.

Technical note

This would basically add extra steps to module resolution:

1. /root/src/moduleB.ts
2. /root/src/moduleB.tsx
3. /root/src/moduleB.d.ts
4. /root/src/moduleB/package.json (if it specifies a "types" property)
5. /root/src/moduleB/index.ts
6. /root/src/moduleB/index.tsx
7. /root/src/moduleB/index.d.ts
8. /root/src/moduleB/index.ts
9. /root/src/moduleB/index.tsx
10. /root/src/moduleB/index.d.ts
** New Steps
11. /root/src/moduleB/moduleB.ts
12. /root/src/moduleB/moduleB.tsx
13. /root/src/moduleB/moduleB.d.ts

An example image of search results with many index.tsx files (this is from a non-webpack js project we are starting to convert to ts[x], but it shows the same issue):

This shows the tabs - note how much space is wasted (fewer tabs can be shown at once):

Open Editors:

[fatcerberus]

Is there any environment where this works at runtime? TypeScript’s module resolution is specifically designed to work exactly how it would at runtime, so the compiler can leave your directory structure and filenames alone.

[lramos15]

@TylerLeonhardt A large feature request I have is https://github.com/microsoft/vscode/issues/41909 which is similar in nature but only for the tabs themselves. This seems a bit more complex.