Weird warnings for JSX files

[mcmire]

Hey there! I'm getting weird warnings when trying to lint a file with JSX in it.

For example, take this file:

import React from "react";

export default class Root extends React.Component {
  render() {
    return (
      <p>
        Hello world
      </p>
    );
  }
}

When using this tslint.json:

{
  "extends": [
    "tslint:latest",
    "tslint-react"
  ]
}

I get the following output

ERROR: app/components/Root/index.ts[4, 3]: The class method 'render' must be marked either 'private', 'public', or 'protected'
ERROR: app/components/Root/index.ts[6, 7]: Type assertion using the '<>' syntax is forbidden. Use the 'as' syntax instead.
ERROR: app/components/Root/index.ts[7, 14]: Missing semicolon
ERROR: app/components/Root/index.ts[7, 15]: statements are not aligned
ERROR: app/components/Root/index.ts[7, 15]: unused expression, expected an assignment or function call
ERROR: app/components/Root/index.ts[8, 8]: missing whitespace
ERROR: app/components/Root/index.ts[8, 11]: Missing semicolon
ERROR: app/components/Root/index.ts[9, 6]: Unnecessary semicolon

The first error is expected, that's fine. (And you could say the last error is expected too.) But the other errors shouldn't be happening in my opinion. It's like TSLint doesn't know how to read JSX files effectively. I don't know if there's something in the TSLint docs I missed or whatever, but it seems really weird.

I'm using:

• tslint 5.9.1
• tslint-react 3.4.0

[mcmire]

Okay -- turns out this is my fault! I am a little new to TypeScript and I didn't realize that you have to name a file with *.jsx to tell TS that it contains JSX. I thought I was going crazy! Sorry about the false alarm :)

[rossmoody]

Okay -- turns out this is my fault! I am a little new to TypeScript and I didn't realize that you have to name a file with *.jsx to tell TS that it contains JSX. I thought I was going crazy! Sorry about the false alarm :)

I'm new and this helped me as well. Thanks!

[js2me]

Me too, heh, thanks 🌝

[josemiguelo]

Me too. Thanks!