🌈

PrettierでJavaScriptファイルの属性を折り返すように設定する

2022/07/28に公開

JSファイル内では属性を折り返したい

Reactを勉強していてコンポーネントの属性を折り返したくなったのですが、VSCode上でPrettierの設定を見てもそのような項目はありませんでした。

<Button color="red" fn={count} bool />;
<!-- ↓こうしたい -->
<Button
  color="red"
  fn={count}
  bool
/>

singleAttributePerLineを設定すれば折り返される

.prettierrc.js
module.exports = {
  singleQuote: true,
  singleAttributePerLine: true, //属性を折り返す
};

これで折り返されるようになります。

VSCodeの設定ではなく外部の設定ファイルを利用する

ちなみにこちらのオプションはVSCodeのsetting.jsonに記述しても効かないので、外部ファイルで設定を行います。

詳しくは↓コチラをご参照ください。
https://prettier.io/docs/en/configuration.html
今回はコメントを入れたいため.prettierrc.jsで作成しました。この辺はお好みで。

参考サイト

https://prettier.io/docs/en/options.html#single-attribute-per-line

Discussion