※本記事は、ChatGPTによる意訳+翻訳を活用し、レイアウト調整したものです。
※元記事を見て、内容がズレていないか査読するようにしています。
※感想は、オリジナルです。
原文
10 Essential VS Code Tips & Tricks for Greater Productivity - DEV Community
意訳+要約
VS Codeで生産性を高めるための10の必須テクニック
Visual Studio Code（VS Code）は、多くの開発者に愛用されるエディタですが、その本当の力を発揮するためには、いくつかの隠れた機能やショートカットを知っておく必要があります。この記事では、VS Codeの生産性を高めるための10の必須テクニックを紹介します。
1. コマンドパレットの活用
VS Codeのコマンドパレット（Ctrl+Shift+P）は、コマンドを素早く実行するための万能ツールです。ファイルのオープンから拡張機能のインストールまで、あらゆる操作がここから行えます。
2. マルチカーソルで同時編集
複数箇所を同時に編集する「マルチカーソル機能」は、大量のコード修正や同時変更に便利です。Altキーを押しながらクリックすることで、複数のカーソルを設定できます。
3. 統合ターミナル
VS Codeには統合ターミナルがあり、コードエディター内で直接コマンドを実行できます。複数のタブもサポートしているため、エディターとターミナルを切り替えることなく、パッケージのインストールやGit操作などを効率的に管理できます。
4. 禅モード
集中したいときには、Zenモード（Ctrl + K Z）が便利です。すべてのUI要素が非表示になり、フルスクリーンでコードに集中できます。終了するにはEscキーを2回押します。
5. Emmet略語
Emmetを使うことで、HTMLやCSSのコーディングが簡単になります。Emmetの省略形を使えば、数回のキー操作でコードブロック全体を素早く生成可能です
6. サイドバイサイド編集
VS Codeでは、ファイルを並べて開けるため、コードの比較やドキュメントの参照が簡単です。ファイルをドラッグするか、分割エディター（Ctrl + ）を使って、垂直または水平にエディターグループを作成できます。
7. ライブシェア
Live Shareを使うと、VS Codeセッションを他の開発者とリアルタイムで共有でき、共同編集、デバッグ、ターミナル共有が可能です。リモートチームやペアプログラミングに最適な機能です。
8. ピーク定義
現在のファイルを離れずに関数や変数の定義を確認したい場合、Peek Definition（Alt + F12）を使うと便利です。インラインウィンドウで定義が表示され、ファイル間の移動が不要になります。
9. スニペットでコードの再利用
よく使うコードのテンプレートを「スニペット」として保存しておくことで、同じコードを何度も書く手間を省けます。設定から自分専用のスニペットを作成しましょう。
10. 自動保存
作業内容を失わないようにするには、自動保存機能が便利です。自動保存を有効にすると、変更が加わるたびに自動的に保存されます。保存のタイミングはカスタマイズ可能で、特定のアクション後にも設定できます。
検証・メモ
禅モードへの移行のショートカット→ctrl+kしたあとにz。"ctrl+K Z"って描かれてるから、ctrlとKとZを同時押ししてたが、違うらしい。。。
そういう意味で書かれてないのね。AI要約の誤訳かと思ってしまったが、原文にも書いてあったので、結構戸惑った。
Emmet略語 → cssに精通している人ならば、使いやすいかも？自分の場合は、そうでもない。
関連リンク
VSCodeショートカットまとめ（シンプルで見やすい一覧表） | これを読めば思い出す
Visual Studio Code の Live Share をインストールしてサインインする - Live Share | Microsoft Learn
VS Codeのユーザースニペット機能の使い方メモ #VSCode - Qiita
感想＋雑記
個人的には、使いやすいかどうかは、人によるなぁという感覚を読んでいて感じた。
vscodeが上位に来たのは、利用用途が幅広いからでは？って思ってる。
たぶん、開発の主軸で使ってるエディタはどれって聞かれると、結果が違う気がする。
※今回は、複数選択式だったらしい。
それぞれの項目に対しての個人の見解は、以下。
- コマンドパレット
- よく使う。
- ショートカットだと思い出せないので、キーワードが頭の片隅にあると、いろいろな機能へのアクセスが楽になるってのを使っていて感じている。
- マルチカーソル
- 統合ターミナル
- 多機能ファイルエクスプローラみたいな感じになる
- 開発だと当たり前過ぎて、それほどメリットとは感じないが。
- 個別のエディタよりは、汎用性が高い
- 禅モード
- 起動方法に四苦八苦した。。。
- 本当に効率上がるのか？って疑問を感じてる。
- メモ取ることだけしたいのなら、このモードでもいいのかもしれないが、vscodeはだいたい開発目的で使うような気が。。。
- Emmet略語
- どっちかというと、デザイナー向けっぽい気が
- 開発者がゴリゴリhtml書くところを想像できない
- サイドバイサイド編集
- ファイルの中身の比較でよく使う。
- 実装の参考にするとかでも、実装箇所と参考箇所を並べて見たりするときに使う
- ピーク定義
- いっつも、ctrl押しながらマウスカーソル当てて見てたので、それほどって感じ
- 使えないということはないが、たぶん、カーソル当てて見る気がする。
- スニペットでコードの再利用
- ようするにテンプレート機能みたいなもんね
- 問題は、自分がよく使うスニペットってのが分からないところだ。。。
- 自動保存
- これは、はっきり言って、アンチ側
- 保存ができてないってのは、自業自得だと思ってる。
- いつ保存されたかわからないので、自分で保存するようにしてる。
- 無駄にリソース消費しそうなので、あんまり使いたくはない。
