カテゴリーアーカイブ Visual Studio Code

takahashi 著者:takahashi

VSCodeにも付属するVisual Studio LiveShareがめちゃくちゃ便利だった件

自分が普段から愛用しているエディタ Visual Studio Code ですが、その機能に”Visual Studio LiveShare”という機能があります。

Visual Studio Live Share – Microsoft

どんな機能なのかはリンク先を見ていただければわかりやすいかと思います。

簡単に説明すると、Googleドキュメントやスプレッドシートのようにエディタ画面をリアルタイムで他の人に共有したり、共同編集したりできる機能です。

MSアカウント、またはGitHubアカウントが必要ですが、無料で利用することができます。

VSCodeで利用する場合、下記の手順でLiveShareを利用できます。

VSCodeの左側のアイコンが並んだバーに、画像赤枠のアイコンがあると思うのでこれをクリックします。

すると画像のような選択肢が出てきます。
LiveShareを使う際、ホスト(参加される側)とゲスト(参加する側)で操作が異なります。

ホスト側の場合は”Start collaboration session”を選択します。

まだログインしていない場合はログイン画面が出てきます。
MSアカウントかGitHubアカウント、所有しているどちらかのアカウントでログインします。


ログインが完了すると、下記のメッセージが表示されます。

この時点で、自分の開始したLiveShareセッションに参加するのに必要なURLがクリップボードにコピーされます。

もしクリップボードから消えてしまった場合は、上記メッセージの”Copy again”をクリックすると再度コピーできます。

なお、”Make read-only”を選択すると、ゲスト側ユーザーからの編集を禁止することができます。

一方ゲスト側は下記の手順で参加できます。

ゲスト側の場合は先程の画面で”Join collaboration session”を選択します。

すると、ホスト側でセッションを開始した際に発行したURLを入力する欄が出てきます。
ホスト側の人から受け取ったURLをここに入力することで、LiveShareセッションに参加することができます。

また、リンクをブラウザで開いてもLiveShareに参加可能です。

この機能、ほかの人と共同でプログラミングしたり、助けてもらったりする使い方の外に、先生が生徒にプログラミングを教えるときに利用したり、URLを公開して一般の人にプログラミングの風景を見てもらうこともできますし、またPCを複数台持っている人は、LiveShareさせることでGitなどで同期させることなく、同じ環境で操作することもできます。

とても便利な機能なのでVSCodeをお使いの皆さんは是非一度試してみてください。

  • この記事いいね! (2)
takahashi 著者: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ページのコーディングをされている方は是非一度試してみてください。

  • この記事いいね! (0)
takahashi 著者:takahashi

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

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

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

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

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

Bracket Pair Colorizer – Visual Studio Market Place

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

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

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

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

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

  • この記事いいね! (0)
takahashi 著者:takahashi

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

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

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

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

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

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

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

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

PHPDocument: Language

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

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

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

  • この記事いいね! (0)