Turn off eslint camelCase for typescript interface identifiers

Question

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.

Answer 1

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
    }
]