テキストエディタ【Visual Studio Code】を使いやすくする５つの方法

テキストエディタ【Visual Studio Code】を使いやすくする5つの方法

【今回ご紹介する内容】

• 左サイドバーのファイルやフォルダ表示の段落の間隔を調整
• 左サイドバーのディレクトリ構造のガイドを表示
• 左サイドバーのファイル・フォルダ表示の並び替え
• コードの段落の調整（インデントの調整）
• テキストサイズの調整

左サイドバーの表示を見やすくしよう

Visual Studio Codeを使って、WordPressやフレームワークの開発をしようと思うと、左サイドバーが非常に見にくく、使いにくいと思います。これを自分なりに見やすくする方法をご紹介します。

上図左はデフォルトの状態で、右は設定変更後の様子。変更した点は以下の内容。

• 子ディレクトリの間隔をあける
• ディレクトリのガイドラインを表示する

まず左サイドバーの子ディレクトリの間隔をあけるには、 Tree: Indent の値を変更すればOK。

Visual Studio Code画面左上の設定（settings）を開いて、検索欄に tree と入力。そして設定画面を下にスクロールして、 Tree: Indent の項目を見つけます。

デフォルトは 8 なので今回は2倍の 16 にセット。お好みで 24 など適当な数字に変えてみてください。

そしてついでにディレクトリのガイドラインを制御する Workbench > Render Indent Guides の設定も always に変更。デフォルトでは、ディレクトリのガイドラインは、ファイルやフォルダをマウスホバーした時だけ表示ですが、私は常時表示の方が分かりやすいので always にしました。

次はファイルの並び順を ABC 順から”更新順”に変えてみます（上図参照）。

再び Visual Studio Codeの設定画面（settings）を開いて、検索欄に explorer.sortOrder と入力します。

すると Explorer: Sort Order の項目が表示されますので、その中から modified（更新順） を選択。 更新順以外には、種類別（Type）やファイル先頭順（FilesFirst）、とにかくアルファベット順（Mixed）があります。

はい、これで左サイドバーが最初に比べると見やすくなり、プログラミングもしやすくなったと思います。

コードの段落（インデント）を調整しよう

デフォルトの Visual Studio Codeは、HTMLでもPHPでもPythonでも改行すると４コマの空白ができると思います（上図左）。

Python は4つ空白が空いているのがセオリーなのでいいのですが、HTMLの場合は少し分かりにくくなってしまいます。今回は空白を４コマから２コマに変更する方法をご紹介いたします（上図右）。

改行時の空白の設定は、Visual Studio Code 画面下の Spaces: 4 をクリックし、下図のように”２”を選択。

これでプログラミング時の改行で発生する空白を、２コマに変更することができました。

画面の文字サイズを調整

Visual Studio Code起動時の文字サイズ、少し大きかったりしませんか？

文字サイズは「font size」と「zoom」の２方法で変更できますが、今回は”Zoom”で変更してみました。エディタ画面の文字だけでなく、タブや画面下の設定表示も小さくなっていることが確認できます。

タブなどの文字は小さめで、エディタの文字は大きめ、という場合はzoomを小さくして、 font size を 14 などに上げると使いやすくなると思います。

Visual Studio Code画面全体の文字サイズを小さくする場合は、設定（Settings）の Zoomを変更。エディタ文字のサイズのみを下げる場合は font size を変更。

まとめ

プログラミング学習はデフォルトの状態でもストレスがかかりやすいのに、テキストエディタで更にストレスがかかるとチョットしんどいですよね。

今回ご紹介したVisual Studio Codeの設定が、皆様のストレス軽減に役立てれば幸いです。

独学でのプログラミングの習得に限界を感じている方、プログラミングに興味はあるものの何も行動に移せていない方には、CodeCamp の無料体験をおすすめします！ 現役エンジニア講師のオンライン・マンツーマンレッスンであなたの可能性が広がりますよ。 せっかくの”やる気”が枯れてしまう前に、ほんの少し勇気を出してみませんか？