概要

学習・開発する際にVisual Studio Cordを使ってコードを書いているのですが、
学習を進めるうちに、不便だな..と思うことが色々と出てきました。
今回の記事では不便だと感じている部分と、それを解消するための拡張機能を3つ共有したいと思います。

1. ターミナルの文字が小さい！

まず初めに、VSCode内でターミナルを起動できるのはご存知でしょうか。
contol(または ctrl)　+　`(バッククオート）で起動することができます。
これはMacユーザーでUSキーボードをお使いの方の起動方法みたいです。
※JISキーボードでは control(または ctrl)　+　shift⇧　+　`

さて、起動してみたのはいいですが文字が小さくてこれが結構ストレスだったりします。

そんな時は..
"terminal.integrated.letterSpacing" と "terminal.integrated.fontSize"
この2つをsettings.jsonに追記することで、ターミナルの文字間隔・フォントサイズをカスタマイズすることができます。

では次にsettings.jsonの開き方ですが、VSCodeの設定に移動します。
設定への移動はcommand (または cmd) ⌘　+　,(カンマ)です。⇩画面になります。
settings.json で編集が見つからない場合は左側最下段　> 拡張機能　をクリックしてみてください。

settings.json で編集をクリックすると編集画面が開きます。

settings.json

{
    "diffEditor.ignoreTrimWhitespace": true,
    "workbench.startupEditor": "newUntitledFile",
    "workbench.iconTheme": "material-icon-theme",
    "workbench.editor.enablePreview": false,
    "window.zoomLevel": 0,
    "editor.minimap.enabled": false,
    "editor.fontSize": 16,
    "editor.tabSize": 2,
    "editor.wordWrap": "on",
    "editor.quickSuggestions": true,
    "editor.lineHeight": 22,
    "editor.renderIndentGuides": true,
    "editor.renderLineHighlight": "all",
    "terminal.integrated.letterSpacing": 1,
    "terminal.integrated.fontSize": 14,

}

自分は既にいくつか便利なものを追記しております。
下から2つが"terminal.integrated.letterSpacing" と "terminal.integrated.fontSize" です。
: の後に数値を入力して保存すると反映されます。最後に,(カンマ)を忘れずにつけてください。

これでターミナルの文字小さい問題は解決です！

2. エディターの文字が詰まりすぎ！

デフォルトでは文字が小さかったり行の高さが詰まっていたりで、長時間画面をみていると目が疲れます..
そこでエディターのフォントサイズと行の高さをカスタマイズできるのが
"editor.fontSize" と "editor.lineHeight" です。

これらも先ほど同様にsettings.jsonに追記することでカスタマイズできます。

はい解決！

3. ファイルが多すぎて見つけにくい！

今回の記事で一番言いたかったのはこれです！

ディレクトリがどんどん増えてきて、目的のファイルにたどり着くのに一苦労..
そんな方に是非とも追加していただきたい拡張機能が
"workbench.iconTheme": "material-icon-theme"

⇩これが..

⇩こうなります。

この部分だけではありがたみを感じられないかもしれませんが、実際に導入してみると感動します。
こちらもsettings.jsonに追記することでカスタマイズできます。

まとめ

今回は全部で5つ共有させていただきました。視認性を高めることって大事ですね。
また便利な機能を見つけられましたら記事にしてみたいと思います。ありがとうございました。
ご指摘等ございましたらご教示いただけると幸いです。

Visual Studio Codeの拡張機能

概要

目次