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



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

Visual Studio CodeはMicrosoftが開発したWindows、Linux、macOS用のソースコードエディタです。

便利な機能やプラグインが多く、初心者から上級者まで使っている人気のテキストエディタではあるものの、「ちょっと見にくいな」「分かりにくいな」と感じたことはありませんか?

今回は Visual Studio Code を自分なりに見やすくする方法を5つご紹介させて頂きます。

これでもっとプログラミングが楽しくなるでしょう!

目次
  1. テキストエディタ【Visual Studio Code】を使いやすくする5つの方法
  2. 左サイドバーの表示を見やすくしよう
  3. コードの段落(インデント)を調整しよう
  4. 画面の文字サイズを調整
  5. まとめ

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

【今回ご紹介する内容】

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

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

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

image

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

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

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

image

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

image

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

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


image

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

image

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

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

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

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

image

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

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

image

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

image

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

画面の文字サイズを調整

image

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

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

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

image

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

Webサイト担当者としてのスキルが身に付く

CodeCampの無料体験はこちら

まとめ

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

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

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

関連記事

オシママサラ
この記事を書いた人
オシママサラ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp