javascripttypescript

How to enforce semicolon in Typescript interface


Both ,(comma) and ;(semicolon) are valid syntax while declaring a typescript interface e.g the below are both valid

export interface IUser {
  name: string;
  email: string;
  id: number;
}
export interface IUser {
  name: string,
  email: string,
  id: number
}

Below is my concern as it is also valid. Mixing of , and ; also works

export interface IUser {
  name: string;
  email: string,
  id: number;
}

Now for consistency I would like to enforce use of ; at all occasions. My linting still passes even with semicolon rule enforced for typescript.Any ideas how this can be implemented?

.eslintrc.json

{
  "root": true,
  "ignorePatterns": [
    "projects/**/*"
  ],
  "overrides": [
    {
      "files": [
        "*.ts"
      ],
      "parserOptions": {
        "project": [
          "tsconfig.json",
          "e2e/tsconfig.json"
        ],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/ng-cli-compat",
        "plugin:@angular-eslint/ng-cli-compat--formatting-add-on",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": {
        "@angular-eslint/component-selector": [
          "error",
          {
            "type": "element",
            "prefix": "app",
            "style": "kebab-case"
          }
        ],
        "@angular-eslint/directive-selector": [
          "error",
          {
            "type": "attribute",
            "prefix": "app",
            "style": "camelCase"
          }
        ]
      }
    },
    {
      "files": [
        "*.html"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended"
      ],
      "rules": {}
    }
  ]
}

tsconfig.json

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "es2020",
    "lib": [
      "es2018",
      "dom"
    ]
  }
}


Solution

  • In the .eslintrc file, add below rule as mentioned,

     "@typescript-eslint/member-delimiter-style": [
                "warn",
                {
                    "multiline": {
                        "delimiter": "semi",
                        "requireLast": true
                    },
                    "singleline": {
                        "delimiter": "semi",
                        "requireLast": false
                    }
                }
            ]
    

    Accepts three values (or two for singleline):

    NOTE - this is not an option for singleline because having no delimiter between members on a single line is a syntax error in TS. requireLast Determines whether or not the last member in the interface/type should have a delimiter:

    Ref link: click here