364

Should files be named something-with-hyphens.js, camelCased.js, or something else?

I didn't find the answer to this question here.

Community
  • 1
  • 1
ripper234
  • 222,824
  • 274
  • 634
  • 905
  • 5
    A good naming convention is to name filenames as you'd see that entity in the code. The `MyPlugin` class would go in `MyPlugin.js`. The `MenuItem` React component will go in [`MenuItem.js`](https://github.com/mui-org/material-ui/tree/master/packages/material-ui/src/MenuItem). Other devs will require/import 'your-cool-module' and use multiple symbols from it, so name it `cool-module.js`. – – Dan Dascalescu Sep 25 '18 at 20:15
  • 3
    This post is not option-based. In fact it is important. Here you have a guide made by Google - https://google.github.io/styleguide/jsguide.html#file-name . (Google JavaScript Style Guide) – IgorAlves Feb 06 '20 at 20:11
  • A convention either exists or not. The question is not asking for "what is your preferred naming? ". I vote to re-open. – Adrian Maire Feb 17 '22 at 09:24

5 Answers5

235

One possible naming convention is to use something similar to the naming scheme jQuery uses. It's not universally adopted but it is pretty common.

product-name.plugin-ver.sion.filetype.js

where the product-name + plugin pair can also represent a namespace and a module. The version and filetype are usually optional.

filetype can be something relative to how the content of the file is. Often seen are:

  • min for minified files
  • custom for custom built or modified files

Examples:

  • jquery-1.4.2.min.js
  • jquery.plugin-0.1.js
  • myapp.invoice.js
Bryan Menard
  • 13,234
  • 4
  • 31
  • 47
  • 37
    I agree on what you said. But there's one thing I'am currently struggling with: what if the 'plugin' contains two words? Seperate them by dots? jquery.myPlugin-1.0.0.js or jquery.my.plugin-1.0.0.js or jquery.my_plugin-1.0.0.js or jquery.myplugin-1.0.0.js or maybe even jquery.my-plugin-1.0.0.js? Maybe you can complete your examples with that, thanks! – mayrs Aug 28 '12 at 13:21
  • 4
    What about [AMD](http://en.wikipedia.org/wiki/Asynchronous_module_definition) modules? If you use version in filenames you have to change a lot of files if the version number changes. – knut Mar 25 '14 at 18:31
  • 3
    @junior, this is an old post, but a quick [bower search](http://bower.io/search/?q=jquery-) reveals that jquery plugins don't follow any particular convention. It appears that (1)pushing the words together, (2)using spine-case, and (3)using camelCase are all used with roughly equivalent frequency. – bholben Nov 07 '14 at 19:08
  • Not to forget that some versioning and file systems have problems to recognize the difference between a word in lowercase and the same word un upper or camelCase (eg: "ThisWord" is the same as "thisword" in some environments). Something to keep in mind when using the camelCase convention. – amypellegrini Jul 11 '15 at 02:59
  • @knut you shouldn't be loading via version names, but mapping the module name to a specific version file. – dalore Jul 29 '16 at 12:47
178

I'm not aware of any particular convention for javascript files as they aren't really unique on the web versus css files or html files or any other type of file like that. There are some "safe" things you can do that make it less likely you will accidentally run into a cross platform issue:

  1. Use all lowercase filenames. There are some operating systems that are not case sensitive for filenames and using all lowercase prevents inadvertently using two files that differ only in case that might not work on some operating systems.
  2. Don't use spaces in the filename. While this technically can be made to work there are lots of reasons why spaces in filenames can lead to problems.
  3. A hyphen is OK for a word separator. If you want to use some sort of separator for multiple words instead of a space or camelcase as in various-scripts.js, a hyphen is a safe and useful and commonly used separator.
  4. Think about using version numbers in your filenames. When you want to upgrade your scripts, plan for the effects of browser or CDN caching. The simplest way to use long term caching (for speed and efficiency), but immediate and safe upgrades when you upgrade a JS file is to include a version number in the deployed filename or path (like jQuery does with jquery-1.6.2.js) and then you bump/change that version number whenever you upgrade/change the file. This will guarantee that no page that requests the newer version is ever served the older version from a cache.
nCardot
  • 5,992
  • 6
  • 47
  • 83
jfriend00
  • 683,504
  • 96
  • 985
  • 979
77

There is no official, universal, convention for naming JavaScript files.

There are some various options:

  • scriptName.js
  • script-name.js
  • script_name.js

are all valid naming conventions, however I prefer the jQuery suggested naming convention (for jQuery plugins, although it works for any JS)

  • jquery.pluginname.js

The beauty to this naming convention is that it explicitly describes the global namespace pollution being added.

  • foo.js adds window.foo
  • foo.bar.js adds window.foo.bar

Because I left out versioning: it should come after the full name, preferably separated by a hyphen, with periods between major and minor versions:

  • foo-1.2.1.js
  • foo-1.2.2.js
  • ...
  • foo-2.1.24.js
zzzzBov
  • 174,988
  • 54
  • 320
  • 367
  • 16
    +1 for `The beauty to this naming convention is that it explicitly describes the global namespace pollution being added.`, never noticed that – Adriano Nov 13 '14 at 09:18
  • 2
    My only question is what to do if you have a file that creates `Foo` or `myFoo`, would you simply name the file `Foo.js` or `myFoo.js` respectively? – semicolon Feb 09 '15 at 23:36
24

The question in the link you gave talks about naming of JavaScript variables, not about file naming, so forget about that for the context in which you ask your question.

As to file naming, it is purely a matter of preference and taste. I prefer naming files with hyphens because then I don't have to reach for the shift key, as I do when dealing with camelCase file names; and because I don't have to worry about differences between Windows and Linux file names (Windows file names are case-insensitive, at least through XP).

So the answer, like so many, is "it depends" or "it's up to you."

The one rule you should follow is to be consistent in the convention you choose.

Pete Wilson
  • 8,610
  • 6
  • 39
  • 51
9

I generally prefer hyphens with lower case, but one thing not yet mentioned is that sometimes it's nice to have the file name exactly match the name of a single module or instantiable function contained within.

For example, I have a revealing module declared with var knockoutUtilityModule = function() {...} within its own file named knockoutUtilityModule.js, although objectively I prefer knockout-utility-module.js.

Similarly, since I'm using a bundling mechanism to combine scripts, I've taken to defining instantiable functions (templated view models etc) each in their own file, C# style, for maintainability. For example, ProductDescriptorViewModel lives on its own inside ProductDescriptorViewModel.js (I use upper case for instantiable functions).

Tom W Hall
  • 5,273
  • 4
  • 29
  • 35