JavaScript file naming conventions

[dextermb]

What you would like to change/add

I'd like to proposal a differing opinion from Airbnb's javascript style guide. In their style guide they mention that filenames should match exactly the default export.

But I think that all JavaScript related directories and files should be lowercase and piped.

Why you would like to change/add this

I think it is just a cleaner naming conventions, and how I've always done it in my own projects.

Examples

Airbnb

// LangleyFoxall.js
const LangleyFoxall = () => null

export default LangleyFoxall

Piped

// langley-foxall.js
const LangleyFoxall = () => null

export default LangleyFoxall

Checklist

• I have checked that this is not a duplicate issue.

Sources

• What is the javascript filename naming convention?

[AlexCatch]

I disagree here, I feel like as we almost always use classes now it makes sense to match other languages and files should be camelCase.

I'll often find I store my components like /components/UserDetail/index.jsx so the import looks like
import UserDetail from "/components/UserDetail"

Otherwise your proposed import would look like:

import UserDetail from "/components/user-detail/user-detail.jsx"

which I don't think is as semantic.

But I don't think it matters much as long as it's consistent across a project.

[dextermb]

I'll often find I store my components like /components/UserDetail/index.jsx so the import looks like
import UserDetail from "/components/UserDetail/index.jsx"

Surely it should just be /components/UserDetail.jsx?

Otherwise your proposed import would look like:

import UserDetail from "/components/user-detail/user-detail.jsx"

I propose that it should be /components/user-details.jsx

But I don't think it matters much as long as it's consistent across a project.

Definitely

Thoughts?

[AlexCatch]

Depends on the project - you should typically split up your folder structure by domain, having all your components in one big folder isn't ideal for maintainability if you just have one folder for 120+ components.

By having folders like /components/UserDetail you can have all specific UserDetail components inside of that folder (split by the UserDetail domain)

i.e

• /components/UserDetail
  • index.jsx
  • UserDetailCard.jsx
  • UpdateUserModal.jsx

[DivineOmega]

My preference is:

• TitleCase.js for JavaScript classes
• kebab-case.js for miscellaneous JavaScript files

[dextermb]

By having folders like /components/UserDetail you can have all specific UserDetail components inside of that folder (split by the UserDetail domain)

Ah, true true.

[dextermb]

My preference is:

• TitleCase.js for JavaScript classes
• kebab-case.js for miscellaneous JavaScript files

I think I'd prefer to have one or the other rather than both

[AlexCatch]

It's a tough one that's for sure, it could depend on the context on the application.

If you're building a complex JS application it makes sense to treat the files like a typical compiled language does i.e. UserDetail.jsx.

If you're just doing a bit of scripting to add some small functionality to a typical page it makes sense to do what a typical interpreted language does i.e. user-detail.js

It's what me and @ash123456789 have done for our current project.

The complex React part of the application is treated like an application with PascalCase & the basic scripting parts of the site is treated basically like user-listing.js

[DivineOmega]

My preference is:

• TitleCase.js for JavaScript classes
• kebab-case.js for miscellaneous JavaScript files

My reasons for this difference is that I feel classes, which usually are part of front-end framework code, are often core application code and should be treated as such. While other JS files I feel are more like static assets of the project, not necessarily providing critical application code, and sometimes directly included via <script> tags.