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

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」を開き、追加したカラーテーマの情報を追加します。

{
	"pluginId": "vs.theme.starterkit",
	"contributes": {
		"themes": [
			{
				"id": "vs-theme-starterkit-abyss",
				"label": "Abyss",
				"uiTheme": "vs-dark",
				"path": "./themes/Abyss.tmTheme"
			},
			{
				"id": "vs-theme-starterkit-dimmed-monokai",
				"label": "Dimmed Monokai",
				"uiTheme": "vs-dark",
				"path": "./themes/dimmed-monokai.tmTheme"
			},

			/* ... */

			{
				"id": "vs-theme-starterkit-textmate",
				"label": "Textmate",
				"uiTheme": "vs",
				"path": "./themes/textmate.tmTheme"
			}
		]
	}
}
キー概要
idカラーテーマを識別するための文字列です。CSSのクラス名にもなります。「vs-theme-starterkit-」から始めるとよいみたい。
labelColor Theme pickerに表示される文字列です。
uiThemeVisual Studio CodeのUIテーマを指定します。

 

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

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

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

vsc080-13

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

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

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

[END]

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

コメントを残す

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

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください