JS/TS might not be using semicolons

[Oleksandr Riabukha]

It shows a error:

/**ProductID which might have an auction */
  @Prop() productId: string | number

  /**Shows auction state */
  @State() auctionState: AuctionState = AuctionState.NONE

Because I don't use semicolons in my code.

Expected: it shouldn't be a error.

[NullVoxPopuli]

can you share your config? this plugin doesn't do anything with semicolons

[Oleksandr Riabukha]

Just something by default:
eslint:

{
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
    }
}

And it doesn't show error if I put semicolons. But my code has a format without semicolons. And this situation makes me sad.

tsconfig:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "allowUnreachableCode": false,
    "declaration": false,
    "experimentalDecorators": true,
    "lib": ["dom", "es2017"],
    "moduleResolution": "node",
    "module": "esnext",
    "target": "es2017",
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "jsx": "react",
    "jsxFactory": "h",
    "baseUrl": "src"
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

[NullVoxPopuli]

do you have a prettier config? I think default eslint has semicolons, so you'd have to opt out of them somehow?

thanks for those two configs tho

[Oleksandr Riabukha]

Hi. Of course, Prettier configured without the semicolons intentionally. And I guess it's normal. And the code works. Simply a linter shows a error only in this case. And that's not right.

Prettier config:

{
  "tabWidth": 2,
  "useTabs": false,
  "arrowParens": "avoid",
  "semi": false,
  "jsxBracketSameLine": true,
  "trailingComma": "es5",
  "printWidth": 80,
  "jsxSingleQuote": false,
  "quoteProps": "consistent",
  "bracketSpacing": true,
  "singleQuote": true
}

Linter shows error in the second row:

  @Prop() productId: string | number
  @State() auctionState: AuctionState = AuctionState.NONE

If I put a semicolon, then Linter shuts up. That's not normal situation.

[Oleksandr Riabukha]

I found a solution. I removed an extension: "JavaScript and TypeScript Nightly". It brings a lot of bugs to TS.

[NullVoxPopuli]

Glad you figured it out!