Enforce camelCase using ESLint but not PascalCase

Question

I am setting up ESlint for my project and I have a question.

I want the following to work:

class MyClass {

}

function awesomeFunction() {

}

let myVariable = "a";

But not this :

class myClass {

}

function AwesomeFunction() {

}

let MyVariable = "a";

I want all variables and functions to be camelCase (and NOT PascalCase) and all classes to be PascalCase (and NOT camelCase).

Could anyone help me with that? Thanks in advance!

Answer 1

the should be "@typescript-eslint/naming-convention" not "@typescript-eslint/naming-conventions" as shown in Ian's answer.

for context here's my .eslintrc.json file:-

{
    "parser": "@typescript-eslint/parser",
    "plugins": [
        "@typescript-eslint"
    ],
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/eslint-recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "rules": {
        "@typescript-eslint/type-annotation-spacing": "error",
        "@typescript-eslint/space-infix-ops": "error",
        "@typescript-eslint/naming-convention": [
            "error",
            {
                "selector": "default",
                "format": [
                    "camelCase"
                ]
            },
            {
                "selector": "function",
                "format": [
                    "StrictPascalCase"
                ]
            },
            {
                "selector": "variable",
                "format": [
                    "camelCase",
                    "UPPER_CASE"
                ]
            },
            {
                "selector": "parameter",
                "format": [
                    "camelCase"
                ],
                "leadingUnderscore": "allow"
            },
            {
                "selector": "memberLike",
                "format": [
                    "camelCase"
                ]
            },
            {
                "selector": "memberLike",
                "modifiers": [
                    "private"
                ],
                "format": [
                    "camelCase"
                ],
                "leadingUnderscore": "require"
            },
            {
                "selector": "typeLike",
                "format": [
                    "PascalCase"
                ]
            },
            {
                "selector": "typeParameter",
                "format": [
                    "PascalCase"
                ],
                "prefix": [
                    "T"
                ]
            },
            {
                "selector": "interface",
                "format": [
                    "PascalCase"
                ],
                "custom": {
                    "regex": "^I[A-Z]",
                    "match": false
                }
            }
        ]
    }
}

Answer 2

It should be possible to do in eslint with the help of the id-match rule. I found a plugin which kind of solves it but it seems a bit broken at the moment.

Answer 3

This appears to be possible for typescript now.

According to https://github.com/typescript-eslint/typescript-eslint/pull/1318 you can specify config like this:

{
"@typescript-eslint/naming-conventions": ["error",
  { selector: "default", format: ["camelCase"] },

  { selector: "variableLike", format: ["camelCase"] },
  { selector: "variable", format: ["camelCase", "UPPER_CASE"] },
  { selector: "parameter", format: ["camelCase"], leadingUnderscore: "allow" },

  { selector: "memberLike", format: ["camelCase"] },
  { selector: "memberLike", modifiers: ["private"], format: ["camelCase"], leadingUnderscore: "require"  },

  { selector: "typeLike", format: ["PascalCase"] },
  { selector: "typeParameter", format: ["PascalCase"], prefix: ["T"] },

  { selector: "interface", format: ["PascalCase"], custom: { regex: "^I[A-Z]", match: false } },
],
}