🌈
PrettierでJavaScriptファイルの属性を折り返すように設定する
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に記述しても効かないので、外部ファイルで設定を行います。
詳しくは↓コチラをご参照ください。
今回はコメントを入れたいため.prettierrc.jsで作成しました。この辺はお好みで。
参考サイト
Discussion