スポンサーリンク

Visual Studio Code アウトライン

アウトライン導入

Visual Studio Codeでは、バージョン1.25から、アウトライン機能を使えるようになりました。

アウトラインとは

アウトラインは、VSCodeにおいては、変数や入れ子構造になっている箇所を、わかりやすく階層リスト化して、人間からみやすくしてくれる機能です。

言語等によって、リスト表示のされ方は異なり、それぞれ対応した表示をしてくれます。

アウトラインを実際に使ってみる

htmlファイルをサンプルとして、アウトライン機能を使ってみてみます。

サンプルコード

VSCodeの画面

サイドバーの左下に、アウトラインの項目があり、それを開くと選択しているファイルの情報を見ることができます。

htmlファイルでは、タグ毎に階層化していたり、JavaScriptのメソッド等をアイコンでわかりやすく見せたりしていますね。

このように、ファイルの内容を階層リスト化して、人間が見やすい形にしてくれています。

まとめ

  • アウトライン機能で、階層リスト化して見やすくしてくれる。
  • 入れ子がどのようになっているか、変数などがどこで宣言されているかがすぐわかる。
  • 様々な言語に対応されており、それぞれに合った見やすい形にしてくれる。