What is the reason behind typescript-eslint's insistence on using camelCase for enumMember?

The TypeScript documentation showcases enum examples with PascalCase for enum members, like: this

enum Direction {
  Up = 1,
  Down,
  Left,
  Right,
}

However, @typescript-eslint/naming-convention mandates camelCase over PascalCase, resulting in:

enum Direction {
  up = 1,
  down,
  left,
  right,
}

Why the prohibition on PascalCase for enum members?


This confusion arises in a new Angular 12 project using the recommended schematics:

ng add @angular-eslint/schematics

This contradiction doesn't add up.

Could my set-up be incorrect?

What's the reasoning behind rejecting the official naming convention?

Answer №1

When encountering this issue, you can address it by incorporating the following rule into the rules section of your 'eslintrc' configuration file:

"rules": {
    ...,
    "@typescript-eslint/naming-convention": [
      "error",
      {
        "selector": "variable",
        "format": ["camelCase", "UPPER_CASE", "PascalCase"]
      }
    ]
  }

Feel free to adjust the "selector" and "format" options as needed: naming-convention available options

Answer №2

An issue was raised against typescript-eslint, but the maintainers declined to fix the default setting, citing historical reasons and concerns about compatibility with existing configurations.

As a result, users are currently required to resort to creating custom overrides. For instance, in the context of .eslintrc.yml:

rules:
  "@typescript-eslint/naming-convention":
    - error
    - selector: enumMember
      format:
        - PascalCase

Answer №3

Here is a solution for patching the defaults using a .cjs config file. Below is the content of the file:

.eslintrc.cjs

/* eslint-env node */
const typescriptEslint = require('@typescript-eslint/eslint-plugin');


module.exports = {
    extends: [
        'eslint:recommended',
        'plugin:@typescript-eslint/strict-type-checked',
        'plugin:@typescript-eslint/stylistic'
    ],
    plugins: ['@typescript-eslint'],
    parser: '@typescript-eslint/parser',
    parserOptions: {
        project: true,
        tsconfigRootDir: __dirname,
    },
    root: true,
    rules: {
        // PascalCase enum members
        // bad default in https://github.com/typescript-eslint/typescript-eslint/issues/6592
        // means have to recreate the entire rule structure here by extracting the defaults from:
        // https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/src/rules/naming-convention.ts
        "@typescript-eslint/naming-convention": [
            "error",
            ...[...typescriptEslint.rules["naming-convention"].defaultOptions, {
                "selector": "enumMember",
                "format": ["PascalCase"]
            }]
        ],
    }
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

No data found in req.query object in ExpressJS

When I use http.post to send data from Angular to NodeJS, the req.query always comes back empty for me. Here is my server.js setup: const express = require('express'); const cors = require('cors'); const bodyParser = require('body ...

Exploring the capabilities of ExcelJS for reading xlsx files within an Angular environment

I'm trying to access a source file, make some changes to it, and then provide it for the user to download. However, I am facing an issue with reading the source file from my project directory. Below is my implementation using excelJS for file reading: ...

Are React component properties enclosed in curly braces?

I have a new component configured like this: type customType = differentType<uniqueType1, uniqueType2, uniqueType3>; function customComponent({q}: customType) When called, it looks like this: <customComponent {...myCustomVar} />, where myCus ...

Translating a C# ViewModel into TypeScript

Here is a C# viewmodel example: public class LoginModel { [Required(ErrorMessage = "Email is not specified")] public string Email { get; set; } [Required(ErrorMessage = "No password is specified")] [DataType(DataType.Password)] public ...

Using a nodejs module is causing an error in my code

I am dealing with a module like this: module Net.Server { var socket:dgram.Socket; [...] } Here is my app.ts file: var server:Net.Server = new Server(); However, when I include this line at the beginning of the first file: import dgram = requ ...

Having trouble setting the default value of a select element with 'selected' in Angular's bootstrap?

Click here I've been facing some difficulties in making the 'selected' tag work to pre-select my default select value. It seems like it might be related to the unique pipe I'm using and how Angular handles it. I have experimented with ...

TSLint is encountering the error code TS2459: The module "@azure/core-tracing" claims to have a local declaration of "Span" but does not export it, along with additional errors

I'm completely lost on how to tackle this error. The message I'm getting doesn't provide much insight, other than indicating an issue with the installation of '@azure/ai-text-analytics'. I've gone through the process of uninst ...

Implementing Facebook Javascript SDK to enable login and trigger re-authentication using React Web and Typescript within a component

As a newcomer to stack overflow, I welcome any suggestions on how I can improve my question. I'm in need of guidance concerning logging a user into facebook and requiring them to authenticate their profile or select another profile manually, rather t ...

Angular - Dismiss modal triggered by service, from a header module

Within my Angular application, I have Service S that is responsible for opening Component C MatDialog; I am aiming for C to include a reusable header component called Component H; My goal is for H to feature a button that can close the MatDialog within C; ...

Zone.assertZonePatched does not exist as a valid function

I am encountering an error message: Unhandled Promise rejection: Zone.assertZonePatched is not a function Despite importing zonejs correctly in my index.html file: <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_ ...

Implementing basic authentication with AWS Lambda and Application Load Balancer

A few days ago, I sought assistance on implementing basic-authentication with AWS Lambda without a custom authorizer on Stack Overflow. After receiving an adequate solution and successfully incorporating the custom authorizer, I am faced with a similar cha ...

What is the best way to determine which component/service is triggering a method within an Angular 2 or 4 service?

Is there a way to determine which component or service is triggering the method of a specific service, without the need to pass additional parameters? This information must be identified directly within the service. If you have any insights on how this c ...

Adding form controls to an existing form group in Angular 2 can be done by following these steps

Initially, I have created a form group in ngOnInit. However, I need to dynamically add more controls to this existing form group when a specific control is clicked. These additional controls are obtained from another API call made in ngOnInit. The image be ...

Eliminating data type from union in Typescript

I have a specific type that I collect from various other types: type CustomType = { id: string; foo: (string | Type1)[]; bar: (string | Type2)[]; baz: string | Type3 | null; description: string | null; } I am interested in refining thi ...

Invoke a function in Playwright exclusively when the test title includes a specific @tag

After years of utilizing Selenium, SpecFlow, NUnit, and other testing tools, I have recently delved into Playwright with TS. My goal is to interact with the AzureDevOps API to mark tests as automated only if they contain a specific tag in the test title (e ...

Exploring the depths of friendship with React-Router V6 through recursive routes

I am currently facing an issue with my React-Router V6 implementation. The example I found for recursive routes in React-Router V5 is exactly what I need: However, after migrating to react-router-dom@6, the output is not as expected. import { Routes, ...

Is the Dropbox JavaScript SDK compatible with Ionic3?

Does anyone know how to integrate the Dropbox JavaScript SDK into an Ionic 3 app? Just a note: I have come across some sample examples using the http endpoint. ...

Executing a method of another component in Angular2

In my Angular2 application, I have created a Header component that is rendered within the main App component. Now, I am faced with the challenge of placing a submit button from another Form component into the Header. How can I achieve this? I find myself ...

Display responsive input field based on selected option in ionic2 dropdown menu

When the user selects 'Other' from the dropdown menu using Ionic2 and Angular2, I want to provide them with an option to enter their profession. Here is a visual representation of the select box: https://i.sstatic.net/CRjAl.png Below is the co ...

Having trouble navigating using router.navigate in the nativescript-tab-navigation template?

I have everything properly configured in my routes and no errors are popping up. When the initial tab is loaded, I am attempting to automatically switch to the second tab based on whether the user is logged in or not. tabs-routing.module.ts file: import ...