コーディングに役立つ！Visual Studio Codeのちょっとかゆいところに手が届くような便利な機能とテクニック
Post on:2021年7月20日
sponsors
あまり知られていないけれど、コーディングの作業が捗るVS Codeの機能とテクニックを紹介します。
今開いているファイルを残しながら新しいファイルを開けるようにしたり、コード内のコメントのカラーだけを自分好みに変更する方法など、ちょっとかゆいところに手が届くような便利なテクニックです。
5 Visual Studio Code Hacks That You Will Thank Me For (And They're Not Common Points Like "Install Prettier Extension")
by Mohmed Ishak
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。
はじめに
コーダーの皆さん、こんにちは！
VS Codeの記事というと、「コードを整形するにはPrettierが便利」「コードを複製するにはalt+shift+downキー」などを繰り返し見たことがあると思います。
この記事では、あまり共有されていないVS Codeの機能とテクニックをいくつか紹介しようと思います（5番目を除いて）。
この記事があなたの役に立つことを願います。
1. ファイルを常に新しいタブで開くようにする
ファイルAを開いていて、ファイルBを開きたいのに、ファイルBをクリックすると、ファイルBは開くがファイルAは閉じてしまう、ということはありませんか？
ファイルBをダブルクリックして新しいタブで開くこともできますが、私と同じようにがっかりすることがありませんか？
この問題を解決するには、設定で「workbench.editor.enablePreview」を検索し、このオプションのチェックを外します。これで、VS Codeはファイルを常に新しいタブで開くようになります。
「workbench.editor.enablePreview」のチェックを外す
2. コメントのカラーを変更する
無理にとは言いませんが、コメントのカラーによっては違和感があります。私の場合は、コードの中で自分のコメントを見つけるのが簡単なので、コメントにはこのグリーンを使っています。
コメントのカラーをグリーンに
コメントのカラーを変更するには、settings.jsonファイルに下記のコードを追加するか、すでに存在している場合は削除して置換してください。
|
1 2 3 |
"editor.tokenColorCustomizations": { "comments": "#229977" // あなたが見やすいカラーにしてください }, |
3. コードを大きく表示する
時には、ファイルやフォルダを、そしてコードを大きく表示したいことがあります。そんな時に便利なショートカットがあります。
- ズームアウト
- ctrl+-キーを押す。
- ズームイン
- ctrl+=キーを押す。
さらに、F11キーを押すと、VS Codeが全画面に表示されます。
macOSの場合は、
- ズームアウト
- command+-キーを押す。
- ズームイン
- command+=キーを押す。
F11はmacOSのショートカット（デスクトップを表示）と競合するためcommand+ctrl+FでVS Codeが全画面に表示されます。
4. カスタムスニペットを生成する
カスタムスニペットとはコードのテンプレートのことで、キーボードで数文字を入力だけで、そのテンプレートがVS Codeで利用できます。
VS Codeで使用するカスタムスニペットを作成するには、snippet generatorにアクセスして、よく使用するコード（スニペット）を入力します。
「Tab Trigger」には起動するためのキーを必ず入力してください。その後、表示されたスニペットをコピーします。VS Codeに戻り、「基本設定」から「ユーザースニペット」を選択し、「新しいグローバルスニペット」をクリックします。あとは、さきほどのコピーしたスニペットをペーストするだけです。
macOSの場合は、「基本設定」から「ユーザースニペット」を選択し、「新しいグローバルスニペット」をクリックします。
VS Codeのユーザースニペット
5. VS Codeのテーマを変更する
5番目は前述した通り、当たり前のことですが（もちろんタイトルに反しています）、VSCodeThemesにアクセスして、自分にあった新しいテーマを使用するのは非常に素晴らしいことです。各テーマをプレビューすることができる大規模なコレクションです。
当ブログの記事も参考にどうぞ。コードがはっきりと見やすくて、使いやすいダーク系とライト系のテーマをまとめました。
sponsors
