How to support ES7 in ESLint

Question

I have a project setup with WebPack to use ESLint and I'm wanting to use ES7 for the inline bind operator ::. Currently I'm getting the parse errors shown below

/Users/ryanvice/Documents/Code/pluralsight-redux-starter/src/components/project/ProjectsPage.js (1/0)
  ✖  7:27  Parsing error: Unexpected token :

/Users/ryanvice/Documents/Code/pluralsight-redux-starter/src/routes.js (2/2)
  ✖  6:26  Parse errors in imported module './components/project/ProjectsPage': Unexpected token : (7:27)  import/namespace
  ✖  6:26  Parse errors in imported module './components/project/ProjectsPage': Unexpected token : (7:27)  import/default
  !  6:26  Parse errors in imported module './components/project/ProjectsPage': Unexpected token : (7:27)  import/no-named-as-default
  !  6:26  Parse errors in imported module './components/project/ProjectsPage': Unexpected token : (7:27)  import/no-named-as-default-member

✖ 3 errors ! 2 warnings (4:45:40 PM)

using the following .eslintrc configuration which include "ecmaVersion": 7

{
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:import/warnings"
  ],
  "plugins": [
    "react"
  ],
  "parserOptions": {
    "ecmaVersion": 7,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  },
  "env": {
    "es6": true,
    "browser": true,
    "node": true,
    "jquery": true,
    "mocha": true
  },
  "rules": {
    "quotes": 0,
    "no-console": 1,
    "no-debugger": 1,
    "no-var": 1,
    "semi": [1, "always"],
    "no-trailing-spaces": 0,
    "eol-last": 0,
    "no-unused-vars": 0,
    "no-underscore-dangle": 0,
    "no-alert": 0,
    "no-lone-blocks": 0,
    "jsx-quotes": 1,
    "react/display-name": [ 1, {"ignoreTranspilerName": false }],
    "react/forbid-prop-types": [1, {"forbid": ["any"]}],
    "react/jsx-boolean-value": 1,
    "react/jsx-closing-bracket-location": 0,
    "react/jsx-curly-spacing": 1,
    "react/jsx-indent-props": 0,
    "react/jsx-key": 1,
    "react/jsx-max-props-per-line": 0,
    "react/jsx-no-bind": 1,
    "react/jsx-no-duplicate-props": 1,
    "react/jsx-no-literals": 0,
    "react/jsx-no-undef": 1,
    "react/jsx-pascal-case": 1,
    "react/jsx-sort-prop-types": 0,
    "react/jsx-sort-props": 0,
    "react/jsx-uses-react": 1,
    "react/jsx-uses-vars": 1,
    "react/no-danger": 1,
    "react/no-did-mount-set-state": 1,
    "react/no-did-update-set-state": 1,
    "react/no-direct-mutation-state": 1,
    "react/no-multi-comp": 1,
    "react/no-set-state": 0,
    "react/no-unknown-property": 1,
    "react/prefer-es6-class": 1,
    "react/prop-types": 1,
    "react/react-in-jsx-scope": 1,
    "react/require-extension": 1,
    "react/self-closing-comp": 1,
    "react/sort-comp": 1,
    "react/wrap-multilines": 1
  }
}

Inline bind operator `::` is not part of ES7. It's a stage 0 proposal currently. With the speed proposals have been moving, it might make it to ES10 or 11... — Ilya Volodin, Jul 13 '16 at 13:07

score 20 · Accepted Answer · answered Jul 11 '16 at 05:02

20

Assuming you are using Babel, you probably want to use babel-eslint as your ESLint parser ("parser": "babel-eslint",).

answered Jul 11 '16 at 05:02

Juho Vepsäläinen

26,573
12
79
105

Sounds like missing Babel config (preset env). Better open a separate question for that with more information. – Juho Vepsäläinen Oct 16 '18 at 04:48

score 2 · Answer 2 · answered Apr 02 '19 at 16:17

Add this to your .eslintrc.json:

"parserOptions": {
    "ecmaVersion": 2016
},

Source: https://eslint.org/docs/user-guide/configuring#specifying-parser-options

ecmaVersion - set to 3, 5 (default), 6, 7, 8, 9, or 10 to specify the version of ECMAScript syntax you want to use. You can also set to 2015 (same as 6), 2016 (same as 7), 2017 (same as 8), 2018 (same as 9), or 2019 (same as 10) to use the year-based naming.

How to support ES7 in ESLint

2 Answers2

Linked