こんにちは。オルターブースのふるのです。
この記事はオルターブース アドベントカレンダー 2023 の12日目の記事になります。
アドベントカレンダー2023も折り返しになりますが、そろそろ頭から煙が出ている方もいらっしゃるのではないでしょうか。
安心してください。この記事はきっと小休止になることでしょう... ！
えぇ、きっと！
肝心の内容ですが、今回は普段開発の際に使用しているツールの小技やショートカットなどをご紹介してみたいと思います！
既に知ってる方は「使ってる使ってる～」と思っていただけると。
知らなかったという方は是非使ってみてください！
※注) → はショートカットを連続で実行することです。
Visual Studio
ドキュメントフォーマット
Ctrl+K → Ctrl+D
ドキュメントフォーマット(指定範囲のみ)
Ctrl+K → Ctrl+F
大文字変換
Ctrl+Shiftキー+U
小文字変換
Ctrl+U
行コメントアウト
Ctrl+K → Ctrl+C
行コメントアウト(切替)
Ctrl+K → Ctrl+/
※コメントされている場合は外し、コメントがない場合は付けます。
ブロックコメントアウト
Ctrl+Shiftキー+/
イミディエイトウィンドウ
デバッグ中に式のデバッグと評価、ステートメントの実行、変数値の出力などが行えます。
実装した関数のチェックなど色々使えます。
Visual Studio Search
ソースコードの検索の他、ファイル名での検索や機能の検索もできる超便利検索機能。
こんな機能ないかなっと思ったらとりあえずここで検索してみましょう。
VS Code
複数選択
Alt+左クリック
任意の位置にカーソルを置くことができます。
範囲選択(複数行可)
任意の場所を左クリック → 任意の場所でAlt+Shiftキー+左クリック
最初のカーソル位置から行列を無視して範囲選択が可能です。
改行含む検索、置換
Ctrl+F
※上記は通常の検索を起動
検索に改行を含めることができます。
同様に置換結果にも含めることが可能です。
マルチカーソル
Ctrl+Shitfキー+L
任意の単語の上にカーソルをおいて、上記ショートカットキーを実行すると該当する文字列すべてを選択することができます。
ブラウザの開発ツール(Chrome)
Elementフォーカス
Ctrl+Shitfキー+C
Elementのパスを取得
- Elementsタブ
- 任意のElementを選択して右クリック
Copy→Copy XPathorFull XPathを選択- クリップボードにコピーされる
ConsoleでJS実行
実はログが流れているConsoleタブでJSの関数を実行できます。
実行されるまでに手順を踏まないといけない関数のテストなどに便利です。
JSのコードを編集してデバッグ
※Minifyされていると使い難いです。
- Sourcesタブ
- JSのソースコードを表示
- コードを編集！
- デバッグ
オンライン上でJSのソースを編集してそのままデバッグすることができます。
ちょっとアニメーションの動きが違うなぁとか言うときに数値を微調整して確認するなどのことが可能です。
まとめ
以上、よく使う小技でした！
他にもありますが、今回は使用頻度が高かったり、珍しい?機能だったりをご紹介しました。
ちなみに、私はへーしゃ CEOからお借りしているSTREAM DECKにショートカットを登録して使っています。
最初は意味あるのかな...と思いつつ使ってみると意外と便利でした！
お持ちの方は是非試してみてください！
サービス一覧 www.alterbooth.com cloudpointer.tech www.alterbooth.com
