VSCodeのPrettier+black環境の作り方

Formatterとは

コードの種類に応じて、自動で空白とか改行などの整形を行う拡張機能のこと。
有名なものでは、Prettier(JS, TS, yaml, html等が対応)やBlack(python用)などがある。
基本的にはPrettierを用いれば、大抵のプログラムは対応しているが、
PrettierはPythonに非対応のため、Pythonの時のみBlackを使うように設定する必要がある。

Prettierのインストール

VSCodeでPrettierを使用するには、拡張機能をインストールします。
まずVS CodeのExtension panelでPrettier-Code Formatterを検索しインストールします。

default formatterをPrettierに設定

画面左上のタブからCode→基本設定→設定を開き、
editor.defaultFormatterと検索して、Prettier-Code Formatterを選択
これでdefault formatterをPrettierに変更することができた。

次にeditor.formatOnSaveと検索してこれをTrueに変える。(ファイル保存時にFormatterを適用する設定)

Blackのインストール

下記コマンドでBlackをインストールする。

pip3 install black

次に画面左上のタブからCode→基本設定→設定を開き、
python.formatting.providerと検索して、blackを選択

しかしこのままだと、Pythonであろうとdefault formatterであるPrettierが適用されてしまい、エラーが出る。
このため、pythonコードの場合のみ、prettierではなくblackを適用するよう下記の設定を追加する必要がある。

python時のみdefault formatterを適用しない設定の追加

画面左上のタブからCode→基本設定→設定を開き、右上の３つのアイコンの一番左のものを押して、settings.jsonを開く。

そこで、一番下に

  "[python]": {
    "editor.defaultFormatter": null,
  },

というPythonの時のみ動作する例外設定を追加する。

最終的にsettings.jsonが以下のようになっていることを確認する。

settings.json

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "python.formatting.provider": "black",
  "[python]": {
    "editor.defaultFormatter": null,
  },
}

formatterの動作確認

pythonファイルのフォーマット(black)

下記のようなフォーマットが壊れたpythonファイルを作成して、保存するとちゃんと整形されることを確認する。

test.py（整形前）

a = [     1, 
2,        3]

test.py（整形後）

a = [1, 2, 3]

その他ファイルのフォーマット(prettier)

下記のようなフォーマットが壊れたjsファイルを作成して、保存するとちゃんと整形されることを確認する。

test.js（整形前）

const       test = 
    3;

const func =() =>      {
        return    0; 
};

test.js（整形後）

const test = 3;

const func = () => {
  return 0;
};