【VSCode】Visual Studio Code 0.5.0の新機能まとめ

前書き

またいつの間にかVisual Studio Codeがバージョンアップしていました。そーいや「これからは1ヶ月に1回ペースで更新するよ！」みたいなことがどこかに書いてあったような。

今回は0.5.0になったみたいですね。リリースは奇数でやるってスタンスなのかしらん。

以前0.3.0の機能をまとめたので、今回もまとめてみましょう。

【VSCode】Visual Studio Code 0.3.0の新機能まとめ

アップデート方法

今回から自動アップデート機能がちゃんと動作するようです。（Linuxではサポートしてない模様。）

なぜか私の環境では一向に機能しなかったので、もっかいインストールしてきました。

新機能

またUpdatesの箇所を適当に訳していきます。

ただし、可能な限り省略するので、必要な情報だと思ったらちゃんと元ドキュメントを読みましょうね…。

要約

ファイルの扱い方がアップデートされました。
- explorerでファイルやフォルダをフィルタできるようになりました。
- コマンドラインからファイルを開く時に行番号を指定することができるようになりました。
- 複数のファイルを開く時に既に存在するインスタンスを流用するようになりました。
- working filesの数を制御できるようになりました。
末尾のwhite spaceを削除するオプションが追加されました。
ワークスペース内の検索時に特定のファイルのみを検索できるようになりました。
JavaScriptでES6をサポートするようになりました。また、jsconfig.jsonや///による参照の改善、ワークスペース設定の追加などが行われました。
内蔵されているGitに以下の機能が追加されました。
- 認証プロンプトの表示
- 複数行のコミットメッセージ
- 自動フェッチ
ユーザ独自のスニペットを作成できるようになりました。また、Dockerfiles、Python、Rustといった言語のスニペットが追加されました。
デバッグ機能の強化として、ウォッチ式の追加や、Node.jsのブレークポイント、ソースマップのサポートなどが行われました。
他にも、プロキシのサポートや、MacやWindowsでの自動アップデートの提供、細かいバグフィックスが行われました。

ファイル

`-r`と`-g`の追加

コマンドラインにて-r（--reuse-window）オプションを使うことで最後にアクティブになったVisual Studio Codeのワークスペースにファイルを追加できるようになりました。存在しないファイル名が指定されていた場合はdirtyなファイルが作成されます。
コマンドラインにて-g（--goto）オプションを使うことでファイルの行番号を指定することができるようになりました。
- code -g file1:<line>:<column?> file2:<line>:<column?> file3:<line>:<column?>
- columnを同時に指定することで位置も指定することができます。
- 実際の指定例はこんな感じ。
  code -g c:\mycode\HelloWorld.ts:10:17

-rや-gは外部ツールからVisual Studio Codeを呼び出す時に便利だよ！とのこと。

コマンドラインから呼び出す際の変更点

複数のファイルパスを渡してもちゃんと一つのインスタンスで開くようになりました。

例えばcode . HelloWorld.tsとすれば、explorerにはカレントディレクトリとHelloWorld.tsが表示されます。（HelloWorld.tsがもしなければdirtyなファイルが作成される）

Macのdockのサポート

既にアクティブになっているdock上のVisual Studio Codeにファイル or フォルダをドロップしたら同じインスタンスで開くようになりました。

エディタのオプション

ファイル検索パターンの文法

Ctrl + Shift + Fで呼び出せるsearchで検索対象 / 非対象とするファイルパターンを指定できるようになりました。

また、settings.jsonに予め非対象とするファイルのパターンを記述しておくことができます。（files.excludeやsearch.exclude）

パターンマッチの文法は以下の通り。

*: 1文字以上の一致
?: 1文字の一致
**: 複数のパスセグメント
{}: グループ指定（{**/*.html,**/*.txt}）
[]: 範囲指定（**/example_[0-9].txt））

末尾white spaceの自動削除

settings.jsonでfiles.trimTrailingWhitespaceをtrueにすると末尾のwhite spaceを自動で削除してくれます。

Working Filesの数のカスタマイズ

settings.jsonのexplorer.workingFiles.maxVisibleでWorking Filesの表示数を制御できるようになりました。（デフォルトでは9）

また、explorer.workingFiles.dynamicHeightをfalseにすると新しいWorking Fileを操作しても自動で枠のサイズが広がらなくなります。（デフォルトではtrue）

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

先述したfiles.excludeに指定したファイル / フォルダは検索結果だけでなくexplorerでも表示されません。

リソースの非表示

files.excludeの高度な使い方。元文章だとわかりにくいので勝手に解説します。

files.excludeはデフォルトだとこんな設定になっています。

"files.exclude": {
    "**/.git": true,
    "**/.DS_Store": true
}

なぜかファイルパターンに対する値がbooleanになっていますね。ここがミソで、このbooleanの部分にexpressionを記述することができます。

例えば「.tsと同名の.jsは非表示とする」なんてことがしたかったらこんなexpressionを書けばOKです。

"files.exclude": {
    "**/*.js": { "when": "$(basename).ts"}
}

このexpressionに関するドキュメントは見当たりませんでした。しっかりしろVSCodeチーム！

検索対象から特定ファイルの除外

search.excludeにfiles.excludeと同じようなことが記述できます。

今まであったsearch.excludeFoldersはもう使えなくなるし破壊的変更点となるので注意してね、とのこと。

検索対象ファイルの指定

searchの「files to include」にファイル検索パターンが使えるよと言うお話。

JavaScript

破壊的変更

以下の設定は非推奨となるようです。jsconfig.jsonの方でサポートするから使わないでね、とのこと。

validate.scope
validate.baseUrl
validate.target
validate.module
validate.noLib

ES6のサポート

ECMAScript 6の文法を解釈してくれるようになりました。

ただし、superの参照が上手くいかない（？）らしく、コンパイルエラーが出るなら_surpressSuperWithoutSuperTypeError: [true|false]を使って抑制してくれとのこと。

jsconfig.jsonによるプロジェクト設定

tsconfig.jsonのサブセットとしてjsconfig.jsonを作成することができます。

これにはどのjsファイルを使うかだとか、どのコンパイラを使うかなどを指定することができます。なぜか画像で表示されている例を書き写してみますか。

{
    "compilerOptions": {
        "target": "ES6",
        "module": "commonjs"
    },
    "files": [
        "app.js",
        "model.js"
    ]
}

これを設定しておくことで///による参照が不要になるそうです。

シバンの色付け

#!で始まる行を色付けしてくれるようになりました。これ、シバン（shebang）って言うんですね…。

スニペット

待望のユーザスニペットが導入されました。詳しいドキュメントはこちら。

ユーザスニペットの定義

メニューバーのFile | Preferencesに「User Snippets」なる項目が追加されています。

選択するとどの言語のスニペットを定義するか聞かれるので、適当に選びましょう。

で、公式の例はあんまり面白くないので、Visual StudioでC#を書いてる時に頻繁に使うpropを定義してみましょう。

{
    "Property": {
        "prefix": "prop",
        "body": "public ${1:int} ${2:MyProperty} { get; set; }",
        "description": "auto Property"
    }
}

prefixはスニペットを呼び出す時の文字列、descriptionはそのまんまスニペットの説明です。

bodyで実際にスニペットを定義します。${id:text}はタブストップです。idに数値、textにデフォルト値を指定しておくとベネです。また、bodyは配列を受け取るので、複数行を定義することもできます。

Git

ぶっちゃけ機能追加 / 改善するよりVSCodeからgitのコマンドを直接叩けるようにしてほしいんですが。

認証プロンプト

「なんかVSCodeのGitが動かないんだけど…。」→「認証を求められている場所で固まってる」ってパターンがあまりにも多かったらしいので追加されました。

毎回毎回入力するのが面倒だったらgit configで設定してくれよな！とのこと。

複数行のコミットメッセージ

コミットメッセージ入力中にEnterを押すことで改行されるようになりました。送信する場合はCtrl + Enterだそうです。

複数ファイルの選択

git addする時に複数ファイルを選択できるようになりました。今までなかったのが不思議。

自動フェッチの制御

自動でフェッチするかどうかをドロップダウンで選択できるようになりました。

デバッグ

launch.json生成の改善

launch.jsonを生成する時にpackage.jsonのmain属性を見るようにしたそうです。

ウォッチ式

ウォッチ式が追加されました。

って言うか…今までなかったんですね。未だにVSCodeのデバッグは使ったことないです。

デバッグ中のコード編集

流石にホット・コード置換は無理だけど、デバッグ中にコードが編集されたら自動でデバッガが再起動するようにしたとのこと。

Node.jsのブレークポイント改善

コールバックのようなクロージャの中にブレークポイントが置かれた場合、呼び出された行と実際に実行している行を表示するようになりました。

ブレークポイントのアクティブ / 非アクティブ化

ブレークポイントのアクティブ / 非アクティブが簡単に切り替えられるようになりました。

JavaScriptのソースマップ

生成（あるいはコンパイル）されたJavaScriptの元ソースが見つからない場合、接続設定（launch configuration）に記述されているoutDirから探すようになりました。

また、インラインで書かれたソースマップもサポートされるようになりました。（インラインで書かれたソースは無理、とのこと。）

Minifiedのデバッグ

圧縮 / 難読化されたJavaScriptでもデバッグできるようになりました。

その他諸々

出力への切り替え

Ctrl+Shift+Uで簡単にOutputを見ることができるようになりました。

OS XとWindowsでの自動アップデート

私は機能しませんでした。

プロキシのサポート

package/project/bower.jsonでHTTP通信をする際、以下のどちらかの方法でプロキシを経由できるようになりました。

VSCode起動前に環境変数のhttp_proxyとhttps_proxyに値をセットする。
user settingsのhttp.proxyに値をセットする。

プロキシサーバへの認証（ID / パスワード）なんかはこんな風に指定することができます。VSCodeとは全く関係ない豆知識です。

http://{Username}:{Password}@{ProxyHost}:{PortNumber}

細かいバグフィックス

今回のアップデートに関わるissueが挙げられています。

16480: Git push/pull not working
16782: Fonts Are Blurry
17223: SourceMap debugging doesn't work with inlined source map
17079: Poor Scrolling in Explore Sidebar

まとめ

いやはや、まだまだ未完成度合いがすごいですね。

前書き