ES6 syntax support isn't working in VSCode

[0xdeafcafe]

I cloned the ES6 example repo (https://github.com/jrieken/es6-vscode-sample), but when I open it, the syntax support is broken

[wxqqh]

I checkout the same code, but there is nothing wrong with this~~~

[dbaeumer]

@jrieken can you please comment. It is 'your' GitHub repository.

[waderyan]

I'm seeing this same issue in the latest Alpha build 1.9.0.

Hovering over "import" shows "Parsing error: the import keyword is reserved (null)".
Hovering over "export" shows "export= can only be used in a .ts file."

I tried creating a jsconfig.json file to fix the issue. Here are the contents.

{
    "compilerOptions": {
        "target": "ES6",
        "module": "commonjs"
    }
}

Didn't solve the syntax highlighting issue.

Additionally, I would expect a syntax error that isn't shown. In my example above <Navigation /> should be highlighted but it is not.

[egamma]

The error message comes from eslint and the corresponding vscode-eslint extension. Uninstalling the extension makes the error goes away.

@waderyan can you check your eslint configuration and whether you enabled ecmaVersion 6, see below? With the following setting the error goes away for me.

{
    "parserOptions": {
        "ecmaVersion": 6,
         "sourceType": "module"
    }
}

@dbaeumer has the change to prefix lint errors by the source been delivered to vscode-eslint.

[waderyan]

@egamma I did not have the options for eslint set, however it does not fix the issue.

[egamma]

@waderyan but with the eslintrc config the error for the import goes away? This worked for me.

The error message for the export looks like it is from TS/Salsa. Can you include the snippet and the jsconfig.json pls.

[waderyan]

Creating .eslintrc fixed it. We also have eslint.options in preferences. I assumed they performed the same function, but they don't in this case.

Snippet:

import React, {Component} from 'react';
import Navigation from '../Navigation';
import styles from './App.scss';
import Viewport from '../Viewport';

class App extends Component {

    render() {
        return (
            <div className={styles.app}>
                <Navigation />
                <Viewport />
            </div>
        );
    }
}

export default App;

jsconfig.json

{
    "compilerOptions": {
        "target": "ES6",
        "module": "commonjs"
    }
}

[waderyan]

Here is a new issue. I'm getting unused var issues. This makes sense for React, but Navigation and Viewport are being used in the JSX syntax.

[egamma]

@waderyan

We also have eslint.options in preferences. I assumed they performed the same function, but they don't in this case.

Actually, the eslint options in the settings are command line arguments for eslint cliengine, these are not config options or rules. I can see the potential for confusion

[egamma]

I'm getting unused var issues. This makes sense for React, but Navigation and Viewport are being used in the JSX syntax.

These are false positives reported by eslint. I suggest to disable the rule no-unused-vars

[egamma]

Hovering over "export" shows "export= can only be used in a .ts file."

I could reproduce this with TS 1.8.0. I can no longer reproduce in the latest vscode-alpha that has TS 1.8.2 bundled. Can pls update code-alpha and verify that the version of TS shown in the bottom right corner when a JS file is open is 1.8.2

Closing and all the issues can either been explained or have been addressed.

[egamma]

@waderyan
actually you can disable an eslint rule on a per line basis using:

//eslint-disable-line //eslint-disable-line no-unused-vars

[waderyan]

Good to know. I talked to @gregvanl today about some of this in a doc for React / ES6 developers. Wasn't easy for me to figure out.

[egamma]

Wasn't easy for me to figure out.

fully agreed, this is why I was much interested into this issue. I'll cover setting up eslint in the change notes, deferring to @gregvanl to add this to the main docs.

[waderyan]

Great. I've created an issue in vscode-docs to track this.

[waderyan]

I found another issue and want to keep it documented. Do you think this is the best place? I can create a separate issue or find another place to track these es6 issues.

This is from ReactStarterKit. Here is the code not in an image.

import React, { Component, PropTypes } from 'react';

function withStyles(...styles) {
  return (BaseComponent) => class StyledComponent extends Component {
    static contextTypes = {
      insertCss: PropTypes.func.isRequired,
    };

    componentWillMount() {
      this.removeCss = this.context.insertCss.apply(undefined, styles);
    }

    componentWillUnmount() {
      this.removeCss();
    }

    render() {
      return <BaseComponent {...this.props} />;
    }
  };
}

export default withStyles;

The error message I see is 'property declarations can only be used in a .ts file'

[waderyan]

Error message on hover: 'decorators' can only be used in a .ts file.

[waderyan]

Ah ... I think I got it. Decorators are an ES7 feature.

[egamma]

In general, given that we transition to Salsa the TypeScript repository is the right place to file ES6 issues.

property declarations can only be used in a .ts file

This is issue microsoft/TypeScript#6997

Error message on hover: 'decorators' can only be used in a .ts file.

This is microsoft/TypeScript#6872. This should be in TS 1.8.2 according the bug report. Can you confirm that you are using TS 1.8.2 (which now the default in the code-alpha channel).

[waderyan]

tsc -v
Version 1.9.0-dev.20160130

I'll file a bug.

[JGSolutions]

Has this been fixed? I am not sure how to fix this.

[JGSolutions]

I am using version 1.1.0

[yf-hk]

@waderyan Same issues here. Have you found a solution?

[baz-sh]

@waderyan I've tried following this and the related conversations but I can't seem to find a way to resolve the warnings in VSCode Version 1.1.1 (1.1.1)

[reggiepangilinan]

any update on this? i am using v1.2.1

[arakno]

@reggieboyYEAH , have you tried creating an .eslintrc file at the root dir of your project with
{ "compilerOptions": { "target": "ES6", "module": "commonjs" } }

in it?

That solved it for me as suggested above

[Paul-PSDigital]

.eslintrc.json *

[kevinbarabash]

I sometimes run into this issue. Restarting seems to fix this for a while. I'm not sure what triggers it. I'm running VSCode 1.8.1 and version 1.2.1 of the ESLint plugin.

[hielfx]

I can't really get this to work. I am using VSCode 1.8.1 too, I tried with the ESLint plugin enabled and disabled, with the jsconfig.json file and the .eslintrc but none of them are working to me

EDIT: TypeScript version 2.1.5, if needed

[marcusbesjes]

I hit ctrl-shift-p and typed eslint then selected create .eslintrc.json file and it made the file with es6: true

now it works!

[ImaginaryDevelopment]

I don't have eslint installed, and I am getting in the Problems panel [js] 'types' can only be used in a .ts file.

[rohmanhm]

I got this problem too,
I'm using Flow, not Typescript

nb: Fixed by restarting vscode

[JherVonArbanel]

Hey guys, i have downloaded this project
https://github.com/Microsoft/vscode-react-sample

i just tried to declare "const" in any file and is not recognized, i already checked the esLint but it doesnt works,, is not recognized .... COME ON GUYS EVERY DELIVER OF VSCODE, COMES WITH MORE AND MORE ISSUES

[david1asher]

That did the trick for me: I installed ESLint so I get the valid javascript validation warnings from ESLint, and I disabled the default VSCode javascript validation so I don't get the "falsy" javascript validation warnings from VSCode.

https://code.visualstudio.com/docs/languages/javascript

Tip You can disable default JavaScript validation by setting "javascript.validate.enable": false in your settings.

[gopaldevra]

Try to add const in any method.