Skip to content

Latest commit

 

History

History
190 lines (147 loc) · 6.27 KB

filename-naming-convention.md

File metadata and controls

190 lines (147 loc) · 6.27 KB

The filename should follow the filename naming convention (filename-naming-convention)

Allows you to enforce a consistent naming pattern for the filename of the specified file.

Rule Details

This rule aims to format the filename of the specified file. This rule uses the glob match syntax to match target files and declare the naming pattern for the filename.

There are six basic naming conventions built into this rule, including CAMEL_CASE, PASCAL_CASE, SNAKE_CASE, KEBAB_CASE, SCREAMING_SNAKE_CASE and FLAT_CASE.

And there is also a special naming convention for Next.js page router project, which is NEXT_JS_PAGE_ROUTER_FILENAME_CASE, you can use it to ensure the filename of the page router is consistent with the naming convention. You can read more about it under NEXT_JS_PAGE_ROUTER_FILENAME_CASE.

Formatting Name
helloWorld CAMEL_CASE
HelloWorld PASCAL_CASE
hello_world SNAKE_CASE
hello-world KEBAB_CASE
HELLO_WORLD SCREAMING_SNAKE_CASE
helloworld FLAT_CASE

If the rule had been set as follows:

...
'check-file/filename-naming-convention': ['error', { 'src/services/*.js': 'PASCAL_CASE' }],
...

Examples of incorrect filename with path for this rule:

src/services/downloadService.js
src/services/downloadservice.js
src/services/download-service.js
src/services/download_service.js

Examples of correct filename with path for this rule:

src/services/DownloadService.js
src/download-service.js // this file is not be specified by the target pattern, so it is skipped

In addition to the built-in naming conventions, you can also set custom naming patterns using glob match syntax. The following code shows an example of how to ensure that all your js files are named begin with __:

...
'check-file/filename-naming-convention': ['error', {'**/*.js': '__+([a-z])'}],
...

Tip: To selecte all your js files, your can use the glob expression **/*.js.

NEXT_JS_PAGE_ROUTER_FILENAME_CASE

The NEXT_JS_PAGE_ROUTER_FILENAME_CASE aims to support a wide range of filename naming convention in Next.js Page Router projects. If you would like to enforce a camelCase naming convention for your filename, but also support Next.js' Dynamic segments, Catch-all segments and Optional Catch-all Segments, this pattern is for you.

...
'check-file/filename-naming-convention': [
  'error',
  {
    'src/**/*': 'NEXT_JS_PAGE_ROUTER_FILENAME_CASE',
  },
],
...

While NEXT_JS_PAGE_ROUTER_FILENAME_CASE covers many naming cases, it's possible that some cases may be missing. If you come across any missing cases, I encourage you to open an issue and provide the necessary details. Your feedback will help me improve and enhance the naming convention.

Prefined Match Syntax

Prefined match syntax allow you to capture specific part of the target file pattern and use it in your naming convention pattern. This syntax is particularly useful when you want to make a file to be named the same as its parent folder.

To use prefined match in your rule set, you can use the <index> syntax. The index refers to the position where the glob matcher occurs in the target file pattern expression, starting with 0. Read more about glob capture groups in the micromatch documentation.

If the rule had been set as follows:

...
'check-file/filename-naming-convention': ['error', { '**/*/!(index).*': '<1>' }, { 'ignoreMiddleExtensions': true }],
...

Examples of incorrect filename with path for this rule:

src/Portal/type.ts
src/Portal/base.tsx

Examples of correct filename with path for this rule:

src/Portal/index.ts
src/Portal/Portal.test.tsx
src/Portal/Portal.tsx
src/Portal/Portal.types.ts

Options

naming pattern object

The key is used to select target files, while the value is used to declare the naming pattern for the filename. You can specify a different naming pattern for different files. The plugin will only check files you explicitly selected:

export default [
  {
    plugins: {
      'check-file': checkFile,
    },
    rules: {
      'check-file/filename-naming-convention': [
        'error',
        {
          '**/*.{jsx,tsx}': 'CAMEL_CASE',
          '**/*.{js,ts}': 'KEBAB_CASE',
        },
      ],
    },
  },
];

rule configuration object

ignoreMiddleExtensions

If true, the rule will ignore the middle extensions of the filename.

In some cases, you may want to ignore the middle extensions of the filename. For example, you want to lint the base name of the config and test/spec files—e.g., babel.config.js and date.test.js, you can do so by setting the ignoreMiddleExtensions option to true, and the rule will only validate its base name, in this case the base name will be babel and date.

export default [
  {
    plugins: {
      'check-file': checkFile,
    },
    rules: {
      'check-file/filename-naming-convention': [
        'error',
        {
          '**/*.{jsx,tsx}': 'CAMEL_CASE',
          '**/*.{js,ts}': 'KEBAB_CASE',
        },
        {
          ignoreMiddleExtensions: true,
        },
      ],
    },
  },
];
errorMessage

Customizes the error message displayed when a file's filename doesn't match the declared naming pattern. It offers two placeholders for dynamic content:

  • {{ target }}: Represents the filename of the non-matching file.
  • {{ pattern }}: Represents the naming pattern.
export default [
  {
    plugins: {
      'check-file': checkFile,
    },
    rules: {
      'check-file/filename-naming-convention': [
        'error',
        { '**/*/!(index).*': '<1>' },
        {
          errorMessage:
            'The file "{{ target }}" does not match file naming convention defined("{{ pattern }}") for this project, see contribute.md for details',
        },
      ],
    },
  },
];

Further Reading