中安拓也のブログ

プログラミングについて書くブログ

VSCodeにPrettierを入れる

f:id:l08084:20180324185201p:plain

Visual Studio Codeに、Prettierを導入します。

バージョン情報

  • Visual Studio Code: 1.21.1

Prettierとは

JavaScript / TypeScript / CSS を整形してくれるコードフォーマッタです。詳しくはこちら

Prettierのインストール

まずPrettierをインストールします。

npm i -D prettier

VSCodeプラグイン

続いて、PrettierのVSCodeプラグインをインストールします。

VSCodeの拡張機能ボタンをクリックした後、Prettierをインストールしてください。

f:id:l08084:20180325135429p:plain

保存をトリガーに自動フォーマット

保存をするたびに、Prettierを起動してコードのフォーマットを整えるように設定することができます。

VSCodeの [Code] -> [基本設定] -> [設定] を選択して、settings.jsonを開き、"editor.formatOnSave": trueを挿入してください。

f:id:l08084:20180324193114p:plain