Prevent Atom Beautify from auto-formatting es6 import/object de-structuring (React)

Question

I am working in the atom text editor, on a project in React, using the es6 import statement, and attempting to format my code using atom-beautify (0.33.4). The start of one of my files is as follows:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import axios from 'axios';

import { updateUser, updateUserLocation } from '../redux/reducers/user';

class Form extends Component {
  constructor(props) {
    super(props)
    this.state = {
      submitEnabled: false,
      lat: '',
      long: '',
      zip: '',
      city: '',
      state: '',
    }
  }

  validateName = (e) => {
    e.preventDefault();
    const { name, value } = e.target;
    const nameRegExp = /^[A-Za-zÀ-ÿ ,.'-]+$/;

    if (nameRegExp.test(value)) this.validInput(e)
    else this.invalidInput(name);
  }

Currently, if I use a keymap or otherwise auto-format my code it yeilds:

1    import React, {
2      Component
3    } from 'react';
4    import {
5      connect
6    } from 'react-redux';
7    import {
8      Link
9    } from 'react-router-dom';
10   import axios from 'axios';
11
12   import {
13     updateUser,
14     updateUserLocation
15   } from '../redux/reducers/user';
16
17   class Form extends Component {
18     constructor(props) {
19       super(props)
20       this.state = {
21         submitEnabled: false,
22         lat: '',
23         long: '',
24         zip: '',
25         city: '',
26         state: '',
27       }
28     }
29
30     validateName = (e) => {
31       e.preventDefault();
32       const {
33         name,
34         value
35       } = e.target;
36       const nameRegExp = /^[A-Za-zÀ-ÿ ,.'-]+$/;
37       if (nameRegExp.test(value)) this.validInput(e)
38       else this.invalidInput(name);
39     }

Is there a way I can disable atom-beautify from auto-formatting for es6 import statements (lines 1-4 of pre-formatted snippit) and es6 object de-structuring (line 23 of pre-formatted snippit).

Thank you in advance for any responses.

score 3 · Answer 1 · answered Nov 27 '18 at 15:32

3

If you are using js-beautify as your underlying engine, set brace-style to collapse,preserve-inline. Here's the Atom UI equivalent:

You can try this out on beautifier.io by using the following UI settings:

You can also do this by overriding the UI settings with the following in "Additional settings":

{
    "brace_style": "collapse,preserve-inline"
}

answered Nov 27 '18 at 15:32

BitwiseMan

1,887
13
24

:/ this doesn't seem to be working.. thanks for the response – Andrew Watters Dec 03 '18 at 23:35
1

@AndrewWatters How does it not work? I don't own the atom plugin, but I've tried it and it works for me. There's a number of ways settings can be provided, so it might be settings problem. You can come chat on https://gitter.im/beautify-web/js-beautify if you like. – BitwiseMan Dec 05 '18 at 02:29
it worked for me in vs code too.. addded this to beautify.config inside settings.json file – FishLegs Dec 12 '20 at 12:24

Prevent Atom Beautify from auto-formatting es6 import/object de-structuring (React)

1 Answers1