Visual Studio CodeのMac版をインストールしてみました |

少し前から話題になっている「Visual Studio Code」ですが、JavaScriptやPHPのプログラミングのためにはどの程度使えるのか気になっていました。

で、今回Mac版を実際にインストールしてみたので、実際にファイルを開いて簡単に入力するくらいまでのところを書いてみたいと思います。

ダウンロード＆インストール

まずはダウンロードですが、以下URLです。

Visual Studio Codeダウンロードサイト

次の画面でWindows版、Linux版、Mac版の選択ができます。ここではMac版をクリックしました。

Mac版を選択

ダウンロードには少し時間がかかります。で、上記画面を少しスクロールさせると「set up」という部分がクリックできます。ここにセットアップマニュアルが記載されています。今回はここの詳細は割愛します。

set upページへのリンク

ダウンロードが完了すると、「VSCode-darwin.zip」というファイルが保存されていました。これを解凍すると「Visual Studio Code.app」ができます。

ダウンロードしたものを解凍

これをアプリケーションフォルダに移動してインストール完了です。あとですね、上記のセットアップマニュアルの「Mac OS X」部には、ターミナルから利用したい場合の設定方法が掲載されています。が、今回は試していません。

では早速起動します。黒背景のエディタが表示されました。

Visual Studio Codeを起動した時

とりあえず保存してみます。Fileメニューから「Save As…」をクリックして、「func.js」という名称で保存しました。

保存してみる

画面上部にはファイル名とパスが表示されます。（以下画像ではパスは隠しました。）

ファイル名とパス名が表示

サラサラっとJavaScriptのコードを打つと、入力候補リストが表示されます。

入力のリストが表示される

ここでは「func」を入力したところでEnterを押しましたが、functionが定型入力されました。

functionが定型入力されたところ

適切に修正してfunctionを完成させました。ここでは、単純に乗算をする「app」という関数にしました。

app関数を記述

作った関数を使おうとすると、パラメータヒントが表示されました。便利！

自作関数でもパラメータヒントが表示される

結果をconsole.logに出力します。もちろん入力候補リストが表示されます。

console.logを入力中

console.logを正しく入力したところで完了です。

コード完成

とりあえずデバッグを試してみようかと思い、Viewメニューから「Debug」をクリックしました。

Debugメニューをクリック

何やらフォルダを開く必要があるとのこと。

フォルダを開く必要あり

何とかデバッグを試してみたかったのですが、今回はここで断念。いずれデバッグも試してみたいと思います。