IT技術の痒い所に手が届く

詳細

×閉じる

VSCodeの設定と拡張機能

Visual Studio Codeを便利に使うために

VSCodeは、拡張機能が豊富です。
そのうちの一つ 日本語の拡張機能を、前回インストールしましたね

ここでは、より便利にVSCodeを使うために、
基本設定と(お奨めの)拡張機能をみていきます。

VSCodeの基本設定

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

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

VSCodeの設定

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

Macだと、[Code]→[基本設定]→[設定]になります。

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

VSCodeのよく使用する設定

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

設定とJSONファイル

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

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

VSCodeのJSON

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

VSCodeのsettings.json

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

JSONとは、キー:値がワンセットになったファイル形式です。

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

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

以下をコピーして、

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

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

VSCodeのインストール先から起動

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

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

VSCodeの拡張機能

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

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

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

VSCodeのLiveServer張機能を抽出

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

VSCodeのLiveServer拡張機能インストール

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

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

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

VSCodeの拡張機能インストール済み

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

VSCodeのGit拡張機能

特にね、Gitでファイル管理する方は、
Git Historyは、お奨めです。

上記の手順で、Git Historyをインストールしましょう。

VSCodeのGitHistory張機能を抽出

拡張機能の詳細は、各自、説明文を読みましょう。
(ま、読まなくても、大して問題ありませんが)

Copyright(c) 2005-2021 SearchMan Sato . All Rights Reserved.