VSCodeの設定と拡張機能

VSCodeの基本設定

VSCodeの基本設定を行います。

[ファイル]→[ユーザー設定]→[設定]。

ここで、基本設定を行います。

各項目を見ながら、使いやすいように設定してください。
私のお奨めは、以下になります。

自動保存、フォントは大きく、タブは少なめ。
ま、各自のお好みで設定しましょう。

設定とJSONファイル

ちなみにですが、上記の設定はJSONファイル に反映されています。

設定(JSON)を開いてみましょう。

今行った設定が、テキストで書かれています。

逆に言うと、先ほどのGUI画面でなくて、
このテキストにJSON形式で設定を書けば、設定は反映されます。

JSONファイルから設定の追加

JSONファイルから設定の追加を行います。

以下をコピーして、

            
"editor.formatOnPaste": true, //ペーストした時に自動フォーマット
"editor.formatOnSave": true, //保存した時に自動フォーマット
"editor.defaultFormatter": "esbenp.prettier-vscode", //フォーマットの指定
"editor.fontFamily": "RictyDiminished-Bold",
"editor.fontWeight": "bold",
          
          

settings.jsonファイルにペースト。

上記3行は、ペーストや保存時に、自動でソースを整形してくれます。
下記2行は、文字のフォントです。

このへんの設定は、検索で出てきますし、好みで設定しましょう。

VSCodeの拡張機能

VSCodeは、拡張機能が沢山あります。
前回、日本語の拡張機能をインストールしましたね。

ここでは、(html作るなら)必須のLive Serverをインストールします。

拡張ボタンをクリック。
入力窓にLive Serverを入れます。

Live Serverを選択して、[install]をクリック。

Live Serverの使い方は、次回みていきましょう。

このような感じで、他の拡張機能もインストールできます。

ちなみに、私は以下の拡張機能をインストールしています。

いずれもおススメです。よかったら真似して、インストールしましょう。