Inside a design system I maintain, we use a modified BEM format for the naming of exported @emotion/css JSS styles.

The syntax looks something like this:

Selector_descendant___modifier

eg (pseudo code):

// header.styles.ts
export const Header_container___isFlex = css`
  display: flex;
  flex: 1;
`;

Ofcourse, @typescript-eslint/naming-convention doesn't like this syntax. I wonder, is there either a way to create a custom rule to allow for this syntax to be used ONLY inside *.style.ts files? Or failing that, is there some kind of extra custom rule configuration we can add to this eslint plugin, to enforce this syntax?

CodePudding user response：

This question can be split into two parts:

1. How to provide two sets of rules for different files?
2. How to custom @typescript-eslint/naming-convention rules to support my custom format?

ESLint multiple sets of rules:

From eslint v4.1.0, you can create configuration based on glob patterns, doc: https://eslint.org/docs/user-guide/configuring/configuration-files#configuration-based-on-glob-patterns

Example from the above link:

{
  "rules": {
    "quotes": ["error", "double"]
  },

  "overrides": [
    {
      "files": ["bin/*.js", "lib/*.js"],
      "excludedFiles": "*.test.js",
      "rules": {
        "quotes": ["error", "single"]
      }
    }
  ]
}

Custom format of @typescript-eslint/naming-convention

You can find the document from @jsejcksn 's comment: https://github.com/typescript-eslint/typescript-eslint/blob/87cfc6ad3e3312d7b6f98a592fb37e69d5d6880a/packages/eslint-plugin/docs/rules/naming-convention.md

Something like this:

{
  '@typescript-eslint/naming-convention': ['error', {
      selector: 'variableLike',
      format: null,
      custom: {
        regex: '^[A-Z]\\w*_\\w ___\\w $',
        match: true
      }
  }]
}

Final Solution:

module.exports = {
  rules: {
    '@typescript-eslint/naming-convention': ['error', {
      selector: 'variableLike',
      leadingUnderscore: 'allow',
      trailingUnderscore: 'allow',
      format: ['camelCase', 'PascalCase', 'UPPER_CASE']
    }],
  },
  overrides: [{
    files: ['**/*.style.ts'],
    rules: {
      '@typescript-eslint/naming-convention': ['error', {
        selector: 'variableLike',
        format: null,
        custom: {
          regex: '^[A-Z]\\w*_\\w ___\\w $',
          match: true
        }
      }]
    }
  }]
}

Change the regex to fit your real case.