112

Edit 3: Starting in version 0.4.0, ES6 syntax can be turned on by adding a jsconfig.json file to the project folder with the following contents:

{
    "compilerOptions": {
        "target": "ES6"
    }
}

Edit 2: You can vote for this feature on user voice


Is there a way to "turn on" ES6/ES7 in Visual Studio Code?

screenshot

Edit 1

Tried @sarvesh's suggestion- overrode javascript.validate.target and restarted vscode. Didn't help.

1
  • 3
    Would you mind putting it as an answer rather than an edit on your question? Commented Nov 4, 2015 at 10:53

8 Answers 8

60

It's quite easy, at the root of your project create a jsconfig.json file and write this object in it:

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

This link helped a lot. Adding the jsconfig.json file to the the project didn't help much or rather it's not the best solution. Go to file > preferences > settings. In the settings.json file add this line:

"jshint.options": { "esversion": 6 }

Also you can also enable this setting for the entire project by creating a .jshintrc file in your project's root and adding this content.

{
  "esversion": 6
}
0
32

Currently, the only way to use ES6 and ES7 features is to use Typescript.

On the other hand, here you can see that there is a feature request for ES6 and ES7

8
  • 1
    Update: Looks ES6 will be available starting July 2015 - visualstudio.uservoice.com/forums/293070-visual-studio-code/… Commented Jun 25, 2015 at 16:12
  • It seems pretty good. Still, there is work to be done in general.
    – mzdv
    Commented Jul 27, 2015 at 10:30
  • 2
    I'm using the latest version 0.8.0 I still see error coloring for fat arrow functions... why?
    – vanthome
    Commented Sep 26, 2015 at 14:14
  • @vanthome you need to indicate the files array you want to write with es6, check the link: code.visualstudio.com/Docs/languages/javascript
    – TlonXP
    Commented Oct 9, 2015 at 4:13
  • @TionXP you mean the approach with jsconfig.json? Well I did not try that but I expect this to work if I enable it globally. I don't want to tell VSCode file-by-file that I want to use ES6.
    – vanthome
    Commented Oct 10, 2015 at 11:36
5

Adding to the above answers...

As per Docs of VS Code..

Make sure that you place the jsconfig.json at the root of your JavaScript project and not just at the root of your workspace. Below is a jsconfig.json file which defines the JavaScript target to be ES6 and the exclude attribute excludes the node_modules folder.

{
    "compilerOptions": {
        "target": "ES6"
    },
    "exclude": [
        "node_modules"
    ]
}

Here is an example with an explicit files attribute.

{
    "compilerOptions": {
        "target": "ES6"
    },
    "files": [
        "src/app.js"
    ]
}

The files attribute cannot be used in conjunction with the exclude attribute. If both are specified, the files attribute takes precedence.

also try editing the "target" property in tsconfig.json

{
  "compilerOptions": {
    "target": "es5",//es6
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}
2
  • What does this mean: "at the root of your JavaScript project and not just at the root of your workspace"? Commented Aug 20, 2016 at 2:17
  • Why can't vs code just pick up .babelrc etc? Why all the duplicated config? grumbl Commented Apr 19, 2017 at 16:22
1

Otherwise you can use ESLint to highlight ES7 error (using babel parser or others): VSCode Linter ES6 ES7 Babel linter

0

Alternatively you can use Flow instead of Typescript, which is much easier to setup and migrate to. I wrote a small article on how to setup Flow with VS Code.

0

As of this date and according to the ESLint docs on the VSCode Marketplace, including a .eslintrc configuration file in the root of the project enables ES6 linting in the ESLint VSCode extension.

My .eslintrc config file looks like this:

extends:
  - standard
parser: babel-eslint
rules:
  object-curly-spacing: [ error, always ]
  react/prop-types: off
  space-before-function-paren: off

I have eslint installed via npm in node_modules and all I know is that with .eslintrc in the project root folder ES6 linting works and without it, it doesn't.

Hope this helps...

0

To be more convenient. Set jsconfig.json in your folder.

{
    "compilerOptions": {
        "target": "esnext"
    }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.