(ちょっと Markdown の記述が変すぎたので、markdownlint extension 入れて出直してみました)

Visual Studio Code を Markdown 以外で利用する機会があり、個人的に馴染みのない用語がたくさん出てきたので少しまとめてみた。 主に、Visual Studio Code Docs: Editing Evolved に記載されるもの。

マニュアルとしては、 Get started with Visual Studio Code になる。

Visual Studio Code Insiders Build のマニュアル

また、Insiders Build と呼ばれる Early Access 版があり、こちらのマニュアルはどんどん更新されている。

Visual Studio Code の Tips がまとめられた eBook が Microsoft から提供されていますので、こちらも併せてどうぞ。

Visual Studio Code の機能

Files, Folders & Projects

Visual Studio Code は、ファイルまたはフォルダをベースとして扱うプロダクト。 folder の中に存在するファイル(package.json, project.json, tsconfig.json, or ASP.NET Core Visual Studio solution and project files)を判別して、色々と挙動を変えてるみたい。

Command Palette

F1 キーや Ctrl/Cmd + Shit + P で上部に開く入力覧みたいなやつ。ここに、コマンドを入力したり選択したりで機能を呼び出す。

IntelliSense (インテリセンス)

word/code completion 機能を提供する仕組み。Language Mode: JavaScript, JSON, HTML, CSS, Less, Sass, C# and TypeScript で利用できる。 Visual Studio Code では、Microsoft が Open Source Software として提供する OmniSharp を利用している。

Snippets (スニペット) and Emmet Abbreviations (エメット略語とでも言うのかな?)

Snippets は、定型文やちょっと直せば使えるような短いコードを挿入することが可能な機能。 Visual Studio Code では、ユーザ定義の snippet を作成することもできるし、エクステンションによる拡張もできる

Emmet は、独自の省略記法による HTML/CSS コーディングの高速化を提供する機能

様々な Editor plugin として提供されている。 Language Mode: HTML, Razor, CSS, Less, Sass, XML or Jade で利用可能。 Emmet cheat sheet で表記と展開例を見れる。

ちょっと感動した。

Gutter indicators (ガターインジケーター)

Git 連携してる際、下記のような印で

  • 赤い三角は削除された行
  • 緑のバーは新しく追加された行
  • 青いバーは変更された行

変更の概要をルーラー部分に表示してくれる。

Reference information

CodeLens とも言うのかな? インラインで参照情報を表示してくれるみたいだけど、Language Mode: C# のみサポート? 設定で off にもできるとのこと。

Rename symbol

シンボルのリネームだけど、ファイルをまたがって変更してくれる機能。コメント内のものは対象外となる。 Language Mode: TypeScript と C# をサポート。

Code Action

Language Mode: JavaScript と CSS でサポート。 未定義の変数などのコードの下に電球(lightbulb)マークが表示され、クリックすることで解決策を提供してくれる

Peek (ピーク)

ウィンドウを切り替えることなく下記の情報を取得できる機能

  • Shiftt + F12 で Reference Search (変数やオブジェクトの参照箇所を表示)
  • Option + F12 で Peek Definition (変数やオブジェクトの定義を表示)

Hover (ホバー)

コードにマウスカーソルを重ねることで、シンボルのタイプや役立つ情報を表示してくれる機能 さらに Ctrl を押すと定義内容を表示してくれたり、クリックすることで定義にジャンプしてくれる

Task

外部ツールを使い様々な作業の自動化を可能にする機能。 Automating Markdown compilation の例では、Markdown ファイルの変更を監視し変更が入ると自動的に HTML ファイルを生成するというもの。 gulp と gulp-markdown を組み合わせている。

その他

  • 別なファイルを選択してしまい、Active Window が上書きされた Ctrl + - を押すことで戻せる

  • Salsa

  • TextMate (.tmLanguage)

    ハイライトなどのカラースキームの定義？ * .tmLanguage ファイルの解説？ * https://manual.macromates.com/ja/language_grammars * tmTheme Editor * Color scheme editor for SublimeText, Textmate and a bunch of other text editors

    Visual Studio Code では、JSON または PLIST フォーマットをサポート。下記の実装が使われている。

    Mac OS X には JSON <-> PLIST のコンバータとして使える plutil(1) コマンドがある。 さらに、Xcode には、Property List Editor.app なるツールが含まれているとのこと。これだけ抜け出せないかな・・・https://developer.apple.com/downloads/

  • TypeScript 型定義ファイル

    TypeScriptには、「型定義ファイル」と呼ばれる型情報のみを記述したスクリプトファイルを参照する仕組みが用意されている。 JavaScript は型の定義を持たないため、TypeScript から Javascript ライブラリやフレームワークなどを利用する場合に必要になる。

    そのため、基本的には型定義ファイルを用意して開発を行うことになる。 ファイル内では宣言のみ記載され、IntelliSense などでも利用される。 自由に作成することも可能だし、用意されているものを利用することも可能。

  • TypeScript Definition Manager (TSD)

    TypeScript 型定義ファイル管理ツール。