loganknecht commented 7 years ago

Hi all! I love the tool, and its goal.

Was playing around with it, and I keep getting an error thrown at me for some files.

I have this bit of code

app.js

"use strict";

// Third-Party Libraries
import React from "react";
import {browserHistory, Router, Route, Link, withRouter} from "react-router";
// Custom Libraries
import AboutPage from "./aboutPage";
import Header from "./header";
import Reports from "./reports";

import ReportStore from "../stores/reportsStore";
import UserStore from "../stores/userStore";
import ValidationStore from "../stores/validationStore";

class AppRoot extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            authenticated: UserStore.authenticated(),
            userData: UserStore.getUserData()
        };

        this._onUserChange = this._onUserChange.bind(this);
    }

    _onUserChange() {
        this.setState({userData: UserStore.getUserData()});
    }

    render() {
        return (
            <div>
              <div className="page-header">
                <h1><small>Welcome to Your Doom!</small></h1>
              </div>
              <Header data={ this.state.userData }></Header>
              { this.props.children }
            </div>
            );
    }
}

export default AppRoot

That when I save it tries to format and says:

stacktrace

Error (1):Error: stdin:37:50 Unexpected token, expected }
SyntaxError: Unexpected token, expected } (37:50)
    at Parser.pp$5.raise (/usr/local/lib/node_modules/esformatter-jsx/node_modules/babylon/lib/index.js:4215:13)
    at Parser.pp.unexpected (/usr/local/lib/node_modules/esformatter-jsx/node_modules/babylon/lib/index.js:1599:8)
    at Parser.pp.expect (/usr/local/lib/node_modules/esformatter-jsx/node_modules/babylon/lib/index.js:1587:33)
    at Parser.pp$8.jsxParseExpressionContainer (/usr/local/lib/node_modules/esformatter-jsx/node_modules/babylon/lib/index.js:6190:8)
    at Parser.pp$8.jsxParseAttributeValue (/usr/local/lib/node_modules/esformatter-jsx/node_modules/babylon/lib/index.js:6140:19)
    at Parser.pp$8.jsxParseAttribute (/usr/local/lib/node_modules/esformatter-jsx/node_modules/babylon/lib/index.js:6205:42)
    at Parser.pp$8.jsxParseOpeningElementAt (/usr/local/lib/node_modules/esformatter-jsx/node_modules/babylon/lib/index.js:6216:31)
    at Parser.pp$8.jsxParseElementAt (/usr/local/lib/node_modules/esformatter-jsx/node_modules/babylon/lib/index.js:6238:29)
    at Parser.pp$8.jsxParseElementAt (/usr/local/lib/node_modules/esformatter-jsx/node_modules/babylon/lib/index.js:6251:30)
    at Parser.pp$8.jsxParseElement (/usr/local/lib/node_modules/esformatter-jsx/node_modules/babylon/lib/index.js:6293:15)

My esformatter config is set up like so:

esformatter config

{
    "preset": "default",
    "plugins": [
        "esformatter-collapse-objects",
        "esformatter-jsx",
        "esformatter-literal-notation",
        "esformatter-parseint",
        "esformatter-quote-props",
        "esformatter-quotes",
        "esformatter-remove-trailing-commas",
        "esformatter-semicolons", // This breaks js by adding semi-colons in the incorrect location
        "esformatter-spaced-lined-comment",
        "esformatter-var-each"
    ],
    "collapseObjects": {
        "ObjectExpression": {
            "maxLineLength": 79,
            "maxKeys": 1
        }
    },
    "indent" : {
        "value": "    ",
        "AlignComments": false
    },
    "jsx": {
        "alignWithFirstAttribute": false,     // do not align attributes with the first tag 
        "attrsOnSameLineAsTag": true,         // move each attribute to its own line 
        "closingTagOnNewLine": false,         // default false. if true attributes on multiple lines will close the tag on a new line 
        "firstAttributeOnSameLine": true,     // keep the first attribute in the same line as the tag 
        "formatJSX": true,                    //Duh! that's the default 
        "formatJSXExpressions": true,         // default true, if false jsxExpressions won't be recursively formatted 
        "htmlOptions": {
            // put here the options for js-beautify.html 
            "brace_style": "collapse",
            "indent_char": " ",
            "indent_size": 4,
            "max_preserve_newlines": 2,
            "preserve_newlines": true
            //wrap_line_length: 250 
        },
        "JSXExpressionsSingleLine": true,     // default true, if false the JSXExpressions might span several lines 
        "maxAttrsOnTag": 3,                   // if lower or equal than 3 attributes, they will be kept on a single line 
        "removeSpaceBeforeClosingJSX": false, // default false. if true <React.Something /> => <React.Something/> 
        "spaceInJSXExpressionContainers": " " // default to one space. Make it empty if you don't like spaces between JSXExpressionContainers 
    },
    "quotes": {
        "type": "double"
    },
    "whiteSpace": {
        "before": {
            "ObjectExpressionClosingBrace": 0,
            "ModuleSpecifierClosingBrace": 0,
            "PropertyName": 1
        },
        "after": {
            "ObjectExpressionOpeningBrace": 0,
            "ModuleSpecifierOpeningBrace": 0
        }
    }
}

The error for this is that on line 37 and 38 of app.js the esformatter-semicolons plug-in is adding semi-colons there, which makes sense.

However, then the esformater-jsx tries to format this and crashes saying the semi-colons on those lines are invalid. I'm not sure which plug-in is necessarily correct. I just know it's causing it to crash.

The easiest solution for me in the mean-time has been to disable the esformatter-semicolons plug-in. Which is a shame, because I really do appreciate that functionality.

Keen to hear your thoughts on this!