understanding the source of vscode squiggly lines

Question

I opened a js file with ES7 property initializers and am getting squiggly lines:

class AppContainer extends Component {
  static propTypes = {
    history: PropTypes.object.isRequired,
    routes: PropTypes.object.isRequired,
    store: PropTypes.object.isRequired
}

The error says:

[js] 'property declarations' can only be used in a .ts file.

I am curious how to fix this, of course. But I am more curious how to debug what is giving this error? This is one of the more frustrating parts of some editors, understanding what is deciding that your code is wrong.

Is it VS or a plugin? linter? compiler?

I did see this question, but that only seems to be for es6. Also this question is about the eslint plugin, not core vs code.

As for fixing it, I did find some advice for jsconfig.json and tried setting the compilerOptions to target es7 (no go there). It looks like you add specific eslint settings, but again, who wins? The linter? Internal compilers?

So, the two questions:

How do you know which extension is triggering an error (vscode, linter, jsx, etc...)?
How do I fix this one?

Thanks

Possible duplicate of [VSCode Linter ES6 ES7 Babel linter](http://stackoverflow.com/questions/36327096/vscode-linter-es6-es7-babel-linter) — Claies, Aug 16 '16 at 02:22
Maybe, but only the part 2. I am more curious how to discover where (what module/extension) an error is coming from. For instance, if the core engine says its an error, but a linter says no, who wins? — Joshua Ball, Aug 16 '16 at 14:22

score 3 · Accepted Answer · answered Sep 23 '16 at 14:17

This is a good concern.

This is one of the more frustrating parts of some editors, understanding what is deciding that your code is wrong.

I hope I can help. (Disclaimer I work on the VS Code team)

How do you know which extension is triggering an error (vscode, linter, jsx, etc...)?

The linting identifier is in [ ] in your case js is identifying the JavaScript language service that comes built in to VS Code.

The language service (code named Salsa when it was being built) provides both JavaScript and TypeScript language service features, including linting. This is why the error erroneously states that "'property declarations' can only be used in a .ts file."

For an eslint error you would see [eslint] in prefix of the error message.

How do I fix this one?

First you need to use the latest stable TypeScript version which will ship with VS Code 1.6. To upgrade to TypeScript 2.0 see this doc (summarized below).

npm install typescript@2.0.2

Add this to your settings file (assuming that is the correct path to tsserver.js)

{
   "typescript.tsdk": "node_modules/typescript/lib"
}

Per this Github Issue comment, add this to your jsconfig.json file.

{
  "compilerOptions": {
        "experimentalDecorators": true
   }
}

This should solve your issue.

understanding the source of vscode squiggly lines

1 Answers1