私はAngular開発にはVisual Studio Codeを使っているんですが、
// #region XXXXX、 // #endregionで囲むと、行番号のとこに [-] マークが現れ、折りたためるようになります。
やっぱ便利ですよね。欲しかった人多いようです。
https://github.com/Microsoft/TypeScript/issues/11073
AngularのComponentは、ビューのためにいろんなコードが入ってきてわかりづらくなるので、次のようなRegionで区切っています。
大体いつも切ってるRegionを、既存コードからコピペするの面倒なので、メモ代わりに投稿します。
区切り方
@Component({
selector: 'app-foobar',
templateUrl: 'foobar.html',
})
export class FoobarComponent {
// #region インタフェース
@Input() ...
@Output() ...
// #endregion
// #region コンストラクタ・ライフサイクル
constructor(
private http: HttpClient,
private router: Router,
) {
...
}
ngOnInit() {
...
// #endregion
// #region ビューバインド
@ViewChild('child') child: ChildComponent;
...
public viewModel: any;
...
// #endregion
// #region イベント
public onClickSearch() {
...
// #endregion
// #region プライベート
private fixedArray: any[] = ['aaa', 'bbb', 'ccc'];
private myMethod() {
...
// #endregion
}
コピペ用
// #reion インタフェース
// #endregion
// #region コンストラクタ・ライフサイクル
// #endregion
// #region イベント
// #endregion
// #region ビューバインド
// #endregion
// #region プライベート
// #endregion
2018/03/23追記
ビューに表示するモデルをコンポーネントに保持しておく場合は、ビューモデルを別にするのがわかりやすそう。Regionは重ね掛けできます。
// #reion インタフェース
// #endregion
// #region コンストラクタ・ライフサイクル
// #endregion
// #region ビューバインド
// #region ビューモデル
// #endregion
// #endregion
// #region イベント
// #endregion
// #region 内部メンバ
// #endregion