🦁

VSCodeのフォーマッター「Prettier」を使おう

2022/07/13に公開

まずはPrettierをインストール

VSCodeのフォーマットスタイルを定義

現在は他の旧プロジェクトを保守する必要があるので、
新しいプロジェクトのコーディングスタイルを、旧プロジェクトを影響しないように
以下のように設定します

まずはプロジェクトに.vscode/settings.jsonというファイルを作ります
そして、中に以下のように記入します
オートセーブで正常に作動するために、下の3行の定義が必須です

settings.json
{
	"editor.formatOnSave": true,
	"editor.defaultFormatter": "esbenp.prettier-vscode",
	"files.autoSave": "onFocusChange",
}

そして、カスタムフォーマットとしての定義は、以下のようにsettings.jsonに追加するといいです

settings.json
{
+	"prettier.singleQuote": true,
+	"prettier.tabWidth": 4,
}

ちなみに、Prettierの設定は、.vscode/settings.jsonに書く以外ても
独立してルートフォルダに.prettierrc記入してもいいです

.prettierrc
{
	"singleQuote": true,
	"tabWidth": 4
}

Discussion