カテゴリーアーカイブ エディタ

著者:takahashi

VSCodeでAdobe BracketsのようにHTMLの編集結果をリアルタイムで表示可能にするプラグイン”Live Server”

以前使ってたAdobe Bracketsというエディタでは、HTMLを変更すると、その変更を即座にブラウザに反映し、リアルタイムに編集結果を表示してくれる”ライブプレビュー機能”を搭載しています。

流石Webを開発することに重点を置いているだけはあります。
HTMLベースのWebページを作るときはとても重宝する機能です。

以前はファイルを保存するまでは反映されなかったのですが、現在は保存しなくてもリアルタイムで反映されるようになっています。凄いですね。

ということで、VSCodeに乗り換えてからも同様の機能が使いたくて、プラグインを探していたのですが、ついに発見しました！

Live Server – Visual Studio Market Place

Live Serverというプラグインです。
現在のAdobe Brackertsのようにリアルタイム反映はできませんが、ブラウザと連携し、ファイルを保存するごとにページを自動更新してくれる機能を持っています。

インストールをすると、VSCodeの右下に”Go Live”というボタンが出現します。

ここをクリックすると…

内部サーバーの起動と同時にデフォルトのブラウザが立ち上がります。

あとはそのままHTMLソースを編集し、変更を保存すると

こんな感じで、更新するたびに即座にブラウザの方で更新が入ります。

とても便利なので、VSCodeでWebページのコーディングをされている方は是非一度試してみてください。

著者:takahashi

もう閉じ括弧を見失わない！ VSCodeプラグイン”Bracket Pair Colorizer”

プログラミングあるあるの一つに、閉じ括弧が複数あると、どの閉じ括弧がどの開き括弧と対応しているかがわからなくなってしまうことがあります。

勿論、ちゃんとインデントを付けていれば起こりづらい問題ではありますが、コードをコピペしたり、新しくブロックを増やしたりした際などに、一時的にインデントが崩れ、どの括弧がどの括弧に対応しているのか見ながらインデントを調整する作業が必要になってしまう場合があります。

そんな時はコードエディタの機能を使うことで作業がとても楽になります。

今回はより括弧の対応をわかりやすくしてくれるVSCodeプラグインをご紹介したいと思います。
とりあえず括弧を出したいがためにｸｿコードを書いてますが悪しからず…

Bracket Pair Colorizer – Visual Studio Market Place

Bracket Paie Colorizerは対応する括弧ごとに違う色を付けることで、どの閉じ括弧がどの開き括弧と対応しているのかを分かりやすくしてくれるプラグインです。

こんな感じに、インデントを一切付けない状態でも、括弧の対応が色でわかります。
また、対応していない括弧があれば、赤色で表示してくれます。

また、対応する括弧同士を縦線でつないでくれるので、たとえインデントがずれてしまったとしても

どの括弧と対応しているかを一目でわかる形で表示してくれます。

複雑なコードをよく書いていて、しばしば括弧の対応がわからなくなってしまう…という方は是非試してみてください。

著者:takahashi

使い方がわからないPHP関数の公式ドキュメントを一瞬で表示してくれるVSCodeプラグイン”PHPDocument”

シンプルだけど、PHPでプログラミングしているときにめちゃくちゃ役に立つVisdualStudioCode(VSCode)向けプラグインを見つけました！

PHPDocumentというプラグインです。

使い方もとてもシンプル。

使い方がわからない関数の上で右クリックして、コンテキストメニューから”PHP Document”をクリックするだけ。

こんな感じで、一瞬でPHP公式ドキュメントの当該ページをエディタ内に表示してくれます。

PHPの関数にはかなりたくさんの種類があり、「この関数ってどんな使い方だったっけ…」という場面が結構あるので、いちいちブラウザを開かずに検索できるのはシンプルだけどとてもありがたい機能です。

なお、デフォルトでは英語のドキュメントを表示しますが、複数の言語にも対応しており、VSCodeの設定の

PHPDocument: Language

の項目から言語を選択できます。

ちゃんと日本語も利用できるようになっているのは嬉しいですね。

PHPでプログラムをされる方は是非一度試してみてください。