question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

MyComponent/index.js? or ALWAYS have file name reflect default export?

See original GitHub issue

Regarding this issue: https://github.com/airbnb/javascript/issues/949

I find it difficult to work in RubyMine/Webstorm with tons of files named index.js:

  • Have to remember to hit a / after typing the name and autocomplete is not great
  • Search results harder to read.

I’d like to suggest the following convention:

  1. Create the file as components/MyComponent/MyComponent.js;
  2. Create an “index” file in that directory with one line: export { default } from ./MyComponent.js`
  3. Do the import as: import MyComponent from 'components/MyComponent'; (using the default for the directory.

I believe this may give the best of both worlds in that

  1. The files are named per the default export.
  2. Easier file navigation in most editors.
  3. Avoid having multiple editor tabs open that say index.js.
  4. Still have the concise import statement for the main file in a directory.

The cost is only to add the index.js file in each directory with a default component.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Reactions:4
  • Comments:5

github_iconTop GitHub Comments

1reaction
radixhoundcommented, Mar 14, 2017

FWIW I removed my comments because I had the context of the issue wrong methinks.

1reaction
prigaracommented, Mar 13, 2017

For those who will bump into this issue in the future: this pattern works fine in IntelliJ-based IDEs. import boo from 'foo' will resolve into foo/index.js if there’s such file.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Why and when to use default export over named exports in ...
One can have only one default export per file. When we import we have to specify a name and import like: // import...
Read more >
Use Named Exports over Default Exports in JavaScript
A default export can only export a single object, function, or variable and curly braces are omitted when importing in various files. export ......
Read more >
Named Export vs Default Export in ES6 | by Alankar Anand
ES6 provides two ways to export a module from a file: named export and default export. Named Export: (export). With named exports, one...
Read more >
nbdkit-exportname-filter - adjust export names between client ...
When the client requests the default export name ( "" ), request the export NAME from the underlying plugin instead of relying on...
Read more >
Suggested expansion of the "Default export names and file ...
In JavaScript, there is the code smell rule “Default export names and file names should match”. This is a good rule, but a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found