インデントを揃えたい！

インデントを揃えたい

インデントとは、文書やプログラムの行頭に空白（スペースやタブ）を挿入し、文字の開始位置を右にずらす「字下げ」のことです。
コードを書いた時に、コードの開始位置がバラバラで階層構造などを合わせのに手動で手間がかかっていました。
プラグインを使うと保存時に自動でインデントをあわせてくれて便利になります。

インデントの用途・メリット

プログラミングでは「コードのブロック（ifやforなど）の範囲を視覚化する。」ことができて、可読性の向上や、階層の把握、チーム作業でのコード理解を助けるなどのメリットがあります。

プラグインの導入方法

私は今はVScodeを利用していまして、以下のプラグインを利用しています。

■html/css/javascript
Prettier

■PHPテンプレ(wordpress)
Intelephense
※Intelephense のフォーマッタはPHP部分に強く、テンプレ混在でも比較的安全ということです。

VScodeの拡張機能で、上記プラグインをインストールしてください。

setting.jsonの設定

VScodeの「設定」をクリックして、検索窓に「setting.json」を入力して「設定（UI）を開く」をクリックします。

・保存時（「Ctrl+s」でもOK)にはPrettierを利用して自動整形します。
・但し、PHPはIntelephenseを利用して必要に応じてコマンドで手動整形（Shift + Alt + F）を行います。

以下の設定をsetting.jsonに投入して調整します。

 ■setting.json

　// 保存時に自動で Prettier
  "editor.formatOnSave": true,

  // 既定フォーマッタ
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "notebook.defaultFormatter": "esbenp.prettier-vscode",

  // Prettier 設定
  "prettier.printWidth": 360,

  // 言語ごとに明示（← ここ重要）
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
  },

  // ★PHP（WPテンプレ）は Intelephense に任せる
  "[php]": {
    "editor.defaultFormatter": "bmewburn.vscode-intelephense-client",
    // 手動整形だけ使う Shift + Alt + F
    "editor.formatOnSave": false,
  },