【VSCode】Visual Studio Codeでregionを使う

概要

Visual Studio Code では、Visual Studio の C# のように region指定が出来ます。
今回は Visual Studio Code で TypeScript, HTML, CSS に対してregion指定をしたいと思います。

基本的には各言語のコメントアウト部分に #region と #endregion を設定するだけです。

動作環境

• Visual Studio Code Version 1.23

サンプルソース

TypeScript

@Component({
    selector:    'app-root',
    templateUrl: './app.component.html',
    styleUrls:   ['./app.component.css']
})
export class AppComponent {

// #region fields

    /** タイトル */
    title = 'app';

// #endregion

// #region methods

    /**
     * クリックイベント
     */
    onClick(): void {
        console.log('hoge');
    }

// #endregion

}

折り畳みイメージ

HTML

<!--#region header  -->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
</div>
<!-- #endregion -->

CSS

/* #region color */
.hoge {
    color: blue;
}
/* #endregion */ 

終わりに

region を利用することで、指定した範囲を折り畳み可能になります。 フィールド、パブリックメソッド、プライベートメソッド等をregionで区切ることで、あとからソースを確認しやすくなるので、ぜひやってみてください。

参考URL

code.visualstudio.com