File-Naming Convention for Component Creation

By default, Codux uses the kebab-case naming convention for the file names of new components, their paths, and board files. For example, if you create a component named HelloWorld, Codux creates hello-world.tsx and hello-world.board.tsx files inside the configured new components path in a folder named hello-world.
If your personal preference is to use pascal-case (HelloWorld.tsx) or camel-case (helloWorld.tsx) for file and folder names, however, this article is for you!

Configuring the ConventionĀ 

Use the fileNamingConvention configuration key to configure the file-naming convention for file and directory names. There are three possible values for it:
kebab-case: File name contains only lowercase letters, and has dashes between words (toggle-switch.tsx). This is the default case that Codux uses if not configured otherwise through this key.
camel-case: File name begins with a lowercase letter. There are no spaces, dashes, or underscores between words. New words following the first start with a capital letter (toggleSwitch.tsx).
pascal-case: Similar to camel-case, only with a capital letter at the start of the file name (ToggleSwitch.tsx).
Here is how to add the configuration property in codux.config.json:
1
2
3
4
{  
    "$schema": "https://wixplosives.github.io/codux-config-schema/codux.config.schema.json",
    "fileNamingConvention": "pascal-case"
}
New component files created by Codux look as follows in each of the three naming conventions:
kebab-case
pascal-case
camel-case
/components /hello-world hello-world.tsx hello-world.css
/components /HelloWorld HelloWorld.tsx HelloWorld.css
/components /helloWorld helloWorld.tsx helloWorld.css
Important!
If you create a new component using a custom template (whereby new component code comes from template code files), it's possible that there could be a mismatch in naming conventions between the new component file and its folder/board file. This happens when the configuration specifies one naming convention, while a template file has a name that uses a different one. In this case, the new component takes on a file name based on the convention that the template uses, while everything else is named according to the configured convention in codux.config.json. For more information on configuring component templates, refer here.
IN THIS ARTICLE
Previous article
Next article