【備忘録】PhpStormユーザーがVSCode使った際の初期設定
普段PhpStormユーザーの筆者がVSCodeを導入する際に行った手順の備忘録です。
VSCodeとは？
私は公私ともにPhpStormを使っています。
入力補完やスペルチェックは便利なのですが、起動が遅かったり毎年ライセンス料がかかることが小さくないネックなのですよね。
Twitter界隈で最近割と話題になっている(私が知るの遅かっただけかも)MicrosoftのVisual Studio Code(以下、VSCode)を使ってみましたが、GUIや軽さはいい感じです。
しかも無料。
フェイスブック社内のデフォルト開発環境にも採用が決まり、俄然脚光を浴びています。
ダウンロードは公式サイトからどうぞ。
https://code.visualstudio.com/
必須の設定
まずは日本語化
https://qiita.com/ntkgcj/items/e77331932c7983dea830
英語でも使えないことはないけど、個人的には日本語の方が何かと便利です。
関数の定義元ジャンプ
http://chu-bura.hateblo.jp/entry/php/20181221
必須の機能。
VSCodeをインストールする度に設定するのはちとめんどいかも。
でも無料だから仕方ない。
ダブルクリックで$も選択する設定
https://stackoverrun.com/ja/q/12359579
コピペで変数のダブルクリックは多用しますが、初期状態だと変数の先頭の$は含まれません。
setting.jsonに$も#も含まれるように設定。
"editor.wordSeparators": "`~!@%^&*()-=+[{]}\\|;:'\",.<>/?"
設定やプラグインの同期
https://qiita.com/tomokei5634/items/22128efe306ce9bc5682
家と職場のVSCodeの設定を同期することができます。
上記の方法だとGithubアカウントが必要なので注意。
あると便利
PHP、HTML、JSにもフォーマッターを適用
「Beautify」を拡張機能にインストールし、setting.jsonを設定すればphp、html、JSにフォーマッターが効くようになります。
Laravel開発に便利
https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-extension-pack
bladeファイルでシンタックスハイライトが効くようになったりします。
設定ファイル(locale.json)に下記を忘れずに設定。
Open File -> Preferences -> Settings
“emmet.triggerExpansionOnTab": true, // enable tab to expanse emmet tags
“blade.format.enable": true, // if you would like to enable blade format
ディレクトリ階層構造の変更
https://qiita.com/toriiico/items/3070bac14946168be1ce
初期状態だとディレクトリの階層構造が浅すぎて非常に見づらいため、下記の設定で変更。
初期状態だと設定が8ですが、私は30くらいで設定しています。
ミニマップの表示／非表示を切り替える
https://www.atmarkit.co.jp/ait/articles/1811/02/news014.html
VS Codeのミニマップの表示／非表示を切り替える
邪魔なので個人的にはいらないです。
閉じタグの補完、開始タグの修正で閉じタグも自動修正
https://www.cmsmix.net/ubuntu/recommend-vscode.html
HTMLを入力する際はこれが便利。
後の設定は
今のところはこれくらいですかね。
必要なものがあれば後々追加していきます。
https://wemo.tech/1756
まとめ
拡張機能入れないと使い物にならないし、調べたりする時間もかかるのでPhpStorm使った方が楽かも。
でもVSCodeの今後に期待ですね。
EclipseよりはVSCodeの方が遥かに実用性高いですが。