ある程度コードが書けるようになったらコードの見た目が気になってくると思います。コードの見た目は意外と重要で可読性が上がることによりバグの早期発見に繋がったり、チーム開発においては生産性の向上に繋がります。また、単純に見た目が整っていると気持ち良いです。

 今回はVSCodeで簡単にコードを整形する方法があるのでそれを紹介したいと思います。

1-1.PEP8について

 PythonにはPEP8というコーディング規約があります。例えばPEP8で定義されているルールには

･インテンドはスペース4つ

･コード1行の長さは最大79文字まで

･命名方法:クラスはCamelCase、関数はlowercase

などがあります。

 今回紹介する｢Black｣は、このPEP8に準拠した自動整形ツールのひとつです。

1-2. BlackをVSCodeに設定する

 まず拡張機能｢Black Formatter｣をインストールします。

  次に、VSCodeの設定画面を開き画面右上の｢設定(JSON)を開く｣をクリックしsettings.jsonファイルを開きます。このファイルに以下のコードを追加します。

追加コード:

{

    "[python]":{

        "editor.defaultFormatter":"ms-python.black-formatter",

        "editor.formatOnSave":true

    }

}

既に記載がある場合は画像のようにカンマで繋いで追加します。

これで設定は完了です。これでPythonファイルを保存すると自動で整形してくれます。

1-3.Black以外のフォーマッターについて

 PythonのコードフォーマッターはBlack以外にも存在し、｢autopep8｣や｢yapf｣などがあります。それぞれのフォーマッターには特徴があるため自分好みのフォーマッターを使うと良いでしょう。

 ちなみにBlackは｢妥協のないコードフォーマッター｣です。他のフォーマッターより厳しいルールで整形し、設定で変更できるオプションもほとんど無いです。フォーマットに関する議論を排除し開発効率を上げることを目指しています。

2-1.デフォルトのツールで自動整形

VSCodeにはデフォルトでHTMLの整形を行ってくれるツールが含まれています。

整形したいHTMLファイルを開いて以下のショートカットキーを使うことで自動整形してくれます。

･Windows：shift + Alt + F

･Mac：shift + option + F

2-2.Prettierで自動整形

｢Prettier｣も自動整形ツールで多くの言語をサポートしています(HTML,CSS,JavaScript,TypeScript,JSONなど)。

PrettierもBlackと同じように拡張機能をダウンロードしてVSCodeの設定をすることで自動整形してくれます。以下の記事で分かりやすく説明されているため参考にしてみてください。

参考記事: https://ralacode.com/blog/post/vscode-prettier/