Javascript 扩展运算符和EsLint

我想复制对象并更改其中一个字段。大概是这样的：

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;
  }
}

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

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

此代码工作正常，但

eslint

show me error

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

这是我的.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
  }
}

如何修复它？

从eslint 5.0.0开始更新 资料来源：

将

ecmaVersion:2018

添加到

parserOptions

中的

.eslintrc

文件中

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

原始答案 在

.eslintrc

文件中的

ecmaFeatures

中添加

“experimentalObjectRestSpread”：true

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

示例

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

---

顺便说一句，如果2017年7月15日@Alexander的回复没有解决您的问题。请将您的

ecmaVersion

更改为

2018

，如下所示：

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;
  }
}

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

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

而不是像这样使用

“experimentalObjectRestSpread”：true

：

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;
  }
}

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

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

---

有关此问题的完整解释，请阅读此处->。

尝试将

experimentalObjectRestSpread:true

添加到

的“ecmaFeatures”

。谢谢。需要将eslint更新到最新版本。我在谷歌上搜索，这是帮助我的第一个页面。非常感谢。如果仍然出现错误，请尝试在.babalrc文件中添加“transform object rest spread”。{“预设”：[“env”，“react”]，“plugins”：[“transform object rest spread”]}

“experimentalObjectRestSpread”：true

被弃用，取而代之的是

“ecmaVersion”：2018

，不幸的是，这对我不起作用。我仍然得到

…calculateStatsPerFile（消息）^^^语法错误：意外令牌。。。在createScript（vm.js:74:10）

上，不幸的是，这对我不起作用。我仍然得到

…calculateStatsPerFile（消息）^^^语法错误：意外令牌。。。在createScript（vm.js:74:10）

@Ryan，再来一条“规则”怎么样？你的项目成功了吗？我不知道你在问什么。是的，我的

.eslintrc.js

文件中也有一块

规则。