CODEWITHSUNDEEP
visual-studio-code
Joshua Ball
Joshua Ball

Reputation: 23740

understanding the source of vscode squiggly lines

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?

enter image description here

So, the two questions:

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

Thanks

Upvotes: 5

Views: 1666

Answers (1)

Wade Anderson
Wade Anderson

Reputation: 2519

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)

  1. 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.

  1. 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 [email protected]

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.

Upvotes: 3

Related Questions