You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
import {Button} from "./components/button/button";
import {Button} from "./components/";
When import button/index.ts, TS will omit index and use button automatically, but custom index file is not supported, through they can be loaded by specifying main/types field of package.json.
One workaround is to rename all components to index.tsx, but it is a bad practice for two reasons:
When an error raised in one of the component, DevTools will only print index.tsx in source section.
When I opened many components at same time, it is very hard to find the correct index.tsx.
In addition, TS do not support multiple * and RegExp in paths of tsconfig.json,
I cannot write paths like:
I have to add a 'package.json' to each component folder which only contains one line: {"main": "./<dirname>.tsx"}, which is too verbose.
components/index.ts re-exports all components in this directory. It is designed for users outside of this project.
I prefer direct exports over re-exports in components directory. (Mixed: #45015, #43777)
🔍 Search Terms
auto import shortest directory
✅ 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.)
Suggestion
I have many components in my project, like:
When auto importing
Button
ina.tsx
.Expected behavior
import {Button} from "./components/button";
Actual behavior
import {Button} from "./components/button/button";
import {Button} from "./components/";
When import
button/index.ts
, TS will omitindex
and usebutton
automatically, but custom index file is not supported, through they can be loaded by specifyingmain
/types
field ofpackage.json
.One workaround is to rename all components to
index.tsx
, but it is a bad practice for two reasons:index.tsx
in source section.index.tsx
.In addition, TS do not support multiple
*
and RegExp inpaths
oftsconfig.json
,I cannot write paths like:
I have to add a 'package.json' to each component folder which only contains one line:
{"main": "./<dirname>.tsx"}
, which is too verbose.components/index.ts
re-exports all components in this directory. It is designed for users outside of this project.I prefer direct exports over re-exports in
components
directory. (Mixed: #45015, #43777)🔍 Search Terms
auto import shortest directory
✅ Viability Checklist
My suggestion meets these guidelines:
⭐ Suggestion
Auto-import feature improvement for best practise.
📃 Motivating Example
💻 Use Cases
The text was updated successfully, but these errors were encountered: