Javascript: Filename and directory structure

[tleunen]

I have a question about the naming convention, the styleguide specifies that if the file exports a single class, the name of the file should be the name of the class. (see https://github.com/airbnb/javascript#naming--filename-matches-export)

So something like this:

import CheckBox from './CheckBox';

What about the directory structure? Is there any preference?
Because, these 2 structures are good based on the styleguide, but the import syntax will be different.

├── src
│   ├── CheckBox
│   │   ├── index.js
│   │   ├── CheckBox.js

import CheckBox from './CheckBox';

├── src
│   ├── checkbox
│   │   ├── index.js
│   │   ├── CheckBox.js

import CheckBox from './checkbox';

Does airbnb have a preference?
For internal component, I find it ok to have import with capital letters, but in an external library, it doesn't seem very common to have import CheckBox from 'component-lib/CheckBox';

[ljharb]

Generally I'd say CheckBox/index.js should have the CheckBox component, as could CheckBox.js, but not CheckBox/CheckBox.js or checkbox/CheckBox.js (since that's redundant).

Internally at Airbnb, we have a Rails app, so we actually use snake_case for directory names, but we definitely use PascalCase/camelCase for filenames. If we weren't a Rails app, we'd be using PascalCase/camelCase for directory names too.

It's also totally OK to have non-lowercased filenames in an external module.

[tleunen]

Generally I'd say CheckBox/index.js should have the CheckBox component, as could CheckBox.js, but not CheckBox/CheckBox.js or checkbox/CheckBox.js (since that's redundant).

Yep, I agree it's kinda redundant, but it makes search a lot easier :)
Having the component in a index.js file is currently against the styleguide though. But if this is "allowed", does it mean the directory name should be in pascal case?

[ljharb]

Yes, ideally the directory name would match the name of the default export of index.js. Perhaps some tweaking of https://github.com/airbnb/javascript#naming--filename-matches-export is needed.

[tleunen]

Great, thanks!
You can close the ticket, or leave it open as a reminder to tweak the guide.

[coderefractor]

Thanks for the guide