Repository: vscode
Issue: Resolve file with same name as folder as index
Labels: feature-request,search,open-editors,quick-open

# Suggestion

<!--
  Please fill in each section completely. Thank you!
-->

## 🔍 Search Terms

Filename matches containing directory (folder), resolves index (default) for directory

<!--
  💡 Did you know? TypeScript has over 2,000 open suggestions!
  🔎 Please search thoroughly before logging new feature requests as most common ideas already have a proposal in progress.
  The "Common Feature Requests" section of the FAQ lists many popular requests: https://github.com/Microsoft/TypeScript/wiki/FAQ#common-feature-requests

  Replace the text below:
-->

default filename match parent folder directory in addition to index

## ✅ Viability Checklist

<!--
   Suggestions that don't meet all these criteria are very, very unlikely to be accepted.
   We always recommend reviewing the TypeScript design goals before investing time writing
   a proposal for ideas outside the scope of the project.
-->
My suggestion meets these guidelines:

* [x] This wouldn't be a breaking change in existing TypeScript/JavaScript code
* [x] This wouldn't change the runtime behavior of existing JavaScript code
* [x] This could be implemented without emitting different JS based on the types of the expressions
* [x] This isn't a runtime feature (e.g. library functionality, non-ECMAScript syntax with JavaScript output, new syntax sugar for JS, etc.)
* [x] This feature would agree with the rest of [TypeScript's Design Goals](https://github.com/Microsoft/TypeScript/wiki/TypeScript-Design-Goals) (suits 10, and 11 well).


## ⭐ Suggestion

<!-- A summary of what you'd like to see added or changed -->

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

<!--
  If you were announcing this feature in a blog post, what's a short explanation that shows
  a developer why this feature improves the language?
-->

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

<!--
  What do you want to use this for?
  What shortcomings exist with current approaches?
  What workarounds are you using in the meantime?
-->

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](https://www.npmjs.com/package/directory-named-webpack-plugin), 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](https://www.typescriptlang.org/docs/handbook/module-resolution.html):

```
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):

![image](https://user-images.githubusercontent.com/245825/121210443-af0d8a00-c849-11eb-8c20-6b1fa0d5b337.png)

This shows the tabs - note how much space is wasted (fewer tabs can be shown at once):

![image](https://user-images.githubusercontent.com/245825/121211548-92258680-c84a-11eb-8cb2-9ddddc46e0db.png)

Open Editors:

![image](https://user-images.githubusercontent.com/245825/121212081-08c28400-c84b-11eb-9544-8fc708dc45af.png)