Using ESLint to enforce snake_case naming conventions within TypeScript Type properties

Question

Using ESLint to enforce snake_case naming conventions within TypeScript Type properties

When working with TypeScript, I prefer to use snake_case for properties within my Interfaces or Types. To enforce this rule, I have configured the ESLint rule camelcase as follows:

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

Even though the ESLint documentation mentions that this rule applies, it seems to only work for JavaScript objects and not for interfaces and types.

export const test = {
    a_b: 1, // This is fine, no error
};

export interface ITest {
    a_b: number, // Identifier 'a_b' is not in camel case.eslint(camelcase)
}

export type TTest = {
    a_b: number, // Identifier 'a_b' is not in camel case.eslint(camelcase)
}

The error disappears when I turn the rule 'off', but then it doesn't apply to .ts files anymore.

So, how can I continue to use snake_case convention inside TypeScript? Any suggestions are appreciated. Thank you.

javascript typescript eslint tslint typescript-eslint

Answer 1

Answer №1

I have found that the rule does not function properly with types in TypeScript files. To address this issue, I suggest disabling the rule for TypeScript files by adding the following configuration to your ESLint setup:

{
    "rules": {
        "camelcase": ["error"],
    },
    "overrides": [
        {
            "files": ["**/*.ts", "**/*.tsx"],
            "rules": {
                "camelcase": ["off"]
            }
        }
     ],
}

After disabling the rule, you can incorporate @typescript-eslint/eslint-plugin to enforce a specific linting rule that correctly handles properties in interfaces and types.

Please make sure to install the plugin and parser if you haven't already. You can find installation instructions here: https://www.npmjs.com/package/@typescript-eslint/eslint-plugin

For more information on

@typescript-eslint/naming-convention

, refer to: https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/naming-convention.md

{
    "plugins": ["@typescript-eslint"],
    "parser": "@typescript-eslint/parser",
    "rules": {
        "camelcase": ["error"],
        "@typescript-eslint/naming-convention": [
            "error",
            { "selector": "property", "format": ["snake_case"] }
        ]
    },
    "overrides": [
        {
            "files": ["**/*.ts", "**/*.tsx"],
            "rules": {
                "camelcase": ["off"]
            }
        }
    ],
}

Answer 2

I have found that the rule does not function properly with types in TypeScript files. To address this issue, I suggest disabling the rule for TypeScript files by adding the following configuration to your ESLint setup:

{
    "rules": {
        "camelcase": ["error"],
    },
    "overrides": [
        {
            "files": ["**/*.ts", "**/*.tsx"],
            "rules": {
                "camelcase": ["off"]
            }
        }
     ],
}

After disabling the rule, you can incorporate @typescript-eslint/eslint-plugin to enforce a specific linting rule that correctly handles properties in interfaces and types.

Please make sure to install the plugin and parser if you haven't already. You can find installation instructions here: https://www.npmjs.com/package/@typescript-eslint/eslint-plugin

For more information on

@typescript-eslint/naming-convention

, refer to: https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/naming-convention.md

{
    "plugins": ["@typescript-eslint"],
    "parser": "@typescript-eslint/parser",
    "rules": {
        "camelcase": ["error"],
        "@typescript-eslint/naming-convention": [
            "error",
            { "selector": "property", "format": ["snake_case"] }
        ]
    },
    "overrides": [
        {
            "files": ["**/*.ts", "**/*.tsx"],
            "rules": {
                "camelcase": ["off"]
            }
        }
    ],
}

Using ESLint to enforce snake_case naming conventions within TypeScript Type properties

Answer №1

Similar questions

Collecting Images Based on Quantity

sort the array based on its data type

What is the best way to apply three unique classes to multiple div elements using jQuery?

Creating an animated background slide presentation

Unexpected behavior encountered when running Angular 8 radio button checked function

Just easy highlighting using tags in Javascript

Issue encountered when attempting to save items in the browser's local storage

Unraveling the mysteries of the Bootstrap carousel script

React navigator appears stuck and unable to navigate between screens

Methods to validate CSS attributes specified within a class using React testing library

What is the best way to retrieve the element at the current cursor position inside an iframe

a helpful utility type for extracting a union from a constant array of strings

What purpose does the pipe method serve in RxJS?

What are some ways to bypass a closed Google form that is no longer accepting responses? I need to find a way to submit my form even after the deadline

Retrieve data from two databases and display the information from two separate arrays on a single ejs page after making two separate database calls

Issue arises where multiple asynchronous functions cause infinite re-rendering due to the shared loading state

What is the purpose of running "npm install" if the "node_modules" directory already exists?

Activate just the show more / show less button on the website that has several buttons with identical ids

Mapping DOM elements to VueJS components for hydration is a key process in facilitating

Looking for help understanding a basic piece of code