✨

個人的に好きなPrettierの設定

2024/08/14に公開

はじめに

今までデフォルトの設定でPrettierを使ってコード整形をしていましたが、最近コードの見た目をスッキリさせたいと思ってPrettierを自分好みに設定してみました。

.prettierrc

{
  "printWidth": 90,
  "semi": false,
  "singleQuote": true,
}

以上！

1行あたりの最大文字数を90文字に設定。

折り返しの幅はもうちょっと広めに設定したかったので90文字にしました。
バージョンアップによって、デフォルト値が変わるものもあったりするので、明示的に定義しておくのも良いかもしれません。

文字列の囲みに"ではなく'を使用するように設定。

ダブルクォート（デフォルト）

const fruits = ["apple", "banana", "grape", "orange"]

if (fruits.includes("apple")) {
  console.log("I have an apple")
}

シングルクォート

const fruits = ['apple', 'banana', 'grape', 'orange']

if (fruits.includes('apple')) {
  console.log('I have an apple')
}

"より'の方がコードの見た目がスッキリとした印象になるので個人的に好きですね。

ステートメントの末尾にセミコロンを付与しないように設定。

セミコロンあり（デフォルト）

interface seasons {
  spring: string;
  summer: string;
  autumn: string;
  winter: string;
}

セミコロンなし

interface seasons {
  spring: string
  summer: string
  autumn: string
  winter: string
}

末尾のセミコロンが無くなることによって、こちらもコードの見た目がスッキリとした印象になるので個人的に好きですね。
ちなみに末尾にセミコロンが無いとエラーになる箇所には、セミコロンは付与されるので安心してください。

現職ではデフォルト設定でPrettierを使用していますが、個人開発の時は今回の設定でPrittierを使用しています。

結局のところ、どちらでもいいんですがTPOに応じて使い分けるようにしましょう！