Spread operator and EsLint

Question

I want to copy object and change one of its field. Something like this:

const initialState = {   showTagPanel: false, };  export default function reducerFoo(state = initialState, action) {    switch(action.type) {     case types.SHOW_TAG_PANEL:       console.log(state);        return {         ...state,         showTagPanel: true       };      default:       return state;   } } 

This code works fine, but eslint show me error

Unexpected token (14:8)   12 |   13 |       return { > 14 |         ...state,      |         ^   15 |         showTagPanel: true   16 |       };   17 | 

Here is my .eslintrc:

{   "extends": [     "eslint:recommended",     "plugin:import/errors",     "plugin:import/warnings"   ],   "plugins": [     "react"   ],   "parserOptions": {     "ecmaVersion": 6,     "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   } } 

How can I fix it ?

Answer 1

Update as of eslint 5.0.0

Source: https://eslint.org/docs/5.0.0/user-guide/migrating-to-5.0.0

Add ecmaVersion: 2018 to parserOptions in your .eslintrc file.

{   "extends": [     "eslint:recommended"   ],   "parserOptions": {     "ecmaVersion": 2018,     "sourceType": "module",     "ecmaFeatures": {       "jsx": true,     }   } } 

Original answer

Add "experimentalObjectRestSpread": true to ecmaFeatures in your .eslintrc file.

Example

{   "extends": [     "eslint:recommended"   ],   "parserOptions": {     "ecmaVersion": 6,     "sourceType": "module",     "ecmaFeatures": {       "jsx": true,       "experimentalObjectRestSpread": true     }   } } 

Answer 2

Btw, if answered from @Alexander at 15 July 2017 not solving your problem. Please change your ecmaVersion into 2018, like this:

ESLint ^5 or newer version {   "env": {...},   "extends": [...],   "parserOptions": {     "ecmaVersion": 2018, // use this.     "ecmaFeatures": {       "jsx": true // just use this on ecmaFeatures, no need "experimentalObjectRestSpread" anymore.     }   } } 

instead using "experimentalObjectRestSpread": true like this:

This is only for ESLint under v5 {   "env": {...},   "extends": [...],   "parserOptions": {     "ecmaVersion": 6,     "ecmaFeatures": {       "jsx": true,       "experimentalObjectRestSpread": true // instead this     }   } } 

For complete explanation about this, you can read here -> experimentalObjectRestSpread has been DEPRECATED.