Enforce stricter formatting rules for TypeScript files in ESLint

[vvidday]

What feature(s) would you like to see in RepoSense

As pointed out by @HCY123902, our current ESLint ruleset for TypeScript files does not enforce certain formatting rules, such as semicolons as delimiters in TypeScript interfaces.

We could add these formatting rules to ESLint.

Is the feature request related to a problem?

We are already following the Airbnb coding standard, which contains style-specific rules (e.g. comma dangle, single quote for strings, semicolons at end of statement) that helps maintain consistency across the codebase, which improves readability.

As TypeScript introduces new code that isn't covered by the above JavaScript coding standards, it would be good to enforce consistency in terms of style.

If possible, describe the solution

#1913 adds support for the typescript-eslint plugin, that allows us to enforce rules for TypeScript code. Although we add the Airbnb Typescript and Typescript-eslint recommended rulesets in that PR, there are still certain style rules that aren't included in those rulesets.

Hence, the solution would be to simply add these missing rules to our eslintrc.json file.

Additionally, it would be good to update the DG to specify these additional rules that we're adding, since they are not included in the Airbnb ruleset that is currently linked on the DG.

If applicable, describe alternatives you've considered

Additional context

It is not particularly easy/straightforward to get a list of rules that might be missing from the Airbnb ruleset.

All the rules included by the Airbnb typescript ruleset can be found in this file. The syntax might be confusing, so consider this example in line 152 of the above file:

    'no-magic-numbers': 'off',
    '@typescript-eslint/no-magic-numbers': baseBestPracticesRules['no-magic-numbers'],

The first line is just turning the default ESLint option for that rule off, to not interfere with the TypeScript version. The second line is the actual value of that rule that is being set. However, the problem here is that since Airbnb imports the value from their base ruleset, we actually have to reference the JavaScript repo to find the actual value. In this case, we can see it's in baseBestPracticesRules, so we go to the best-practices.js file in the JavaScript repo above to find the value that is being used:

    'no-magic-numbers': ['off', {
      ignore: [],
      ignoreArrayIndexes: true,
      enforceConst: true,
      detectObjects: false,
    }],

As you can tell, the process is quite tedious/cumbersome, hence why I mentioned that it is not really easy to get a list of rules that we might be missing.

Rules to add

I've done a preliminary comb through the TypeScript rules and so far there are two rules that I think we should consider adding:

• member-delimiter-style - This rule enforces semicolons (or a chosen delimiter) in TypeScript interfaces and type aliases, which would be consistent with us enforcing semicolons at the end of statements. Thanks to @HCY123902 for spotting this. Example of what this rule will prevent
• type-annotation-spacing - This rule enforces the style of TypeScript type annotations, e.g. foo: string vs foo : string vs foo :string. As our codebase currently uses the first style, it would be good to enforce this for consistency and readability. Example of what this rule will prevent

I've labelled this 'to discuss' since I might have missed some rules. If anyone has any suggestions/knows of any rules that should be enforced, please feel free to add them here! Otherwise, as mentioned above, since it's quite difficult to tell what's missing, this might be something that we add on to occasionally when we run into such issues (i.e. we realize the linter doesn't pick up on a style issue).