【TypeScript】prettier.jsonでフォーマット設定するよ！よく使用される設定をあげてみます
Prettierはコードのフォーマットを統一するためのツールであり、TypeScriptプロジェクトでよく使われる設定の例を紹介していきます
紹介する設定をプロジェクトのルートにあるprettier.jsonファイルに追記することで、フォーマットのスタイルを制御できますよ！
{
"printWidth": 80, // 1行の最大長さ
"tabWidth": 2, // インデントのスペース数
"useTabs": false, // タブではなくスペースを使用
"semi": true, // 文末にセミコロンを付ける
"singleQuote": true, // シングルクォートを使用
"trailingComma": "es5", // 末尾のカンマをどこに追加するか（ES5対応）
"bracketSpacing": true, // オブジェクトリテラルの中括弧の前後にスペースを入れる
"arrowParens": "always", // アロー関数の引数に括弧を常に付ける
"endOfLine": "lf", // 改行コードをLFに統一
"jsxSingleQuote": false, // JSXでシングルクォートを使用しない
"jsxBracketSameLine": false, // JSXの閉じタグを同じ行に置かない
"quoteProps": "as-needed", // オブジェクトのプロパティのクォートを必要な場合のみにする
"proseWrap": "preserve", // Markdownなどの文章の改行を保持する
"htmlWhitespaceSensitivity": "css" // HTMLの空白の扱いをCSSに従う
}各設定項目の詳細を説明していきます
tabWidth
インデントに使用するスペースの数を設定します。デフォルトは2です
useTabs
インデントにタブを使用するかどうかを設定します
デフォルトはfalse（スペースを使用）です
semi
文末にセミコロンを付けるかどうかを設定します
デフォルトはtrueです
singleQuote
シングルクォートを使用するかどうかを設定します
デフォルトはfalse（ダブルクォート）です
trailingComma
配列やオブジェクトの末尾にカンマを付ける場所を設定します
デフォルトはes5です
bracketSpacing
オブジェクトリテラルの中括弧の前後にスペースを入れるかどうかを設定します
デフォルトはtrueです
arrowParens
アロー関数の引数に括弧を付けるかどうかを設定します
デフォルトはalwaysです
endOfLine
改行コードを設定します
デフォルトはlf
lf（Line Feed）、crlf（Carriage Return + Line Feed）、cr（Carriage Return）、autoから選ぶことができます
jsxSingleQuote
デフォルトはfalseです
JSX内でシングルクォートを使用するかどうかを設定します
jsxBracketSameLine
デフォルトはfalseです
JSXの閉じタグを同じ行に置くかどうかを設定します
quoteProps
オブジェクトリテラルのプロパティのクォートをどのように扱うかを設定します
デフォルトはas-neededですが、”as-needed”、”consistent”、”preserve”から選べます
proseWrap
Markdownなどの文章の改行をどのように扱うかを設定します
デフォルトはpreserveです。
htmlWhitespaceSensitivity
HTMLの空白の扱いを設定します
デフォルトはcssですが、”css”, “strict”, “ignore”から選べます
prettier.jsonでフォーマットをルール化してしまいましょう！！
是非フォローしてください
最新の情報をお伝えします
