VS Code with es6

Visual Studio-Code

Visual Studio-Code Problem Overview


I am getting the linting error in my code 'import' is only available in ES6 (use 'esversion: 6').

Everything es6 related is throwing an error. Not sure what I have to configure to get it to work.

Visual Studio-Code Solutions


Solution 1 - Visual Studio-Code

Add a file named .jshintrc to your project and inside this file type this:

{
    "esversion": 6
}

As you can see it here:

enter image description here

The full documentation of jshint options are found here: http://jshint.com/docs/options

Solution 2 - Visual Studio-Code

Edit: I've added a way to enable es6 if you use ESLint instead of JSHint as well as updating the screenshots since VSCode has changed since my original answer.

JSHint Method:

If you are using JSHint, you can add the following to your settings:

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

ESLint Method:

If you are using ESLint, you can add the following to your settings:

"eslint.options": {
    "env":{
        "es6":true
    },
    "parserOptions": {
        "ecmaVersion": 6 // or 7,8,9
    }
}

ESLint Configuration Documentation

How to update the settings

  1. Neither JSHint or ESLint are enabled in a fresh version of VS Code, so you'll need to install the extension(s) by going to extensions and then searching for your preferred linter.

  2. In VS Code, head to settings

VS Code Settings

  1. When the settings display you'll see the settings sections:

User and Workspace Settings Tabs

Note that there are two sections where you can customize your settings, User Settings and Workspace Settings

User Settings Is where you should apply any global settings you will want for any project you will ever work on.

Workspace Settings Is where you can make settings changes that should only be applied to your current project.

In my case, since I know that only some of my projects can use ES6, I need to have the error hinting to warn me if I'm using ES6 my non-ES6 projects...so I set this only to my Workspace Settings

But, if you know that anything you code in VS Code is going to be an ES6, project, then save a step, and add it to your user settings.

  1. Click on either User/Workspace depending on your preference. Search for JSHint or ESLint (whichever you use). Click on any of the Edit in settings.json links, it doesn't matter which one.

Edit in settings.json

  1. Add the pertinent settings depending on whether you use JSHint or ESLint:

JSHint

Adding the JSHint Setting

ESLint

Adding the ESLint Setting

Solution 3 - Visual Studio-Code

You can add "esversion": 6 to "jshint.options" in the user settings.

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

Solution 4 - Visual Studio-Code

Just to round out the excellent suggestions already submitted, you can also set this on a file by file basis by added this escaped line (and similar for other jshint settings) to the top of your file.

// jshint esversion:6

Actually you can add it anywhere, but it only effects subsequent code, allowing you to flip settings on and off if you're desperate to do something weird.

Solution 5 - Visual Studio-Code

Add the next hint before your code:

/* jshint esversion: 6 */

Example

Solution 6 - Visual Studio-Code

Make sure, you do the above configurations with the json but also remove/disable the jshint extension for workspace if you're using eslint and vice versa.,

Solution 7 - Visual Studio-Code

Disable your jshint extension like this:

https://i.stack.imgur.com/mYnM2.png

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionerichardson30View Question on Stackoverflow
Solution 1 - Visual Studio-CodeNasreddineView Answer on Stackoverflow
Solution 2 - Visual Studio-CodeIanView Answer on Stackoverflow
Solution 3 - Visual Studio-CodeUX NomaanView Answer on Stackoverflow
Solution 4 - Visual Studio-CodeDavid WoodsView Answer on Stackoverflow
Solution 5 - Visual Studio-CodeHarlin AceroView Answer on Stackoverflow
Solution 6 - Visual Studio-CodevamView Answer on Stackoverflow
Solution 7 - Visual Studio-CodeMohammad NaderiView Answer on Stackoverflow