Visual Studio Codeをラブライバー仕様にした(痛エディタ化)

f:id:airish9:20151112115220p:plain,w600

最近はPHPを扱う機会があってVisual Studio Codeを使っていました。

触っていると物足りなくなったので、もう何番煎じか解りませんがVisual Studio Codeを痛エディタにしたのでメモ。

参考にしたサイトはこちら（幻想ツバメ(id:fantasticswallow)さんありがとうございます！）

artfulplace.hatenablog.com

手順

大まかな手順は参考サイト通り（実行したバージョンはver0.9.2）

1.適当なテーマをコピーしてフォルダ名を変更

%VS Codeインストールフォルダ%\resources\app\extensions の "theme-quietlight" フォルダをコピー
%USERPROFILE%.vscode\extensions にコピーしてフォルダ名を"theme-nontan"に変更
- MacとLinuxの場合は$HOME/.vscode/extensionsへ配置

2.package.jsonを変更

"name", "contributes.themes"の"label"と"uiTheme"と"path"を変更

{
    "name": "theme-nontan",
    "version": "0.1.0",
    "publisher": "vscode",
    "engines": { "vscode": "*" },
    "contributes": {
        "themes": [
            {
                "label": "Nontan",
                "uiTheme": "vs-dark",
                "path": "./themes/nontan.tmTheme"
            }
        ]
    }
}

3.tmThemeの編集

package.jsonのpathで指定したtmThemeファイルを作成します。テーマをコピーしているはずなのでtmThemeファイルがあるとあります。pathの指定通りにリネームして自分の好みに編集すると良いでしょう。私はデザインセンスに乏しいので以下のサイトからtmThemeファイルをダウンロードしてきました。

colorsublime.com

自分で作成する型は以下のサイトからtmThemeを作るのがお勧め

tmtheme-editor.herokuapp.com

このままだと背景が透過されていないのでtmThemeファイルを変更します backgroundの透過率を好みの値に変更します。参考記事通りに私は99を指定

<plist version="1.0">
<dict>
    <key>name</key>
    <string>nontan</string>
    <key>settings</key>
    <array>
        <dict>
            <key>settings</key>
            <dict>
                <key>background</key>
                <string>#1E1E1E99</string>
                <key>caret</key>
                <string>#EB3032</string>
                <key>foreground</key>
                <string>#B553BF</string>
                <key>invisibles</key>
                <string>#3b3a32</string>

4.画像の配置とcssの編集

背景画像にしたい画像を適応な場所に配置
%VS Codeインストールフォルダ%\resources\app\out\vs\workbench\workbench.main.css を編集
- このcssファイルが編集できない場合は適当な場所にコピーして編集してからペースト
- cssファイルの最後に以下のコードを追加

.monaco-workbench .part.editor {
    background: url('nozomi.png') no-repeat;
    background-position: right bottom;
    background-size: 60% auto;
     /*background-size: cover;*/
}
.monaco-editor.vs-dark.vscode-theme-nontan-themes-nontan-tmTheme {
    background: none;
}
.monaco-editor.vs.vscode-theme-nontan-themes-nontan-tmTheme {
    background: none;
}

背景画像のurlは画像を配置した場所を指定、私はcssファイルと同じフォルダに配置しているので上記の通りになります。画像の位置やサイズや繰り返しはお好みでどうぞ。

後半２つのcssのクラス名は[Help > Toggle Developer Tools]を使用して調べればOK。vs-darkテーマの場合はvs-darkクラスだけで良いかも。