Ubuntu Gnome 15.10 にVisual Studio Codeをインストールする

Pocket



今更ながらにVisual Studio Codeなんてエディタの存在を知りました。MacやLinuxでも動作するMicrosoft製エディタなんて興味を持つななんていうほうが無理ですよね。というわけでググって評判を調べてみるとなかなか好評価な意見が多いので自宅の開発環境としても試してみることにします。なお、現状ではコマンド一本でインストールはできないようなのでインストールの手順を残しておきたいと思います。

ソースのダウンロードと展開

まずはVisual Studio Codeにアクセスし、トップページのダウンロードリンクをクリックして環境に併せて64bit版 or 32bit版のzipファイルをダウンロードします。なお今回選択しているのは64bit版です。
install_Visual_Studio_Code_01

今回は「./ダウンロード/」以下に「VSCode-linux-x64-stable.zip」をダウンロードしたわけですが、ファイル名を見てわかる通りzipファイルですので右クリックから「ここに展開する」を選択して展開しましょう。
install_Visual_Studio_Code_02

Visual Studio Codeの配置と実行(端末からの起動とアクティビティ一覧への追加)

さて、zipファイルの展開も済んだところで、実行環境の整備ですが・・・、ざっと見た感じ要らないみたいです。
単純に起動するだけでよければ展開したディレクトリ内にある「Code」をダブルクリックするだけです。とりあえず確認の意味も込めて一回起動してみましょう。
install_Visual_Studio_Code_03

以下のようにVisual Studio Codeが起動すればOKです。
install_Visual_Studio_Code_04

ただ、動作確認ならどこのディレクトにあっても問題ありませんが、実際に常用するとなるとそうもいきませんよね。
というわけで、[Ctrl]キー + [Alt]キー + [T]キーのショートカットで端末を起動した後、端末上で以下コマンドを実行してディレクトリごと「/usr/local/bin/」以下に移動しておきましょう。

sudo mv ~/ダウンロード/VSCode-linux-x64/ /usr/local/bin/

ついでに端末から「Code」で起動できるように、端末上で以下コマンドをついでに実行してシンボリックリンクを作成しておきましょう。

sudo ln -s /usr/local/bin/VSCode-linux-x64/Code /usr/local/bin/

で、これだけでは「アクティビティ」一覧に「Visual Studio Code」が出てきませんので、以下ディレクトリに「.desktop」ファイルを作成しておきましょう。
テキストエディタを開き、以下をコピペした後、「VisualStudioCode.desktop」という名前で保存します。

「VisualStudioCode.desktop」ファイルを作成したら、端末上で以下コマンドを実行して「VisualStudioCode.desktop」ファイルを「/usr/share/applications/」に移動します。

mv ~/ダウンロード/VisualStudioCode.desktop ~/.local/share/applications/

これで「アクティビティ」一覧に「Visual Studio Code」が表示されるようになります。
install_Visual_Studio_Code_05

Visual Studio Codeの設定(フォント変更や自動折り返しなど)

実行環境はだいたい整いましたので、これから使いやすいように設定のほうも少し変更しておきたいと思います。
Visual Studio Codeを起動してメニューの「File」から「Preferences」の「User Settings」を選択して設定メニューを開きます。
install_Visual_Studio_Code_06

設定画面はこんな感じです。
左側のデフォルト設定に対して、自分でカスタマイズしたい項目を右側に書き込んでいった後、[Ctrl]キー + [s]キーで保存した瞬間にデフォルト設定を上書きしてくれる仕組みっぽいですね。
install_Visual_Studio_Code_07

ざーっと一通り設定項目を眺めた結果、とりあえずこんな感じでカスタマイズして使い始めてみることにしました。

ちなみに上の設定項目を設定画面の右側にコピペして[Ctrl]キー + [s]で保存すると、即反映されてこんな感じになります。
install_Visual_Studio_Code_08

インストールされているフォントの確認

使えるフォントを確認したい場合は、端末上で以下コマンドを実行すると、インストール済みのフォント一覧が表示されます。([Space]キーでスクロールします。)

fc-list|more

インストールされていないフォント(RictyDiminished)を使いたい場合

インストールされていないフォントを使いたい場合もありますよね。そんな場合は以下の流れでフォントを追加した後に指定してあげればばっちり認識してくれます。
せっかくなのでプログラミング用フォントとして評判の良い「RictyDiminished」を追加してVisual Studio Codeで使ってみましょう。
まずはGitHub上にあるRictyDiminishedの配布先からフォント本体をダウンロードしてきましょう。
URLを開いてみると何パターンかあるのがわかると思いますが、今回は「RictyDiminished-Regular.ttf」を追加しますよ。
install_Visual_Studio_Code_09

リンクが開いたら、真ん中辺りにある「Vies Raw」のリンクをクリックして「RictyDiminished-Regular.ttf」をダウンロードします。
install_Visual_Studio_Code_10

フォントファイルのダウンロードが完了したら、「~/.fonts/」にフォントファイルを移動しましょう。(環境にも寄りますが、多分デフォルトでは「~/.fonts/」ディレクトリは存在しないので、自分でホームディレクトリ上に新しいディレクトリを作成して「.fonts」にリネームしてください。)
仮に「ダウンロード」ディレクトリに「RictyDiminished-Regular.ttf」が存在する場合は、端末上で以下コマンドを実行するとさくっと完了します。

mkdir ~/.fonts/; mv ~/ダウンロード/RictyDiminished-Regular.ttf ~/.fonts/

こんな感じです。
これで「RictyDiminished」が認識されるようになります。
install_Visual_Studio_Code_11

フォントのインストールが完了したら、先ほどと同じ要領でフォント指定を変更します。
今回は4行目の「TakaoExゴシック」を「Ricty Diminished」に書き換えて上書き保存です。
変更が反映されるとわかると思いますが、「Ricty Diminished」は「TakaoExゴシック」よりも字幅がせまいようなので、10行目の自動インデントも100ぐらいまで伸ばしてもいいかもしれません。
install_Visual_Studio_Code_12

カスタマイズした設定項目を全て破棄してデフォルト設定で起動したい場合

もし色々カスタマイズしているうちにおかしくしてしまった場合など全部破棄してやりなおしたい場合は、Visual Studio Codeを一旦終了した後、以下ディレクトリにある「settings.json」を削除してからあらためてVisual Studio Codeを起動してみてください。
install_Visual_Studio_Code_13

Visual Studio Codeを触ってみた感想

まだ環境を整えただけですが、全体的に評判が良いのもうなずける出来だと思います。
MS製品が使えることにまず驚いて、それがまた良く出来ているので二度びっくりといった感じでしょうか。
せっかくこんな良いエディタが使えるようになったので、今更ながらD3.jsを触ってみようかなぁなんて考えている今日このごろです。

コメントを残す

メールアドレスが公開されることはありません。