@typescript-eslint/naming-convention custom configuration for @emotion style files

user_3988581 0
Viewed 1307

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?

eslint typescript
1 Answers

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.

user_23806030
Related