VSCodeのおすすめプラグイン（CakePHP開発用）

はじめに

• VSCode（version:1.42.1）でCakePHP3の開発をするにあたり、いろいろ試してみて私が採用しているプラグイン（拡張機能）をざっくり紹介します（n番煎じ）
• 詳細な設定は、各プラグイン名にVSCodeのマーケットプレイスのリンクを張っておりますので、そちらからご覧ください
• 環境はWindows 10を想定しています
• VSCodeのオススメ設定（settings.json）については別記事で紹介しようと思います （未着手）
  • ⇒　VSCodeのおすすめ設定（CakePHP開発用）

追記（2021年08月12日）

• 当時記載していた以下のプラグインを記事から削除しました
  • PHP import checker
    • PHP Intelephenseに乗り換えたため
  • PHP IntelliSense
    • PHP Intelephenseに乗り換えたため
  • Rainbow CSV
    • CSVは結局Excelで開くため
• 以下のプラグインを記事に追加しました
  • change-case
  • Encode Decode
  • Git Graph
  • PHP Getters & Setters
  • PHP Intelephense
  • Remote - WSL

ざっくりプラグイン紹介

1. Auto Rename Tag
   • 言語モード（右下の右から3番目くらいの項目）がHTMLの時、タグを変更すると閉じタグも同時に変更してくれる
2. Bookmarks
   • Ctrl+Alt+kでコード行にブックマーク
   • Ctrl+Alt+lでファイル内のブックマーク行にジャンプ
   • ソースを追うのに便利
3. Brancket Pair Colorizer
   • カッコのペアは同色、別カッコは別色で表示するため、if文の複数の条件等で間違えにくい
4. change-case
   • キャメルケース、スネークケース、パスカルケース、ケバブケースへの変換ができる
   • VSCode標準機能の正規表現検索や矩形選択で複数のキーワードを選択状態にし、まとめて上記の変換することで、同じ単語のクラス名やメソッド名、プロパティ名や変数名を使いまわす時に楽できる
5. Code Spell Checker
   • 英語のスペル誤りを下線（波線）で表示してくれるため、正しい命名ができる
6. Color Highlight
   • HTMLカラーコードの記述（#00008b等）で、文字背景をその色で表示するため、すぐ色の確認ができる
7. Encode Decode
   • 日本語がUnicode形式で読めないものを読める形式に変換できる
   • ブラウザのF12でAPIのレスポンスを確認した際、日本語がUnicode形式のため、以下の手順で確認できる
     1. APIのレスポンスを新規ファイル（言語モードはJSON）に貼り付け
     2. Ctrl+f＆正規表現検索ON
     3. 検索ボックスで\\u.{4}で日本語のUnicodeを検索
     4. Alt+Enterでマルチカーソル化
     5. Ctrl+Alt+cでUnicode to Stringを選択
8. Docker
   • PowerShell等でコマンドを入力しなくても、右クリックでコンテナに入ったりログを確認したり、いろいろできる
     ※Docker for Windowsのインストールが必要
9. Excel to Markdown table
   • 言語モードがMarkdownの時、Excelのセルコピーを、Shift+Alt+VでMarkdownのテーブル形式で貼り付ける
   • 簡単にREADME.mdやRedmine、Backlogで表を作成できる
10. file-icons
    • サイドバーのファイルツリーのファイル名の横に、ファイルに対応するアイコンを表示する
    • 何のファイルかが直感的にわかる
    • setting.jsonに以下を追加する
      • "workbench.iconTheme": "file-icons",
11. gettext
    • 翻訳ファイル.po、.potのシンタックスハイライトをしてくれる
12. Git Graph
    • ブランチの樹形図が確認できる
    • バグ混入時期調査時に確認することがある
13. Git History
    • Gitのコミット履歴の一覧や、コミットログの検索が、コマンドを入力することなくVSCodeのGUI上でできる
      ※Gitのインストールが必要
14. GitLens
    • コードをクリックすると、その行をいつ、誰が、何のコミットメッセージをしたのかを表示する
    • 戦犯がすぐわかる（つらい）
      ※Gitのインストールが必要
15. Japanese Language Pack for Visual Studio Code
    • VSCodeが日本語で表示される
16. Japanese Word Handler
    • 日本語の選択時（Ctrl+Shift+矢印）に、日本語の単語単位で移動できる
17. Log File Highlighter
    • 言語モードがLogの時、カラー表示する
    • 内容が見えやすくなる
18. Markdown All in One
    • 言語モードがMarkdownの時、編集時に入力補完してくれる
    • Ctrl+bでBold体にする等のショートカットキーもある
    • 今の記事作成にも役立っている
19. Markdownlint
    • 言語モードがMarkdownの時、編集時にスタイルチェックをしてくれる
    • ルールに適さない入力は下線（波線）で表示される
    • 箇条書きのスペース4つは下線が出るが、私は無視している（backlogのリスト表示が正しくできないので）
20. nginx.conf
    • nginxの設定ファイル（.conf）をシンタックスハイライトしてくれる
21. One Dark Pro
    • Atomエディタと同様のテーマ（背景色やシンタックスハイライト色）を反映する
    • テキスト選択すると一致箇所を強調してハイライトしてくれるところがGood
    • setting.jsonに以下を追加する
      • "workbench.colorTheme": "One Dark Pro",
22. Output Colorizer
    • VSCodeが出力するログをカラー表示する
23. Path Autocomplete
    • ディレクトリパスの補完をしてくれる
    • パス記述誤りが減る
24. PHP Debug
    • PHPファイルのコードにブレークポイントを設定し、デバッグを行える
      ※PHPのインストール、XDebugのインストールが必要
      WSL2 & Docker環境であればこちらのコミットのように設定することでデバッグ可能
      [GitHub]q23isline/reinventing_the_wheel PHPでデバッグ実行できるように追加
25. PHP DocBlocker
    • メソッドコメントを補完してくれる
26. PHP Getters & Setters
    • クラスのプロパティを右クリックすることで自動的にGetter、Setterメソッドを作成してくれる
27. PHP Intelephense
    • PHPのコード補完やメソッドの引数のヘルプをホバー表示する等、いろいろしてくれる
    • useしているのに利用していないクラス、未使用変数があれば薄いグレー文字色で知らせてくれる
    • new Xxxx()と記載すると、Xxxxクラスが定義済であればサジェストが表示され、選択すると自動的にファイルの先頭にuseを記載してくれるところがグッド
    • Quick Startの実施を忘れない
28. phpcbf
    • PHPのコード静的解析を行ってくれる
    • Shift+Alt+Fでコードを自動できれいにしてくれる
      ※Composer、Composerを利用してphpcsのインストールが必要
    • setting.jsonに以下を追加する
      • "phpcbf.executablePath": "C:/Users/xxxxx/AppData/Roaming/Composer/vendor/bin/phpcbf.bat", // phpcbf.batへのパス
      • "phpcbf.standard": "CakePHP",
    • WSL2環境であれば以下の記事を参照
      • [Qiita]WSL2のUbuntuでphpcsを使う（VSCode）
29. phpcs
    • PHPのコード静的解析を行ってくれる
    • インデントずれている、スペースがない、等の箇所に下線（波線）を表示する
      ※Composer、Composerを利用してphpcsのインストールが必要
    • setting.jsonに以下を追加する
      • "phpcs.executablePath": "C:/Users/xxxxx/AppData/Roaming/Composer/vendor/bin/phpcs.bat", // phpcs.batへのパス
      • "phpcs.standard": "CakePHP",
    • WSL2環境であれば以下の記事を参照
      • [Qiita]WSL2のUbuntuでphpcsを使う（VSCode）
30. Regex Previewer
    • 入力している正規表現の一致を、適当な文字列と並べて確認できる
    • 正規表現が正しく書けているかリアルタイムでテストできる
    • 確認時に正規表現の後ろにgmをつけることを忘れない（/正規表現/gm）
31. Remote - WSL
    • WSL2環境で開発しているならば必要
32. Sort lines
    • 文字列の羅列を右クリックでソートできる
    • Excelを使うまでもない、簡単なソートがしたい時に利用
33. SQL Formatter
    • 言語モードがSQLの時、SQL文を貼り付けると、きれいにフォーマットして表示してくれる
    • 長くて複雑なSQLも見やすくできる
    • ログに出力されているSQLの解読に便利
34. TODO Highlight
    • TODO:を強調表示してくれる
    • 別作業で時間を開けてしまう時に「TODO: 内容」と記載しておくことで忘れにくい
35. zenkaku
    • 全角スペースを強調表示してくれる
    • 全角スペースで動かないSQLやプログラムに、悩まされずに済む
36. テキスト校正くん
    • 日本語の文章をチェックしてくれる
    • ですます調・だである調の混在や、同じ助詞の繰り返し等があると、下線（波線）を表示する
    • 和文に半角文字や外来語カタカナ表記には伸ばし棒（マスター等）で下線が出るが、私は無視している（マスタを伸ばすのは好みではないので）

おわりに

• プラグインの利用にあたっては、本当にたくさんの記事を参考にさせていただきましたので、ここで感謝いたします
  （昔参考にしていた記事が見つからなかった…）
• 開発言語が変わっても、コード静的解析、コード自動補完、デバッグ系以外のプラグインは流用が利くことを改めて気づきました
• この記事が他のエンジニアの参考になれば幸いです

引用URL元

• Extensions for Visual Studio family of products | Visual Studio Marketplace