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

Myoga-SB-SDF-A2

Hello~、ミョウガだよっ!

7月6日、Visual Studio Codeの最新版(Ver. 0.5.0)がリリースされましたね。

“ECMAScript 6”をサポートした「Visual Studio Code」プレビュー版v0.5.0が公開 窓の社

早速、Ver. 0.5.0にアップデートして、以下の記事を参考にエディターの背景にプロ生ちゃんを表示させようと、native.main.cssを編集したのですが、

Visual Studio Code のテーマを変更する + プロ生ちゃんを表示 | プログラミング生放送

/* 中略 */

/* 以下のコードを追加します。 */
.monaco-editor.vs-dark,
.monaco-editor.vs-dark .zone-widget .monaco-editor{		

    color: #888;
	
    background: #000000;

    background: url( 'http://pronama.jp/code/sd.png' ) no-repeat;

    background-position: right bottom;

}

code2

なぜか表示されないのです。Ver. 0.1.0やVer. 0.3.0ではこの方法で表示できたのだけど・・・。

プロ生ちゃんファンのために解決せねば・・・!

エディター部に使用している要素を追跡してみました

エディター部で使用している要素は他にもあるのかな・・・と、開発者ツールで追跡してみました。ちなみに、開発ツールはメニューバーから「Help」→「Toggle Developer Tools」を選択すると開けます。

code3

追跡してみたところ、指定するクラス名に「lines-content monaco-editor-background」を追加すれば、画像が表示されるかも・・・と思い、native.main.cssを以下のように書き換えてみました。

/* 中略 */

/* 以下のコードを追加します。 */
/* 指定するクラスセレクタに lines-content monaco-editor-background を追加します */
/*
    ライトテーマでは「.monaco-editor.vs」
    ダークテーマでは「.monaco-editor.vs-dark」
    ハイコントラストでは「.monaco-editor.hc-black」
*/
.monaco-editor.vs,
.monaco-editor.vs .zone-widget .monaco-editor,
.monaco-editor.vs .lines-content.monaco-editor-background,
.monaco-editor.vs-dark,
.monaco-editor.vs-dark .zone-widget .monaco-editor,
.monaco-editor.vs-dark .lines-content.monaco-editor-background,
.monaco-editor.hc-black,
.monaco-editor.hc-black .zone-widget .monaco-editor,
.monaco-editor.hc-black .lines-content.monaco-editor-background, 

{

    color: #888;
	
    background: #000000;

    background: url( 'http://pronama.jp/code/sd.png' ) no-repeat;

    background-position: right bottom;

}

※CSSファイルのコーディングにて、Visual Studio Codeのコード補完機能が利用できます。(便利だよっ!)

※本記事で編集しているCSSファイルのパスについて、

バージョン0.5.0以前では、

「C:\Users\[ユーザー名]\AppData\Local\Code\[app-x.x.x]\resources\app\client\vs\monaco\ui\workbench\native\native.main.css

バージョン0.7.0では、

「C:\Users\[ユーザー名]\AppData\Local\Code\[app-x.x.x]\resources\app\client\vs\workbench\workbench.main.css

バージョン0.8.0以降では、

「[Visual Stuio Codeをインストールしたフォルダー]\resources\app\out\vs\workbench\workbench.main.css

となります。

追加する内容は同じです。

※バージョン0.8.0で追加されたカラーテーマでプロ生ちゃんを表示させる場合、以下のクラスセレクタを追加します。

/* 追加のカラーテーマ用 */
.monaco-editor.[uiTheme].[id],
.monaco-editor.[uiTheme].[id] .zone-widget .monaco-editor,
.monaco-editor.[uiTheme].[id] .lines-content.monaco-editor-background{
/* ... */
}

[uiTheme]と[id]にはそれぞれ、「[Visual Studio Codeのインストールパス]\resources\app\plugins\vs.theme.starterkit\ticino.plugin.json」にある値が入ります。

※バージョン0.9.1以降では、CSSファイルが最小化されています。以下のコードは先ほどのコードを最小化したものです。これをファイルの末尾に追加します。

※バージョン0.10.8以降は、14行目の末尾に追加してね。

.monaco-editor.vs,.monaco-editor.vs .zone-widget .monaco-editor,.monaco-editor.vs .lines-content.monaco-editor-background,.monaco-editor.vs-dark,.monaco-editor.vs-dark .zone-widget .monaco-editor,.monaco-editor.vs-dark .lines-content.monaco-editor-background,.monaco-editor.hc-black,.monaco-editor.hc-black .zone-widget .monaco-editor,.monaco-editor.hc-black .lines-content.monaco-editor-background{color:#888;background:#000000;background:url( 'http://pronama.jp/code/sd.png') no-repeat;background-position: right bottom;}

すると、エディターの背景にプロ生ちゃんを表示させることができましたっ!(画像はバージョン0.10.10です)

vsc01010

これでVer. 0.5.0以降にアップデートしても、プロ生ちゃんとコーディングができるね♪

更新履歴

  • 2015/08/19 : 最新バージョンの0.7.0での方法を追加しました。
  • 2015/09/11:最新バージョンの0.8.0での方法を追加しました。
  • 2015/09/12:Darkテーマだけでなく、LightテーマとHigh Contrastテーマでもプロ生ちゃんを表示できるコードにしました。また、追加のカラーテーマを使用している時の方法も追加しました。
  • 2015/10/16:最新バージョンの0.9.1での方法(デバッグコンソールへの表示も含む)を追加しました。(10/27追記)最新バージョンの0.9.2でも、同じ方法でできます。(11/19追記)最新バージョンの0.10.1でも、同じ方法でできます。
  • 2016/03/08:最新バージョンの0.10.10での方法を追加しました。デバッグコンソールのスタイルが変わったため、0.9.1での方法で追加していたデバッグコンソールへの表示部分は削除しました。(3/21追記)最新バージョンの0.10.11でも、同じ方法でできます。(4/17追記)正式版のバージョン1.0.0でも、同じ方法でできます。(9/27追記)最新バージョン1.5.3でも、同じ方法でできます。
この記事をシェアする
Chronoir.netのRSSフィードを購読する

ミョウガ(Myoga)

Hello~! 「ミョウガ」です。よろしくお願いします!(≧▽≦)/ 主にC#/XAML/C++などをメインにプログラミングやアプリの開発をしています。好きな物はカフェラテとハーブティ、趣味は写真撮影と艦これです。

コメントを残す

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

*

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