Turn off eslint camelCase for typescript interface identifiers

user_9678361 0
Viewed 1132

I'm trying to migrate an existing JS repo to TypeScript. The problem is that projects' API responses are objects with identifiers in snake_case and this conflicts with default eslint camelCase rule.

Before the migration we were handling snake_case object identifiers with this rule in .eslintrc.js:

'camelcase': ['error', {properties: 'never'}],

And could have objects like this in our code:

const { variable_name } = await axios(url)

But after moving to TypeScript, these identifiers are also going show up in interfaces.

So basically I want to be able to have:

interface Model<T extends string> {
    type: T;
    id: number;
    variable_name: string;
    language_code: string;
}

But Typescript now throws:

Identifier 'variable_name' is not in camel case.

What rule should I have in my .eslintrc.js file to justify this? Please note that my identifiers are not limited to those two listed above and there are dozens of others which I removed for simplicity.

typescript-eslint eslint typescript
1 Answers

Keep in mind that JavaScript (for which ESLint is developed) doesn't know of types (eg. interfaces).

So I think this is what is happening while linting the file:

  • The camelCase rule of ESLint applies to objects and their properties.
  • The parser of ESLint doesn't understand that you have an interface and thinks that those are variables within another block. Therefore the check leads to a wrong result.

I think what you need to do is:

  • Disable the camelCase rule (at least for your TypeScript files).
  • Use the naming-convention rule instead and configure it as you need.

This should work:

"@typescript-eslint/naming-convention": [
    "error",
    {
        "selector": "default",
        "format": ["camelCase"]
    },
    {
        "selector": "typeProperty",
        "format": null
    }
]
user_4347420
Related