New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Filename and directory structure #817

Closed
tleunen opened this Issue Apr 9, 2016 · 5 comments

Comments

Projects
None yet
3 participants
@tleunen
Copy link

tleunen commented Apr 9, 2016

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 ljharb added the question label Apr 9, 2016

@ljharb

This comment has been minimized.

Copy link
Member

ljharb commented Apr 9, 2016

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

This comment has been minimized.

Copy link

tleunen commented Apr 9, 2016

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

This comment has been minimized.

Copy link
Member

ljharb commented Apr 9, 2016

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

This comment has been minimized.

Copy link

tleunen commented Apr 9, 2016

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

@coderefractor

This comment has been minimized.

Copy link

coderefractor commented Apr 13, 2016

Thanks for the guide

ljharb added a commit to ljharb/javascript that referenced this issue Apr 14, 2016

ljharb added a commit to ljharb/javascript that referenced this issue Apr 14, 2016

@ljharb ljharb closed this in #826 Apr 16, 2016

jaylaw81 added a commit to appirio-digital/ads-best-practices that referenced this issue Sep 19, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment