Visual Studio Codeの最新バージョン0.8.0を試す(with カラーテーマの追加方法)

By | Date : 2015/09/11 ( Last Update : 2016/09/29 ) | 263 views

Nia-TN-SDF-A2

こんにちはー!ニアです。

Visual Studio Codeの新バージョンがリリースされましたね。

Visual Studio Code – September Update (0.8.0)

http://blogs.msdn.com/b/vscode/archive/2015/09/10/visual-studio-code-september-update-0-8-0.aspx

 

私は早速、バージョン0.8.0にアップデートしました。

 

 

1. バージョン0.8.0のインストール

まずはバージョン0.7.20にアップデートします。(「Code v0.8.0 (September 2015)」によると、いきなりバージョン0.8.0にアップデートされるのではなく、一回バージョン0.7.20を経由するみたい)

もう一度アップデートを実行して、バージョン0.8.0のインストーラーを起動します。

vsc080-1

「Next」ボタンをクリックします。

 

「Select Destination Location」の画面では、Visual Studio Codeのインストール先を指定します。

vsc080-2

「Next」ボタンをクリックします。

 

「Select Start Menu Folder」画面では、Visual Studio Codeのショートカットを登録するスタートメニューのフォルダーを指定します。

スタートメニューに登録しない場合、「Don’t create a Start Menu folder」にチェックを入れます。

vsc080-3

「Next」ボタンをクリックします。

 

「Select Additional Task」の画面では、必要に応じてチェックボックスにチェックを入れます。

チェックボックスの項目 概要
Create a desktop icon デスクトップにVisual Studio Codeのショートカットを作成します。
Add “Open with Code” action to Windows Explorer file context menu エクスプローラーでファイルを右クリックした時のメニューに、Visual Studio Codeで開くコマンドを追加します。
Add “Open with Code” action to Windows Explorer directory context menu エクスプローラーでフォルダーを右クリックした時のメニューに、Visual Studio Codeで開くコマンドを追加します。
Add to PATH (available after restart) 環境変数PATHに「[Visual Stuio Codeのインストールパス]\bin」を追加します。(コンピューターの再起動後に有効になります)

vsc080-4

「Next」ボタンをクリックします。

 

「Ready to Install」の画面でインストールの設定内容を確認し、問題がなければ「Install」ボタンをクリックします。

vsc080-5

vsc080-6

 

インストールが完了したら「Finish」ボタンをクリックしてインストーラーを閉じます。

vsc080-7

 

これで、Visual Studio Codeバージョン0.8.0のインストール完了です。早速起動してみましょう。

vsc080-9

 

2. バージョンを0.8.0を使ってみて・・・

2.1. 追加のカラーテーマ

バージョン0.7.0まではカラーテーマが「Light」「Dark」「High Contrast」の3種類だけでしたが、バージョン0.8.0ではカラーテーマがいくつか追加されています。

vsc080-10

Color Theme picker

追加のカラーテーマは「[Visual Studio Codeのインストールパス]\resources\app\plugins\vs.theme.starterkit\themes」フォルダー内にあります。テーマファイル自体はSublime Text 用のカラースキーマ(拡張子が、.tmTheme)です。

VS Code v0.8.0 (September 2015)」によると、今回追加されたカラーテーマは「Colorsubline(http://colorsublime.com/)」にあるみたい。

 

2.2. Visual Studio Codeにカラーテーマを追加してみる

Visual Studio Codeバージョン0.8.0では、自分の好きなカラーテーマを追加することができます。カラースキーマの中身はXMLなので、1から作ることもできますが、今回は「Colorsubline(http://colorsublime.com/)」からカラースキーマをダウンロードしていきます。

vsc080-11

カラースキーマの数はざっと数えて250以上、どれにしようか迷うな・・・。

 

好きなカラーテーマが決まったら、「Download」ボタンをクリックし、カラースキーマをダウンロードします(ここでは「Textmate」をダウンロードします)。

vsc080-12

ダウンロードしたら、「[Visual Studio Codeのインストールパス]\resources\app\plugins\vs.theme.starterkit\themes」フォルダーに移動します。

 

次に「[Visual Studio Codeのインストールパス]\resources\app\plugins\vs.theme.starterkit」フォルダーにある「ticino.plugin.json」を開き、追加したカラーテーマの情報を追加します。

 

キー 概要
id カラーテーマを識別するための文字列です。CSSのクラス名にもなります。「vs-theme-starterkit-」から始めるとよいみたい。
label Color Theme pickerに表示される文字列です。
uiTheme Visual Studio CodeのUIテーマを指定します。

  • vs:淡色
  • vs-dark:濃色
  • hc-black:ハイコントラスト
path カラースキーマのファイルパスを指定します。ticino.plugin.jsonからの相対パスでもOK

 

Visual Studio Codeが開いている場合、一旦再起動します。

 

これでColor Theme pickerから、追加したカラーテーマを選択することができます。

vsc080-13

vsc080-14

 

2.3. プロ生ちゃんを表示する

今回追加されたカラーテーマ機能は文字列のスタイルを変えるだけです。背景に画像を表示させたい時は今までのバージョンと同じく、CSSファイルを直接編集します。

詳しくはこちらの記事で

Visual Studio Code(Ver. 0.5.0)でプロ生ちゃんを召喚する方法(※Ver. 0.7.0 / Ver. 0.8.0での方法を追加しました)

vsc080-15

 

3. バージョン0.8.0の新機能はまだまだあるぞ

この記事ではカラーテーマのみ扱いましたが、Visual Stduio Codeバージョン0.8.0には他にも、デバッグコンソール機能やTypScript 1.6のサポートなど色々あります。

さて、次は何を試してみようかな。

 

それでは、See you next time!

この記事をシェアする
Chronoir.netのRSSフィードを購読する

About : ニア(Nia)

紅茶とコーヒーが好きな湘南生まれのプログラマー/ITエンジニアです。主にC#/C++/PHPを使ってプログラミングをしています。趣味は写真撮影と音ゲーです。時々イラストを描いています。プログラミングを勉強している方々と仲良くなりたいです! 興味を持っている分野:UWP/Xamarin/Android Wear/WPF/Windows/Visual Studio/WordPress/KUSANAGI/nginx

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*