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

By | Date : 2015/07/08 ( Last Update : 2016/11/29 ) | 884 views

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 のテーマを変更する + プロ生ちゃんを表示 | プログラミング生放送

 

 

code2

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

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

 

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

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

code3

 

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

※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で追加されたカラーテーマでプロ生ちゃんを表示させる場合、以下のクラスセレクタを追加します。

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

 

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

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

 

 

すると、エディターの背景にプロ生ちゃんを表示させることができましたっ!(画像はバージョン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フィードを購読する

About : ミョウガ(Myoga)

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

コメントを残す

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

*