ということで、Visual Studio Code （以下VSC）を試してたんだが、もうSublimeである必要も無いなと。Sublimeにある機能はほぼ有りそう。
エディターを選ぶ時は、この機能があるかどうかで選ぶ
- 矩形選択（Box selection）： Alt+Shiftとマウス左ドラッグ
- 複数選択 （Multiple selection）： 一つ単語を選択し、Ctrl+D （Sublimeと同じ）
これは便利だなと思った機能（普通のIDEならあるはずだが、Sublimeはエディターなので無い）
- GitのConflict の修正
- メソッドとかModelとかをPeek Definition (Alt+F12) で、新規タブ開かずに、定義を覗き見できる。
ツリー一覧、デバッグコンソール、ターミナルのショートカットはあるけど、それぞれ移動するショートカットは見つからず。因みにターミナルのショートカット Alt+` なんだが、日本入力モード有効だと、英日の切り替えショートカットとぶつかるので動かない。多分英語キーボードの為。
以下のプラグインを入れた。
- Angular5 Snippets
- Code Spell Checker
- Debugger for Chrome
- Debugger for Edge
- Debugger for FireFox （FireFoxでのデバッグはくそ重かった）
- Material Icon Theme
- Material Theme
- Search node_module
- SVG Viewer
- TSLint
デフォルトのターミナルは、Bash （Debian）を指定
"terminal.integrated.shell.windows": "C:\\Windows\\System32\\bash.exe",
"terminal.integrated.enableBell": false,
/etc/inputrc で以下をコメントアウト、もしくは追記
set bell-style none
あとは、Chromeでのデバッグ方法をメモ。新規でウインドウを起動する方法と、今開いてるウィンドウにアタッチする方法があるが、前者は簡単なので、後者を記録。
まずは、Chromeにオプションを付けて起動しないといけない。デスクトップとかに既にショートカットがあるので、複製してプロパティを開く。リンク先の欄に、 ––remote-debugging-port=9222 を追加する。そして、このショートカットアイコンを使ってChromeを起動する。
VSCに戻って、Ctrl+Shift+D でデバッグウインドウに変更。上の方にある歯車アイコンをクリックして、以下を追加。２段目の部分はアタッチデバッグ用。これ実際にはウィンドウにアタッチするわけでなく、開いてるページにアタッチされる。なので、localhost:4200/user というページをデバッグしたかったら、url を localhost:4200/user に変更する。若しくは、開いてるページを以下に記してるホームへ移動してから、デバッガーを呼ぶ事になる。
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "attach",
"name": "Chrome attach",
"port": 9222,
"url": "http://localhost:4200/",
"webRoot": "${workspaceRoot}"
}
]
}
一先ず、ホームをデバッグすると仮定して、ホームのソースコードを開いてF9でブレークポイントを設置、F5 か再生ボタンみたいなのをクリックすると、アタッチ先を探し出す。オプション付けないで起動したChromeだと接続が拒否されましたみたいなエラーがでてくる。
接続が上手くいくと、書き込み禁止のソースコードが表示され、謎な場所でポーズがかかるので、ブレークポイントを再度設置し、F5で続ける。書き込み禁止ファイルが表示されない時は、デタッチ、アタッチを繰り返したり、Restart(Ctrl+Shift+F5)を繰り返さないといけないようだ。Chrome上からファイルを掘り下げるのとどっちが早いのかは微妙な時がある。直ぐにアタッチされる時もあるんだけど・・・
最新のChrome Debubberでは、開いてるソースコード上のBreak Pointでちゃんと止まるので、F5押すだけでデバッグできるようになり快適。
ソースコードを更新した場合は、デタッチしてから再度アタッチしないと、古いコードが残ったままになるようだ。ショートカットはVisual Studioと同じで、F9でブレイクポイントのON/OFF、F10で進む、F11で中へ、Shift+F11で外へ、Ctrl+Shift+F5で始めっからやり直しかな。
デバッグ中に気になったのが、subscriptionやforEach内から、外の変数を参照する事が出来ない事。なので、ローカル変数に入れてみたりしてる。Console.log でも良いんだけど、デバッグの方が色々見られるし、変数見ながらコードも打てるので楽。他にいい方法あるのかな？今はこんな感じで対応。forEach内で、this.globalVariable にマウスカーソルを持って行っても、Undefinedだが、a では中身が見える。
this.globalVariable = 'test';
this.arrayAbc.forEach((value, index) => {
const a = this.globalVariable;
});
