VScodeの｛｝内の配列をきれいに改行させるショートカットや設定方法を教えてください。

Question

VScodeでJavaScriptやReactでコーディングする際に、オブジェクト形式で配列を下記のように｛｝内に記載する際なのですが、
下記に記載した1つ目を
2つ目のように改行しインデントも揃える方法を教えてほしいです。

import { Nav, NavbarContainer, NavLogo, MobileIcon, NavMenu, NavItem, NavLinks} from './Elements';

↓こうしたい

import { 
  Nav, 
  NavbarContainer, 
  NavLogo, 
  MobileIcon, 
  NavMenu, 
  NavItem, 
  NavLinks
} from './Elements';

ショートカットなどでできるものなのでしょうか？
初心者のため、これのことをEmmetとなどと検索しても当然出てこずなんと調べたらよいか分からず、どうしたものか悩んでいます。１つ１つ改行しインデントを揃えるのはかっこ悪く時間がとられるので、
1発でできる方法を教えてほしいです。

Answer 1

これのことをEmmetとなどと検索しても当然出てこずなんと調べたらよいか分からず、どうしたものか悩んでいます。

とのことですが、Prettierと検索されるとよいかと思います。
ご提示のコードをPrettierにかけるとこのようになります（PrettierのPlaygroundへのリンク）。
設定により整形後の形は変わりますが。
VSCodeの拡張機能も出ています。
一度がんばって設定すれば快適にコーディングできるかと存じます。参考になりましたら幸いです。

Comments

[momonga21]

やはりPrettierがベストですか。何回かインストールでハマったので使いたくないなと思っていましたが、もう1度頑張ってみます。
ありがとうございます。