Support for .tsx files

[pepaar]

Typescipt now support JSX and it introduced .tsx extension for files containing JSX syntax. microsoft/TypeScript#3203

Do you plan to support .tsx files?

[adidahiya]

JSX support is coming in TS 1.6, and we plan to support it by the time that releases. Right now tslint depends on typescript v1.5.0-beta, the latest npm release.

We do have intentions of more closely following the latest TS syntax & language services API on our master branch (see #474), so look out for that soon!

[pepaar]

Thanks. Just from curiosity, how big is the change to make tslint work for tsx files but without any JSX linting support (let's suppose i will disable linting for JSX part of file)? Or to rephrase, I would like to tslint file regardless its extension.

[adidahiya]

I think it's fairly trivial. tslint rules only walk certain nodes in the syntax tree, so when the TS language services get updated to include JSX syntax nodes, tslint will simply ignore them.

[ashwinr]

@pepaar you can also consider using block comments to disable tslint for all the JSX code blocks until we get first-class support (which should be pretty soon)

[pepaar]

Here is my example:

I have GroupPerson.ts file with:

export default class GroupPerson {

    /** Id */
    id: string; 

    /** DisplayName */
    displayName: string;

}

Then if i run: tslint -f App\Models\Groups\GroupPerson.ts everything works fine as expected.

If the file with same content has different extension, e.g. GroupPerson.tsx or GroupPerson.abc and I run tslint -f App\Models\Groups\GroupPerson.tsx I get following error:

C:\Users\pepaar\AppData\Roaming\npm\node_modules\tslint\bin\tslint-cli.js:41676
            this.limit = this.sourceFile.getFullWidth();
                                        ^
TypeError: Cannot read property 'getFullWidth' of undefined
    at EnableDisableRulesWalker.RuleWalker (C:\Users\pepaar\AppData\Roaming\npm\node_modules\tslint\bin\tslint-cli.js:41676:41)
    at EnableDisableRulesWalker.SkippableTokenAwareRuleWalker (C:\Users\pepaar\AppData\Roaming\npm\node_modules\tslint\bin\tslint-cli.js:42219:20)
    at new EnableDisableRulesWalker (C:\Users\pepaar\AppData\Roaming\npm\node_modules\tslint\bin\tslint-cli.js:42340:20)
    at Linter.lint (C:\Users\pepaar\AppData\Roaming\npm\node_modules\tslint\bin\tslint-cli.js:42609:31)
    at processFile (C:\Users\pepaar\AppData\Roaming\npm\node_modules\tslint\bin\tslint-cli.js:42768:29)
    at Object.<anonymous> (C:\Users\pepaar\AppData\Roaming\npm\node_modules\tslint\bin\tslint-cli.js:42777:5)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)

Do you know what's the issue here?

[adidahiya]

@pepaar Importing .tsx files is not going to work with any current version of tslint. The compiler is bundled with the tslint binary, so you're locked to that compiler version.

You could build a version of tslint yourself that is able to import .tsx files by adding the compiler option allowNonTsExtensions: true in createCompilerOptions() in utils.ts. However, I just tried this with v1.5.3 of the compiler and many linting rules are still broken (some report false positive lint failures, some throw outright exceptions) because the new syntax tree APIs are not included.

Your best bet is to wait until we are tracking the TypeScript master branch in our repo (#474).