auto format on js and jsx in vscode

Question

How can I turn my code on save

 return (
    <div>
      <h2>{counter}</h2>
      <button className="btn" onClick={handleClick} type="button" style={{ marginTop: '20px' }}
      >
        increase
      </button>
    </div>
  )

into this format in vscode I use prettier but it didnt work.

return (
    <div>
      <h2>{counter}</h2>
      <button
        className="btn"
        onClick={handleClick}
        type="button"
        style={{ marginTop: '20px' }}
      >
        increase
      </button>
    </div>
  )

You'll probably need to configure Prettier or you use another extension with Prettier. — Sally loves Lightning, Jul 25 '23 at 20:21
https://stackoverflow.com/q/39494277/17724435, refer this SO question — Rajiv Sharma, Jul 25 '23 at 20:26

score 0 · Answer 1 · answered Jul 25 '23 at 20:30

0

You should be able to do it with prettier. Go to the prettier extension settings and look for the "Single Attribute Per Line" setting and make sure that it is enabled. By default, it is turned off.

answered Jul 25 '23 at 20:30

Solly922

1

auto format on js and jsx in vscode

1 Answers1