Open dextermb opened 5 years ago
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.
I'll often find I store my components like
/components/UserDetail/index.jsx
so the import looks likeimport 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?
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
My preference is:
TitleCase.js
for JavaScript classeskebab-case.js
for miscellaneous JavaScript filesBy having folders like
/components/UserDetail
you can have all specific UserDetail components inside of that folder (split by the UserDetail domain)
Ah, true true.
My preference is:
TitleCase.js
for JavaScript classeskebab-case.js
for miscellaneous JavaScript files
I think I'd prefer to have one or the other rather than both
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
My preference is:
TitleCase.js
for JavaScript classeskebab-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.
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
Piped
Checklist
Sources