読者です 読者をやめる 読者になる 読者になる

SourceChord

C#とXAML好きなプログラマの備忘録。最近はWPF系の話題が中心です。

Visual Studio Code 0.5.0の新機能・変更点メモ

VSCodeを0.5.0にアップデートして色々と使ってみました。

公式ページ/公式ブログのアップデート詳細は以下
http://blogs.msdn.com/b/vscode/archive/2015/07/06/visual-studio-code-july-update-0-5-0.aspx
https://code.visualstudio.com/updates

今回のアップデートは、全体的にUnity関連のツールとの連携で役立つような機能が多い印象ですね。
あと、コードスニペットはすごくうれしい!!


今回も、個人的にいいなと思った点をメモしときます。

起動オプションの追加/変更

ウィンドウの再利用

「-r」オプションで、既に開いてるVSCodeのウィンドウを使って開くことができるようになりました。

行番号を指定して開く

こんな風に-gオプションを使ってファイルを開くと、VSCodeでファイルを開いた時のカーソル位置を指定することができます。
以下のようにファイル名の後にセミコロンで区切って、カーソル位置を行/列の順で指定することができます。

code -g MainWindowViewModel.cs:30:10

ツールでファイル弄ってる時に、ちょっとVSCodeで同じ箇所を開きたい、とか、使い道は色々ありそうですね。

JavaScript用のプロジェクト設定機能の追加(.jsconfigファイル)

JavaScriptファイルも、TypeScriptと同じようにプロジェクト設定を行うためのファイルを作れるようになりました。
まだあまり使いこなしてないので、この辺は省略。

コードスニペット機能

コードスニペット機能が追加されました。
これは嬉しい。

デフォルトでもいくつかのスニペットが登録されています。
以下は、「ct」と打ったところ。「ctor」というコードスニペットが選択肢に出てきています。
f:id:minami_SC:20150712003520p:plain:w300
ここでTabを押すとコードスニペットコンストラクタのコードが生成されます。
f:id:minami_SC:20150712003528p:plain:w300

コードスニペットの追加

コードスニペットを自分で追加することもできます。
スニペットを定義するには、メニューからFile⇒Preferences⇒User Snippetsをクリックし、コマンドパレットで、対象の言語を指定します。
すると、選んだ言語用のjson形式の定義ファイルが開かれるので、ここでスニペットを定義していきます。

スニペット定義はTextMateのテンプレートの記法で書くようです。

 "Print to console": {
	"prefix": "cw",
	"body": [
		"console.log('$1');",
		"$2"
	],
	"description": "コンソールに出力します。"
}

こんな風に、サラっとスニペットの定義ができます。
VisualStudio本家のコードスニペットより、気軽にスニペット作れてイイ感じです。
f:id:minami_SC:20150712003629p:plain

ファイル/フォルダの非表示機能

設定ファイル(settings.json)に「files.exclude」という項目を追加することで、VSCodeのエクスプローラに表示しないファイルを指定することができます。

// Place your settings in this file to overwrite default and user settings.
{
	// Configure glob patterns for excluding files and folders.
	"files.exclude": {
		"**/*.config": true
	}
}

こんな風に設定を書いておくと、条件にマッチしたファイルなどは、VSCodeのエクスプローラに表示されないようになります。
この例では、.configという拡張子のファイルを非表示に設定しています。

設定前 設定後
f:id:minami_SC:20150712003649p:plain:w200 f:id:minami_SC:20150712003655p:plain:w200


単純に拡張子でフィルタリングするだけでなく、もうちょっと入り組んだ条件でフィルタリングすることもできます。

// Place your settings in this file to overwrite default and user settings.
{
	// Configure glob patterns for excluding files and folders.
	"files.exclude": {
		"**/*.config": true,
		"**/*.js": { "when": "$(basename).ts"}
	}
}

この例では、単純に.jsの拡張子のファイルを非表示にするのではなく、同名の.tsファイルが存在する場合に、.jsファイルを非表示にするという条件になっています。

以下の結果のように、対応する.tsファイルが存在しないsample.jsファイルはフィルタリングされずに表示されたままになっていることが確認できるかと思います。
f:id:minami_SC:20150712003700p:plain:w200

TypeScriptなどのaltJS系言語のコーディング時には、こういう設定で.jsや.js.mapを消しておくと見通しが良くなりそうですね。
また、この手の設定はアプリ全体の設定ではなく、ワーキングスペースの設定としておいた方が良いかと思います。

その他

ES6サポート

jsファイル編集時に、ES6の構文がサポートさるようになりました。
自分は普段TypeScript使ってて、直接JavaScriptを書くことはあまりないんで、ここも省略。

プロキシ設定

VSCodeにネットワークのプロキシ設定ができるようになりました。

VSCodeでは、自動で型定義ファイルを取得するための機能があったりするのですが、
こういった機能は、プロキシ設定が必要な環境では動作しませんでした。
f:id:minami_SC:20150712003744p:plain:w400

setting.jsonに以下の設定を追加することで、プロキシ設定が必要な環境でもこういうネットワーク接続を利用した機能が動作するようになります。
f:id:minami_SC:20150712003800p:plain:w300

文字のレンダリング

文字がクッキリと描画されるようになりました。
0.3.0の表示と比較してみると、微妙にですが違いが分かるかと思います。

0.3.0の表示 0.5.0の表示
f:id:minami_SC:20150712003810p:plain:w300 f:id:minami_SC:20150712003817p:plain:w300