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:

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

Thanks

Answer 1

这是一个很好的担忧。

这是一些编辑者最令人沮丧的部分之一，了解是什么决定了你的代码是错误的。

我希望我能帮忙。（免责声明我在 VS Code 团队工作）

1. 您如何知道哪个扩展正在触发错误（vscode、linter、jsx 等）？

[ ]在您的情况下，linting 标识符js用于标识 VS Code 中内置的 JavaScript 语言服务。

语言服务（构建时的代号为Salsa ）提供 JavaScript 和 TypeScript 语言服务功能，包括 linting。这就是为什么错误错误地指出“‘属性声明’只能在 .ts 文件中使用”。

对于 eslint 错误，您会[eslint]在错误消息的前缀中看到。

2. 我该如何解决这个问题？

首先，您需要使用 VS Code 1.6 附带的最新稳定 TypeScript 版本。要升级到 TypeScript 2.0，请参阅此文档（总结如下）。

npm install typescript@2.0.2 

将其添加到您的设置文件中（假设这是正确的路径tsserver.js）

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

根据此Github Issue 评论，将其添加到您的jsconfig.json文件中。

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

这应该可以解决你的问题。