【VSCode】WindowsでVisual Studio CodeをそこそこまともなC#開発環境にするまでの手順まとめ

前書き

超絶お久しぶりです。最近はくっそ忙しいです。忙しすぎて趣味的なコードを書く暇もありません。最近白髪が生え始めました。実績解除ですね。

さて、お仕事で使っているPCがあまりにもクソスペックすぎることは以前お話したんですが、最近わけあってVisual Studio 2013 ExpressをインストールしようとしたらHDD容量が足りないとか言う2015年とは思えない理由でダメでした。まぁ空き容量が2GBしかないし。.NET Framework 4.5.2 Developer Packすら入らないし。

そこで最近登場したVisual Studio Code、あれを使ってみようかなと。あわよくばScriptCsのコードもバリバリ書けるIDEにしておきたいなと思ったので、そのために準備した内容を書き留めておきます。

まぁなんと言うかですね。Windowsで無理に使うぐらいならVisual Studio 2015なりなんなりを入れた方が100倍便利です。現状だとC#デバッグすらできません。準備も結構大変です。私のようにやむにやまれぬ事情があるか、とりあえず使ってみたい人向けです。

Visual Studio Codeのインストール

公式サイトから落としてきてください。

Windows版だとC:\Users\{username}\AppData\Local\Code内に本体が置かれます。普通にProgram Filesに置いてくれよ…。

(2015/11/27追記)v0.8.0からインストール先を選べるようになりました。

Node.jsのインストール

Visual Studio CodeのインテリセンスはOmniSharpと呼ばれる技術で動いています。これはNode.jsを使ってローカルサーバを立て、そのサーバに対してPOSTするとRoslynが解析して使用可能な候補を返すと言う、理論上どんなエディタでも使用可能な仕組みです。

(2015/11/27追記) OmniSharp自体がサーバとしての機能を持っているのでNode.jsは関係ないです。(最近OmniSharpで遊び始めて気が付いた)

そのため、Node.jsがないとどうやってもインテリセンスが動かない…ってことは多分ないんですが(一応node.exeも同梱されてるし)、npmから色々なパッケージを持ってくることで開発が更に捗るので、インストールしてなかったらインストールしてきましょう。

インテリセンスを使うための準備

Visual Studio CodeでOmniSharpが起動する条件は以下の二つのどちらかを満たしている場合のみです。

  • ワーキングスペース内に*.sln(と、*.csprojとか*.vbprojとか)があり、Visual Studioがインストールされていること。
  • ワーキングスペース内にASP.NET 5用のproject.jsonがあること。

と言うわけで、Visual Studioを既にインストールしている方。おめでとうございます。既存のプロジェクトをVisual Studio Codeで開き、15~30分ほど遊んだ後、普段から使っているVisual Studioに戻りましょう。

多分、本当はVisual Studioなしでもどうにかすれば動くとは思うんですが、そもそもソリューションファイルを頑張って自作すること自体が恐ろしく面倒ですし、自分でシコシコとcsprojを書くのはあまりにも苦痛です。

ASP.NET 5のproject.jsonの方は比較的準備が簡単なので、今回はこちらの解説をしていきます。

ASP.NET 5の実行環境を整える

Visual Studio CodeでASP.NET 5を使うためのドキュメントがあるので、基本的にはこれを読んで一通りやればOKです。一応要点だけ解説します。あくまで要点なのでちゃんと元ドキュメントは読みましょうね。

まずはDNXをインストールします。これは.NET Execution Environmentの略で、その名の通り「.NETの実行環境」です。マイクロソフトが頑張ってMacLinuxでも.NET Frameworkで書かれたwebアプリケーションを動かせるようにしてくれました。もちろんWindowsでも動きます。

ASP.NETGitHubインストール手順があるので、黙々とインストールしてきてください。Upgrading DNVMと書かれていますが、後で諸々全部ついてくるのでご安心を。ちなみに「Visual Studio 2015をインストールするのが一番早い」とのことです。そっすか。

DNVMのパスが通っていることが確認できたらdnvm upgradeを実行しましょう。これにてDNXのインストールは完了です。

空プロジェクトをコマンドラインで作成できるようにする

次のステップです。ASP.NET 5の空プロジェクトをコマンドラインで生成するための諸々のツール・モジュールをnpm経由でインストールします。

ドキュメントにもあるように、以下のコマンドを実行するだけです。普段からNode.jsをバリバリ使ってる人は既にインストールしてそうなものもあるので適宜欲しい物を取ってきて下さい。

npm install -g yo grunt-cli generator-aspnet bower

ちなみにyoことyeomanWindowsだとyodoctorなるものが引っかかってインストールできないことがあるみたいなので、ダメだった場合はGitHubから適当にcloneしpackage.jsonから下記記述をまるっと消してしまいましょう。

「Gitなんか入れてねぇ」とぬかす人もいるかもしれませんが、Bowerを使うためにどのみち必要なのでこれを機にインストールしてきてください。

"scripts": {
        "test": "grunt",
        "postinstall": "node ./scripts/doctor",
         "postupdate": "node ./scripts/doctor"
},

消し終わったらコマンドプロンプトでカレントディレクトリをyoのプロジェクトに移した後、npm i -gを実行すればOKです。

とりあえず空プロジェクトを作る

DNXとyoとgenerator-aspnetをインストールしたらやっと準備完了です。空プロジェクトを作りましょう。

と言ってもコマンドプロンプトからyo aspnetと叩くだけです。後はConsole ApplicationかClass Libraryあたりを選択し、自動生成されたディレクトリでdnu restoreを実行すれば不思議な力によって謎のパッケージがNuget経由でインストールされ、なんだかよくわからないjsonが新たに生成され、Visual Studio Codeでそのディレクトリを開くとOmnisharpが動くようになっているはずです。お疲れ様でした。

project.jsonの中身を書き換える

と、それだけで済めばよかったんですが、もう一手間かけないといけません。

yo経由でClass Libraryのプロジェクトを作った場合、最初のproject.jsonはこんな風になっています。

{
    "version": "1.0.0-*",
    "dependencies": {},

    "frameworks": {
        "dnx451": {
            "dependencies": {}
        },
        "dnxcore50": {
            "dependencies": {
                "System.Runtime": "4.0.20-*"
            }
        }
    }
}

これをとりあえずこうします。

{
    "version": "1.0.0-*",
    "dependencies": {},

    "frameworks": {
        "dnx451": {
            "frameworkAssemblies": {
                "System": "",
                "System.Core": "",
                "System.Xml.Linq": "",
                "System.Data.DataSetExtensions": "",
                "Microsoft.CSharp": "",
                "System.Data": "",
                "System.Xml": ""
            }
        }
    }
}

上記のように変更した後、もう一度dnu restoreしましょう(コマンドパレットでrestoreと入力してもOK)。今度こそお疲れ様でした。これであなたはようやくまともな開発環境を一つ手に入れました。

project.jsonの役割と参照設定

本筋から大きくそれてしまうのですが、今後もproject.jsonはメンテしていくことになるので、簡単に解説しておきます。詳しい情報はドキュメントにたくさん書いてあるので一読しておきましょう。

project.jsonはcsprojとほぼ同様の内容を記述することができます。有名所で言えば参照設定、ビルドイベントとかですね。

実はrestoreコマンドを実行したdnu(DNX Utility)にはcsprojをproject.jsonに変換するコマンドも用意されていますが、Visual Studioをインストールしないと手に入らないようなMSBuild.exeを使うらしいので特に説明しません。

今回何を消して何を追加したかはこの辺が参考になると思います。

がっつり削除したdnxcore50の部分は、物凄く雑に言うと、「OSを問わずどんな環境でも動かすために必要なassemblyとそのバージョン」です。対してdnx451frameworkAssembliesは「GACに登録されているであろうassembly」です。本当に超絶雑な説明なので鵜呑みにしないように。

dnxcore50で使えるライブラリは、現状、かなりの制限があります。(Webアプリケーションで使うって意味では必要十分なんでしょうが。)

Visual Studio Codeくんはdnxcore50dnx451の両方でコンパイルできないと知ると「dnxcore50の方で参照設定が足りてないと思うんですけど(名推理)」と容赦のないエラーを吐き出すため、もういっそdnxcore50は定義しなくていいです。dnx451だけにします。ついでに普通にConsole ApplicationやClass Libraryのプロジェクトを作った時に定義される参照設定を入れておきます。

ただこのままだとyo aspnetする度にproject.jsonを直す必要があるため、generator-aspnetのtemplates内にあるproject.jsonも適当に直しておきましょう。

「自分で作ったDLLは参照設定に入れられないの?」と思った人もいると思います。一応できますが、プロジェクトのNugetパッケージ化が必要です。

後はdependencies内に名前とバージョンを書けば適当にNugetから取ってきてくれます。例えば、SgmlReaderの最新版を使いたかったら、こんな感じです。

{
    "version": "1.0.0-*",
    "dependencies": {
        "SgmlReader": "1.8.11"
    },

    "frameworks": {
        "dnx451": {
            "frameworkAssemblies": {
                "System": "",
                "System.Core": "",
                "System.Xml.Linq": "",
                "System.Data.DataSetExtensions": "",
                "Microsoft.CSharp": "",
                "System.Data": "",
                "System.Xml": ""
            },
            "dependencies": {
                "SgmlReader": "1.8.11"
            }
        }
    }
}

フォルダ構成はこうなります。

(root)
│  .gitignore
│  Class1.cs
│  project.json
│  project.lock.json
│              
└─packages
    │  
    └─SgmlReader.1.8.11
        │  SgmlReader.1.8.11.nupkg
        │  
        └─lib
            ├─2.0
            │      SgmlReaderDll.dll
            │      
            └─4.0
                    SgmlReaderDll.dll

コンソールアプリケーションを実行する

dnx [path] runでコンソールアプリケーションを実行可能です。コマンドパレットにも登録されているのでわざわざコマンドプロンプトを開く必要はないです。

exeファイルにビルドとかはできません。dnuにビルドコマンドはあるんですが、dllファイルになってしまいます。

Visual Studio Codeからビルドできるようにする

dnu build [path]とすることで対象のプロジェクトをdllファイルにビルドできます。が、Visual Studio Codeにはこのコマンドが登録されていないので、自分で作ります。

コマンドパレットでtaskと入力し、「Tasks: Configure Task Runner」を選択しましょう。自動でワーキングスペース内にtasks.jsonが生成されます。

後はこんな風にしておけばOKです。

{
    "version": "0.1.0",
    "command": "dnu", 
    "showOutput": "always", // 出力内容を必ず表示
    "isShellCommand": true, // 外部のツールかどうかの設定
    "isBuildCommand": true, // ビルドコマンドフラグ これをtrueにするとCtrl + Shift + Bでビルドできる
    "args": ["build"]
}

このtasks.json複数のタスクが登録できると思うじゃないですか。だって「tasks」ですよ?そんなもん100%できると思うじゃないですか。なぜか一つしか登録できません。gulpを使うとできるみたいなことが書いてありますが、その、なんていうか、何なんでしょうね…。

おまけ - フォントの変え方

デフォルトだと日本語フォントが中華フォントになってしまいます。流石につらぽよなので変えたいところです。まぁでも、日本語のコメントを入力したら突然OmniSharpが死んだりするので、そもそも日本語を書かないことをオススメしますが。

方法1:settings.jsonをいじる

メニューバーのFile -> Preferences -> User Settingsから変えることができます。

選択すると自動でsettings.jsonを開いてくれるので、こんな感じのものを書いて保存すればOKです。

// Place your settings in this file to overwrite the default settings
{
    "editor.fontFamily": "適当な日本語フォント"
}

方法2:native.main.cssをいじる

方法1だと全部日本語フォントになってしまいます。英数字はConsolasで、日本語は別フォントで、としたい場合は、大元のcssをいじるしかありません。

ここを参考にC:\Users\{username}\AppData\Local\Code\app-0.1.0\resources\app\client\vs\monaco\ui\workbench\native\native.main.css内のfont-familyを検索し、よきにはからって下さい。

勿論他の要素をいじることもできるので参考サイトのように自分だけのオタク臭い開発環境を整えるのも一興でしょう。ただまぁ、アップデートかかったら即死ぬと思いますが。

(2015/11/27追記) v0.5.0ぐらいから構成が変わってnative.main.cssが消滅しました。ただまぁ、cssで設定していることには変わりないので、自力で修正自体は可能です。

参考