Formating issues with Atom Beautify

Question

I'm frustrated with the behavior of Atom Beautify.

Actual Behavior:

import React, { useState } from 'react'

export default function MyComponent() {
    return ( <div>
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div> )
}

Expected Behavior

import React, { useState } from 'react'

export default function MyComponent() {
    return (
        <div>
            <ul>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div> 
    )
}

How can I get this formatting by default?

Answer 1

Atom's Beautify has a configuration file that you can modify to get your desired settings I believe, if you go to the package and click on settings you should be able to make some changes there to get what you need