VS Codeのオススメの設定・拡張機能・便利機能・ショートカット(決定版)

VS Codeのオススメの設定・拡張機能・便利機能・ショートカット

はじめに

普段、開発でVS Codeをよく使っています。
(Webアプリケーションの開発や、Pythonの開発など)

とても軽量でありながら必要な機能をきちんと備えており、とてもお気に入りです🙂

今回は私的に最初に行う設定や、拡張機能、よく使うショートカットや便利な機能をまとめてみました。
自分用のメモになりますが、普段お使いの方も一読してみてはいかがでしょうか!

Windows上にインストールした、以下のバージョンを使用しました。

Version: 1.41.1
Commit: 26076a4de974ead31f97692a0d32f90d735645c0
Date: 2019-12-18T14:58:56.166Z
Electron: 6.1.5
Chrome: 76.0.3809.146
Node.js: 12.4.0
V8: 7.6.303.31-electron.0
OS: Windows_NT x64 10.0.17763

設定

VS Codeの日本語化

日本語化を行うには、拡張機能をインストールします。
左側の「Extensions」をクリックし「japanese」と検索します。

Japanese Language Pack for Visual Studio Codeという拡張機能をインストールします。

「Restart Now」をクリックしVS Codeを再起動します。

VS Codeが日本語化されました。

VS Codeのタイトルバーにパスを表示

VS Codeのタイトルバーに現在開いているファイルのパスを表示するように変更します。
デフォルトでは以下のようになっております。

「Visual Studio Code」って表示要りませんよね笑

タブにはファイル名が表示されていますので、タイトルにはプロジェクトの相対パスが表示されていると便利かと思います。

ファイル→基本設定→設定をクリックします。

「title」と入力すると、タイトルに関する設定項目が表示されます。

デフォルトでは以下のように設定されています。

変数によって、タイトルの表示形式を変更することができます。
私は、以下のように設定しています。

変数の意味は画面に記載がありますが、今回使用した変数は以下です。

${dirty} アクティブなエディターが編集状態 (ダーティー) のとき、ダーティー インジゲーターを表示します。
${activeEditorMedium} ワークスペース フォルダーに対して相対的なファイルのパス (例: myFolder/myFileFolder/myFile.txt)。
${separator} 値か固定のテキストで囲われたとき、条件付きの区切り記号 (” – “) を表示します。
${rootName} ワークスペースの名前 (例: myFolder または myWorkspace).

以下のように表示されました。

ミニマップを左に表示

ミニマップとは、ソース全体の概要を見渡せる機能です。
大体どの辺を表示しているのか、ぱっと見て分かりやすいです。

個人的には右端よりは、左側にあった方が視線の移動が少なくて良いと思います。

先ほどと同じく設定画面より、「editor.minimap.side」と検索します。
「left」に設定しました。

左側に表示されました。

ミニマップの表示領域を常に表示

ミニマップにマウスオーバーすると、現在の表示領域が分かります。

マウス非オーバー時

マウスオーバー時
表示領域がグレーで表示されますね。

マウスオーバーしなくても確認したいので、常に表示するようにします。

先ほどと同じく設定画面より、「editor.minimap.show」と検索します。
「always」に設定しました。

これでマウスオーバーしなくても、現在の表示領域が分かるようになりました。

エクスプローラのインデントと常にラインを表示

左のエクスプローラのツリー表示が、デフォルトでは窮屈です。
また、縦のラインがマウスオーバー時にしか表示されません。
特に階層が深くなるにつれ、見づらくなります。

先ほどと同じく設定画面より、「tree.indent」と検索します。
「25」に設定しました。
さらにその下の、「Tree: Render Indent Guides」を「always」にします。

これにより、ツリーの表示が見やすくなりました。

拡張機能

コード整形(Prettier)

コードの自動フォーマッタは必要でしょう。
言語に合わせた拡張機能を入れましょう。

「Shift + Alt + F」押下で整形が可能です。
初回時に、以下のように表示される場合があります。

‘JavaScript’ ファイルには複数のフォーマッタがあります。続行するには、既定のフォーマッタを選択します。

フォーマッタを選択します。

コードを書いている最中は、半角スペースとか細かい体裁は気にせず、最後に自動で整形すると、コーディングのスピードが上がりますね

また、拡張機能ごとの細かい設定も可能です。

indent-rainbow

インデントをカラフルに。
インデントが重要なPythonの開発に便利です。

こんな感じです(キャプチャはPHPですが)

言語やフレームワークの拡張機能

開発する言語や、フレームワークの拡張機能もインストールします。
(例えば、PHP+Laravelの開発なら、その拡張機能)

よく使うショートカット

個人的によく使うショートカットをまとめました。

Ctrl + P ファイル名検索
Ctrl + Tab タブの移動
Ctrl + F 文字列検索
Ctrl + Shift + F 全ファイル検索
Ctrl + H 文字列置換
Ctrl + Shift + H 全ファイル文字列置換
Shift + Alt + F ソースコードの整形(フォーマット)
F1 コマンド検索

便利な機能

エクスプローラのファイル名検索・絞り込み

この機能最初は気づかなかったのですが、ファイル名の検索・絞り込みです。
特にフレームワークを使用した開発の場合、ファイルが大量になると一覧が多くなり、目的のファイルを探すのが大変です。

使い方は簡単、エクスプローラ上でキーを入力するだけです。
(authと入力した結果)

また、アイコンをクリックするとそのファイル名のみ一覧に表示されます。

さいごに

VS Codeはそれほど細かい設定をしなくても使えるのですが、自分好みの設定にすると更に便利になりますね!
設定も色々できますし、拡張機能も豊富にありますので、とてもオススメです🙂

お気軽にフォローください!

シンプルで高機能なクリップボード履歴フリーソフト「Clibor」

シンプルで高機能なクリップボード履歴ソフトです。
Cliborはフリーソフトです。

普段よく文字を入力する方や、ブラウザに決まったキーワードを張り付ける方など、テキストの入力がとても便利になりますので是非ご利用ください!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)