世界中の開発者の 73% が同じコード エディターに依存していることをご存知ですか? はい、2023 年の Stack Overflow Developer Survey の結果が出ました。繰り返しになりますが、Visual Studio Code が最も広く使用されている開発環境です。
その理由は誰もが知っています。それは素晴らしいことです。
しかし、私たちはその可能性を最大限に活用しているでしょうか? この記事では、強化されたローカル ソース管理、アニメーション化されたタイピング、クイック行削除など、説得力のある VS Code の機能をいくつか明らかにします。コーディングという目標をこれまでよりも早く達成するために、これらを使用してみましょう。
1. タイムライン ビュー: ローカル ソース管理
タイムライン ビューにより、ローカル ソース管理が可能になります。
私たちの多くは、ファイルの変更を簡単に追跡し、必要に応じて前の時点に戻すのに役立つ Git やその他のソース管理ツールの有用性を知っています。
そのため、VS Code のタイムライン ビューには、Git コミット、ファイル保存、テスト実行など、ファイルに関連する重要なイベントを示す自動的に更新されるタイムラインが表示されます。
このビューを展開すると、現在のファイルに関連するイベントのスナップショットのリストが表示されます。これには、ファイルの保存だけでなく、ファイルがステージングされる Git コミットも含まれます。
スナップショット項目の上にマウスを置くと、Visual Studio Code がスナップショットを作成した日時が表示されます。
スナップショット項目を選択すると、スナップショット時のファイルと現在のファイル間の変更を示す差分ビューが表示されます。
2. 自動保存: Ctrl + S を押す必要はもうありません。
このショートカットを何回使ったか数えられますか? おそらくあなたも無意識のうちに使っているはずです。自動保存機能により、ファイルを編集すると自動的に保存されるため、手動で保存する必要がなくなります。自動保存機能を使用すると、Ctrl + S の疲労を回避し、時間を節約し、ファイルへの最新の変更を常に利用できるようにすることができます。完璧ではありませんが、長所と短所を比較検討する決定はあなたの手に委ねられています。
この機能は、[ファイル] > [自動保存] を使用して簡単に有効にできます。
3. コマンドパレットでやりたいことを何でもする
入力以外の VS Code で行うことはほとんどすべて「コマンド」です。
コマンドを使用すると、エディターで作業を行うことができます。コマンドには、ファイル関連のコマンド、ナビゲーション コマンド、編集コマンド、ターミナル コマンドが含まれており、それぞれが編集エクスペリエンスのさまざまな側面を強化するように最適に設計されています。
したがって、コマンド パレットを使用すると、コマンドを検索し、関連するアクションの実行を選択するだけです。コマンド パレットを開くには、次のキーボード ショートカットを使用します。
Windows/Linux: Ctrl + Shift + P
Mac: Shift + Command + P
ご想像のとおり、右側のキーボード ショートカットは、キーボードを使用してコマンドをより速く実行する方法です。
ショートカットに対するコマンド パレットの主な利点は、ショートカットのないコマンドがある場合、または存在するかどうかわからないコマンドを探している場合にあります。
4. ファイルにすばやく移動します
このマウスは遅すぎます。
はい、エクスプローラー ペインでファイルをクリックすることもできますが、より迅速に選択するには、Ctrl + P を使用してプロジェクト内の特定のファイルを検索して開きます。
Ctrl キーを押しながら Tab キーを押すと、エディター インスタンスで現在開いているファイルのリストが順番に表示されます。
Alt + 左および Alt + 右を使用して、開いているファイルをすばやく参照することもできます。
これらの方法はすべて、カーソルを使用するよりも高速にファイルにアクセスできます。
5. 指定した行に素早くジャンプします
転がらないでジャンプしてください。
デバッグ中、特に特定の行番号でエラーが発生する必要がある場合、行にすばやく移動することは非常に役立ちます。これらの行にジャンプすると、特定のコンテキストでコードを検査し、変数を評価して問題を解決できます。
これを行うには、Ctrl + G キーボード ショートカットを使用します。
6. 行を素早く削除する
この行に到達しました。これを削除したい場合はどうすればよいですか?
テキストをドラッグして選択し、delete キーを押しますか? すべての文字が消えるまでバックスペース キーをたゆまず押し続けますか?
それとも、Ctrl + Shift + K ショートカットを使用して、それらの行と他の数十行を数秒ですばやく削除しますか?
7. 滑らかなカーソルでタイピングを楽しむ
VS Code には、MS Word と同じように、カーソルの移動に合わせてアニメーション化するスムーズ カーソル機能があります。これにより、タイピングの感触がよりスムーズで洗練され、コード行をナビゲートしたり、カーソルをさまざまな位置に配置したりするときに、よりスムーズで自然な感触が得られます。
これをオンにするには、コマンド パレットで設定 UI を開き、「smoot caret」を検索します。
ここでは、[エディタ: カーソル スムーズ キャレット アニメーション] 設定を探しています。これには 3 つのオプションがあります。
オフ: スムーズなカーソルアニメーションなし
明示的: コード内のどこかにカーソルを明示的に配置した場合にのみ、カーソルがアニメーション化されます。
on : 入力中も含め、スムーズ カーソル アニメーションが常に有効になります。
完全な視覚体験を得るには、これをオンに設定します。
8. クイックフォーマットコード
書式設定とは、コードを構造的かつ一貫した方法で整理することで、コードの読みやすさを向上させることです。
これを手動で行っている場合は、より良い方法があることを知る必要があります。
はい、コマンド パレットから簡単にアクセスできる [ドキュメントの書式設定] コマンドを使用して、コードの書式設定を自動的に開始する必要があります。現在のファイルの言語に応じて、特定の「デフォルト」フォーマッタが使用され、インデント、行の長さ、中括弧などのさまざまなルールを使用してコードがフォーマットされます。
非常に優れた組み込みの JS/TS フォーマット ツールがありますが、より堅牢なソリューションとしては、Prettier 拡張機能を強くお勧めします。
インストールしたら、デフォルトのフォーマッタとして設定します。
自動保存の代わりに手動保存を使用する場合、フォーマットを簡単にするために有効にする必要がある機能が 1 つあります。
エディター: 保存時にフォーマット: 「保存時にファイルをフォーマットします。使用可能なフォーマット ツールが必要です。ファイルは遅延すると保存できず、エディターが閉じている必要があります。デフォルトでは無効になっています。」
したがって、上記のデモでわかるように、ファイルを保存すると、VS Code は現在のデフォルトのフォーマッタを使用してコードを自動的にフォーマットします。
自動保存を実行しているとき、書式設定を行うために時々コマンド パレットを開かなくてはならないのは面倒になります。ここでキーボード ショートカットが役に立ちます。
Windows: Shift + Alt + F
Mac: Shift + Option + F
Linux: Ctrl + Shift + I
私は Windows を使用していますが、個人的には、このデフォルトのキーボード ショートカットが好きではありません。自動保存により、時々再フォーマットする必要があり、Shift + Alt + F は時間が経つと面倒になります。
そこで、これを Ctrl + D、Ctrl + D に変更しました。これは、押しやすく覚えやすく、キーバインドの競合がないキーボード ショートカットの組み合わせです。あなたも同じようにすることをお勧めします。
9. マルチカーソル編集で時間を節約する
私が VS Code を始めたばかりの頃は、複数のカーソルを異なる位置に配置して、同じテキストを複数回削除または挿入できるマルチ カーソル編集は素晴らしい瞬間でした。これにより、コードを迅速に作成して繰り返しのタスクを効率的に完了できるため、編集が大幅にスピードアップし、生産性が大幅に向上します。
もちろん、編集中は常に少なくとも 1 つのカーソルが存在します。さらに追加するには、Alt キーを押しながらクリックします。
Ctrl + Alt + Down または Ctrl + Alt + Up を使用して、現在の行の真上または直下にカーソルを簡単に追加することもできます。
これらのショートカットは、それぞれ [カーソルを下に追加] および [カーソルを上に追加] コマンドを呼び出します。
10. 新しいフォルダー/ファイルをすばやく作成する
新しいフォルダーやファイルを作成する必要のないプロジェクトは 1 つもありません。ファイルやフォルダーの作成を高速化する方法があれば、時間の節約が積み重なり、生産性が大幅に向上するでしょう。
VS Code の [新しいファイル] ボタンと [新しいフォルダー] ボタンを使用して新しいファイルとフォルダーを作成している場合は、方法があります。
これらの小さなボタンを見つけるためにマウスを動かし続ける必要はありません。エクスプローラー パネルをダブルクリックするだけで、新しいファイルを作成できます。
新しいフォルダーを作成しますか? まあ、ファイルのないフォルダーは何もありません。新しいファイルを作成するとき、/ 文字を使用して階層を示し、ファイルを保持するための新しいフォルダーやサブフォルダーを簡単に作成できます。
元 Atom ファンの私は、A ショートカットと Shift + A ショートカットをそれぞれ使用して新しいファイルとフォルダーを作成することにすぐに慣れ、何をすればよいのか理解できました。
A と Shift+A は明らかにエンコード用のキーであるため、エクスプローラー ペインにフォーカスがあり、現在のエディターにアクティブなカーソルがない場合にのみ新しいファイル/フォルダーが作成されるように、ここに when 値を含めました。
したがって、入力中にこれらのショートカットを使用するには、まずエクスプローラー ペインに焦点を合わせ、クリックするか、 Ctrl/Command + Shift + E を使用する必要があります。
要約する
[エクスプローラー] ペインでは、タイムライン ビューのローカル ソース管理がデフォルトで有効になっています。
[ファイル] > [自動保存] でファイルを自動的に保存します。
コマンド パレットでコマンドを実行するには、Ctrl + Shift + P または Shift + Command + P を使用します。
Ctrl + P でファイルを開き、Alt + 左/右または Ctrl + Tab を使用して、開いているファイルを切り替えます。
Ctrl + G で行に移動します。
Ctrl + Shift + Kで行を削除
エディターによるスムーズな入力体験: カーソル スムーズ キャレット アニメーション設定。
「ドキュメントのフォーマット」コマンドを使用してコードをフォーマットし、Prettier を使用し、ショートカット キーを Ctrl + D、Ctrl + D に変更します。
Alt + クリック、Ctrl + Alt + 上/下を使用して、上と下に複数のカーソルを同時に追加します。
Windows/Mac では、Alt/Option + 上/下を使用して行を上下に移動します
エクスプローラー ペインをダブルクリックして新しいファイルを作成するか、カスタム キーボード ショートカットを設定します。
仕上げる
記事のスペースが限られているため、今日の内容はここで共有します。記事の最後に、記事の作成は簡単ではないことを思い出していただきたいと思います。私の共有が気に入っていただけましたら、忘れないでください。より多くの人が困っているように、いいねや転送をしてください。同時に、フロントエンドテクノロジーについてもっと知識を得たい場合は、私をフォローすることを歓迎します。あなたのサポートが私にとって共有する最大の動機になります。今後もより多くのコンテンツを出力していきますので、ご期待ください。