プログラミング 環境構築

VSCodeオススメ設定【エディター最適化】

悩む人
VSCodeのインストールはできたけど、もっと使いやすくできるの?オススメの設定があれば教えてほしい。

 

VSCodeはデフォルトの状態でも使用はできますが、更にプログラミングしやすいように最適化できます。

その上で、僕がオススメする設定を解説します。

 

想定環境

Window10

 

PHP実行可能ファイルエラー解消

この項目は、エラーが出た時にだけ実行してください。

VSCodeの初期利用時、phpコードを書いている時や、phpファイルを開いた時に、エディターが下記の警告をしてくる場合があります。

そのような時は、エディターにphp実行ファイルの読み込みをさせる必要があります。

 

原因は、エディター側がphpの記述エラーがあった場合の指摘(警告)が出来ないためです。

赤枠の「設定を開く」をクリックしてください。

 

以下、設定画面が表示されます。

「setting.jsonで編集」をクリックして開きます。

 

赤枠のphp.validate.executablePathの所が空白になっているのが確認できます。

その場所に、php実行ファイルのパスを設定します。

 

次は、Windowsのエクスプローラーを開き、phpフォルダに移動してください。

PATHの場所: C:/xampp/php

php実行ファイルの場所は各環境に依存します。自分の環境に合わせて移動してください。ここではxamppのデフォルトパスを想定しています。

 

php.exeファイルの場所を確認できたら、setting.jsonファイルにパスを記述します。

以下の様になりました。

“C:\\xampp\\php\\php.exe”

バックスラッシュを2個つけるのは、文字列を認識させるためのエスケープです。

Ctrl + s などで、setting.jsonファイルを保存して閉じてください。

 

以上で、php実行可能ファイルの警告は解消されます。

 

フォントサイズの変更

僕が中年になったからか、どうかはわかりませんが、初期設定の状態は、少しフォントサイズが小さいです。

気持ちフォントを大きくしたいと思います。

 

設定画面を開きます。

画面左下の「設定アイコン」から設定をクリックして画面を開いてください。

 

設定画面を開くと、各メニューが確認できます。

「テキストエディター」→「フォント」を選択し、「Font Size」がデフォルト14になっているのが確認できます。

 

好みに合わせて変更してください。

ここでは16にします。

2上げるだけでも、結構見やすくなるので、僕はいつも16に設定して使用しています。

個人の見やすさによるので、大きくしたり、小さくしたりして、調整してください。

 

Rictyフォントのインストールと設定

Rictyとは、プログラミング用に最適化されたフォントです。Linux系の人などにも愛用されています。

僕はRictyが昔から大好きです。メリットは他にあって、全角スペースも可視化してくれます

 

昔は、Rictyをインストールするのも、LinuxOS内で生成して、ごにょごにょする必要があったのですが、今は手軽にインストールできるので、オススメです。

 

以下が設定する場所です。

さっき設定したFontSizeのすぐ上です。

 

RictyDiminishedをダウンロードしてください。

Rictyフォントのダウンロード先

https://github.com/edihbrandon/RictyDiminished/blob/master/RictyDiminished-Regular.ttf

 

URLに移動したら、下記画面が表示されます。

赤枠の「Download」をクリックして、ダウンロードしてください。

 

ダウンロードが完了したら、WEBブラウザのフッターバーに表示されているファイルを選択し、「開く」をクリックしてください。

画面が開かれると、赤枠の「インストール」をクリックして、Windowsにフォントをインストールします。

 

インストール後、画面を閉じて、VSCodeの設定画面に戻ります。

 

以下の画面の様に「Ricty Diminished」と入力してください。

後、設定を確実に反映するために、VSCodeを一度、再起動してください。

 

もし、「フォントはデフォルトの方が見やすいな」となれば、すぐに戻せます。

設定画面に戻り、FontFamilyの文字にカーソルを合わせて、すぐ左に「設定アイコン」が表示されます。

そこから「設定をリセット」を選択すれば、デフォルト値に戻ります。

 

色々試してみてください。

 

スペースの可視化

スペースの可視化は、しておいて損はありません。

なぜなら、スペースの可視化をしておかなければ、プログラミング時にエラーの元になるからです。

 

構文エラーと表示され、構文を見直して「どこも間違ってないやんけ!」となっても、空白でエラーになっている場合があります

そういったケースを極力避けるためにも、空白の可視化はしておいた方が無難です。

 

まず、設定画面を開きます。

設定画面で上部の赤枠に「white」と打てば、「Render Whitespace」がヒットします。

 

以下がデフォルトの状態です。

 

Render Whitespace項目を「all」に変更します。

 

以下、可視化されるようになりました。

簡単に設定できるので、ぜひ、やっておくことをオススメします。

エラーが起きた時のストレス軽減につながりますので。

 

まとめ

本記事は、エディターの最適化にフォーカスして、解説しました。

他にもあります。例えば、

  • タブキーを打つことで、半角空白をいくつ入れるか
  • Rictyが合わなかった場合、全角スペースの可視化(機能拡張する)
  • HTML5のlang属性をデフォルトjaにする

色々とありますが、僕は今回、最低限の形で設定しておきながら、「繰り返し使用するなー」と感じると都度、設定するような形をとっています。

 

エディターは個人の好みによる所が大きいので、無理に合わせる必要はありません。

 

一度デフォルトで使用してみて、気になれば、設定してみるという形でも良いと思います。

じゃ、そーゆーことで!!

-プログラミング, 環境構築
-

© 2021 FuwaFuwaShoChan BLOG