Unnecessary semicolon issue

[farzadmf]

Hi,

I'm having an issue with class-level arrow functions, e.g.:

class MyComponent extends React.Component<...> {
  doSomthing = () => {
    /* ... */
  }
}

I'm also using VSCode and prettier extension. When I run the Format Document command in VSCode, it seems that prettier is doing the formatting (or another extension), but this arrow function will end up having a semicolon at the end:

class MyComponent extends React.Component<...> {
  doSomthing = () => {
    /* ... */
  };
}

VSCode highlights this semicolon as an error, and when I run my application, it's complaining about Unnecessary semicolon.

Looking at tslint repo, I tried to change the behavior by changing my tslint.json to this:

"rules": {
    "semicolon": [true, "always", "ignore-bound-class-methods"],
}

After doing that, my VSCode editor no longer sees the semicolon as an error, but I still get the Unnecessary semicolon when running the application

[AidanGG]

Following the discussion from #216, I've found the best setup for me was to set tslint.json to

{
  "extends": [
    "tslint:recommended",
    "tslint-react",
    "tslint-eslint-rules",
    "tslint-config-prettier"
  ]
}

after adding tslint-config-prettier and tslint-eslint-rules to my devDependencies. This appears to have fixed the semicolons for arrow functions in VS Code.

[farzadmf]

Thank you @AidanGG for your answer. I did that, but I still have the same problem. Running Format Document adds the semicolon, while tslint is complaining about it!

[farzadmf]

As it turns out, I misunderstood @AidanGG 's answer: the content there should be all the content of tslint.json; what I was doing was to change only the extends section, and leave everything there as is. Closing now as it seems to be working :)

[JohnYoungers]

Alternatively, you can update this rule in your tslint file:

"semicolon": [true, "always", "ignore-bound-class-methods"]