ESLint解析错误：意外的令牌

Question

I'm making an app with React JS and I use eslint.

But I'm getting this error

 6:22  error  Parsing error: Unexpected token ..

for the next code :

import {AUTH_USER, UNAUTH_USER} from '../actions/types';

export default function (state = {}, action) {
    switch (action.type){
        case AUTH_USER:
            return { ...state, authenticated: true };
        case UNAUTH_USER:
            return { ...state, authenticated: false };
        default:
            return state;
    }
}

.eslintrc file is as follows :

{
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "experimentalObjectRestSpread": true
    }
  },

  "plugins": [
    "react"
  ],

  "env": {
    "es6": true,
    "browser": true,
    "node": 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": 0,
    "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": 0,
    "react/react-in-jsx-scope": 1,
    "react/require-extension": 1,
    "react/self-closing-comp": 1,
    "react/sort-comp": 1,
    "react/wrap-multilines": 1
  }
}

If I try without "experimentalObjectRestSpread": true in the ecmaFeatures in the eslintrc file I get the error.

When I with it I don't see error but it still won't work. I get something like

Any advice?

EDIT

The gulpfile.js is as follows :

    'use strict';

var gulp = require('gulp');
var connect = require('gulp-connect');
var open = require('gulp-open');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var concat = require('gulp-concat');
var babelify = require('babelify');
var sass = require('gulp-sass');
var merge = require('merge-stream'); // Merge all styles (css, sass and less) in one big bundle
var lint = require("gulp-eslint");

var config = {
    port: 8001,
    devBaseUrl: 'http://localhost',
    paths: {
        html: "./src/*.html",
        externals: "./src/assets/externals/*.js",
        js: "./src/**/*.js",
        images: './src/assets/images/**/*',
        fonts: './src/assets/css/fonts/*',
        css: ["./src/assets/css/*.css"],
        sass: './src/assets/css/*.scss',
        dist: "./dist",
        mainJS: "./src/main.js"
    }
};


gulp.task('connect', ['watch'], function () {
    connect.server({
        root: ['dist'],
        port: config.port,
        base: config.devBaseUrl,
        livereload: true,
        fallback: 'dist/index.html'
    })
});

gulp.task('open', ['connect'], function () {
    gulp.src('dist/index.html')
        .pipe(open({uri: config.devBaseUrl + ":" + config.port + "/"}));
});


gulp.task('html', function () {
    gulp.src(config.paths.html)
        .pipe(gulp.dest(config.paths.dist))
        .pipe(connect.reload());
});


gulp.task('externals', function () {
    gulp.src(config.paths.externals)
        .on('error', console.error.bind(console))
        .pipe(concat('external.js'))
        .pipe(gulp.dest(config.paths.dist + '/externals'))
        .pipe(connect.reload());
});


gulp.task('js', function () {
    browserify(config.paths.mainJS)
        .transform('babelify', {presets: ['es2015', 'react']})
        .bundle()
        .on('error', console.error.bind(console))
        .pipe(source('bundle.js'))
        .pipe(gulp.dest(config.paths.dist + '/scripts'))
        .pipe(connect.reload());
});


gulp.task('images', function () {
    gulp.src(config.paths.images)
        .pipe(gulp.dest(config.paths.dist + '/images'));
});


gulp.task('styles', function () {
    var cssStyles = gulp.src(config.paths.css)
        .pipe(concat('styles.css'));

    var sassStyles = gulp.src(config.paths.sass)
        .pipe(sass())
        .pipe(concat('styles.scss'));

    var mergedStream = merge(cssStyles, sassStyles)
        .pipe(concat('bundle.css'))
        .pipe(gulp.dest(config.paths.dist + '/css'))
        .pipe(connect.reload());

    return mergedStream;
});

gulp.task('fonts', function () {
    gulp.src(config.paths.fonts)
        .pipe(gulp.dest(config.paths.dist + '/css/fonts'));
});

gulp.task('lint', function () {
    return gulp.src(config.paths.js)
        .pipe(lint())
        .pipe(lint.format());
});


gulp.task('watch', function () {
    gulp.watch(config.paths.html, ['html']);
    gulp.watch(config.paths.js, ['js', 'lint']);
    gulp.watch(config.paths.externals, ['externals', 'lint']);
    gulp.watch([config.paths.css, config.paths.sass], ['styles']);
    gulp.watch(config.paths.images, ['images']);
});

gulp.task('default', ['html', 'js', 'styles', 'externals', 'images', 'fonts', 'lint', 'open', 'watch']);

And the package.json is as follows :

    {
  "name": "",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "dependencies": {
    "react": "^15.1.0",
    "react-dom": "^15.1.0",
    "react-fontawesome": "^1.1.0",
    "react-redux": "^4.4.5",
    "react-router": "^2.4.1",
    "react-slick": "^0.12.2",
    "redux": "^3.5.2",
    "redux-thunk": "^2.1.0"
  },
  "devDependencies": {
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "babelify": "^7.3.0",
    "browserify": "^13.0.1",
    "eslint-plugin-react": "^5.1.1",
    "gulp": "^3.9.1",
    "gulp-browserify": "^0.5.1",
    "gulp-concat": "^2.6.0",
    "gulp-connect": "^4.0.0",
    "gulp-eslint": "^2.0.0",
    "gulp-open": "^2.0.0",
    "gulp-sass": "^2.3.1",
    "merge-stream": "^1.0.0",
    "reactify": "^1.1.1",
    "vinyl-source-stream": "^1.1.0"
  },
  "browserify": {
    "transform": [
      [
        "reactify",
        {
          "es6": true
        }
      ]
    ]
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

Answer 1

You need to install:

npm install --save-dev babel-plugin-transform-object-rest-spread

then add :

"plugins": ["transform-object-rest-spread"]

together with your presets.

See redux doc at the bottom of the page.

Since the object spread syntax is still a Stage 2 proposal for ECMAScript you'll need to use a transpiler such as Babel to use it in production. You can use your existing es2015 preset, install babel-plugin-transform-object-rest-spread and add it individually to the plugins array in your .babelrc.

{ "presets": ["es2015"], "plugins": ["transform-object-rest-spread"] }

Answer 2

It is even easier with just using "experimentalObjectRestSpread": true in the ecmaFeatures section.

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