ESLint demands semicolon and wants it removed at the same time

user_6466206 0
Viewed 17838

I am configuring ESLint (as TSLint is soon-to-be-deprecated) to work with my .ts files. I have this very little file:

export default interface Departure {
  line: string;
  direction: string;
  time: Date;
};

in the last time, where semicolon is, ESLint in my VSCode signals two errors: one about missing semicolon eslint(semi) and another one about unnecessary semicolon eslint(no-extra-semi).

eslint semicolon error

Below is my .eslintrc.js:

module.exports = {
    "env": {
        "browser": true,
        "commonjs": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "plugin:@typescript-eslint/recommended",
        "airbnb"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018
    },
    "plugins": [
        "react",
        "@typescript-eslint"
    ],
    "settings": {
        "import/resolver": {
            "node": {
                "extensions": [".js", ".jsx", ".ts", ".tsx"]
            }
        }
    },
    "rules": {
    }
};

how can I get rid of this bizarre situation? None of the errors should be there.

eslint typescript
4 Answers

The issue here is that 2 rules are applied at the same time:

  1. export default requires to have a semicolon
  2. interface requires to get rid of a semicolon

The fix here would be to split the declaration of the interface from the export statement like so:

interface Departure {
  line: string;
  direction: string;
  time: Date;
}

export default Departure;

I didn't come up with the answer myself. Source was this submitted issue

user_50332540

I fixed this question using the followed rules:

"rules": {
  "semi": "off",
  "@typescript-eslint/semi": ["error"],
}
user_53819650

Adding to Ricardo Emerson's comment, the following .eslintrc setup will not turn off the semicolon errors:

{
  ...
  "extends": [
    ...
    "eslint:recommended"
  ],
  "rules": {
    ...
    "semi": ["error", "never"],
    "@typescript-eslint/semi": "off",
    "no-unexpected-multiline": "error"
  }
}

According to the documentation, it is also recommended to turn on the no-unexpected-multiline errors when turning off semicolons.

user_76778510

Pulling together several answers here we the workaround of splitting the export and interface definition to separate lines. That will resolve the specific error but does not prevent it from happening again.

From Ricardo Emerson's answer the fallowing eslint config lines will allow semi-colon checking to be left on while resolving the conflict:

"rules": {
  "semi": "off",
  "@typescript-eslint/semi": ["error"],
}

Or if that seems to shut off checking compeltely try:

"rules": {
  "semi": "off",
  "@typescript-eslint/semi": ["error", "always"],
}

"always" check is the default for "@typescript-eslint/semi" when its on but this setting may have been change in another configuration file.

To disable the check completely do:

"rules": {
  "semi": "off",
  "@typescript-eslint/semi": "off",
}

This will deactivate both rules. Never turn both on "@typescript-eslint/semi" supersedes "semi". The docs specifically warn about this. See https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/semi.md

user_21057840
Related