WEB CREATE

WEB制作やプログラミングに関する情報発信とクリエイティブなアイデアを紡ぐ

VSCodeのおすすめ初期設定

VSCodeのおすすめ初期設定

VSCodeは、多くのプログラマーや開発者にとって重要な開発ツールとなっています。その使いやすさや拡張性の高さから、カスタマイズすることでより効率的な開発環境を構築することができます。この記事では、VSCodeのおすすめ初期設定について紹介します。これらの設定は、デフォルトの状態から始める方に特に役立つものです。

設定の開き方

  1. VSCodeを開きます。

  2. サイドバーの歯車アイコンをクリックします。

  3. 「設定」をクリックします。。

  4. 設定画面の検索バーで設定を変えたい項目を検索できます。

Ctrl + ,Windows)またはCmd + ,Mac)を押して、ショートカットキーで開くこともできます。

おすすめの設定

Auto Save

Auto Saveは、ファイルを自動的に保存する設定です。デフォルトでは手動保存となっているため、コードを書いた後に都度保存する必要があります。
しかし、Auto Saveを「afterDelay」にすることで、変更を自動的に保存することができます。これにより、手動で保存する手間が省け、作業効率が向上します。

Word Wrap

Word Wrapは、テキストを自動的に折り返す設定です。デフォルトでは、長い行が画面外にはみ出してしまうため、スクロールする必要があります。

はみ出してしまう

しかし、「Editor: Word Wrap」をon(有効)にすることで、行が画面内に収まるように自動的に折り返されます。これにより、コード全体を見渡しやすくなり、読みやすい表示が可能となります。

Editor: Word Wrap」をon

折り返される

プログラミング用フォントの導入

プログラミングの作業を行う際には、適切なフォントを使用することでコードの可読性を向上させることができます。Ricty Diminishedは、プログラミングに適した人気のあるフォントの一つです。

下記のような区別のしづらい文字の違いが分かりやすくなるのがRicty Diminishedのメリットの一つです。

デフォルト
Ricty Diminished

  1. Ricty Diminishedフォントをダウンロードします。 こちらからフォントファイルを入手できます。

  2. ダウンロードしたフォントファイルを展開します。

  3. Windowsの場合は、展開したフォントファイルを右クリックし、「インストール」を選択します。Macの場合は、フォントファイルをダブルクリックしてインストールします。

  4. VSCodeを開きます。

  5. Ctrl + ,Windows)またはCmd + ,Mac)を押して、設定画面を開きます。

  6. 設定画面の検索バーに「font」と入力します。

  7. 検索結果の「Editor: Font Family」を見つけてクリックします。

  8. フォント設定の値を以下のように変更します(既存の設定値に追加する場合は、カンマで区切って追加します)。

まとめ

以上です!😄

ここでは、Visual Studio Codeにおけるおすすめの初期設定をいくつか紹介しました。

以下は、紹介した拡張機能のまとめです。

  1. Auto Save: ファイルを自動的に保存する設定です。ファイル変更後に手動で保存する必要がなくなります。

  2. Word Wrap: テキストを自動的に折り返す設定です。長い行をスクロールする手間が省けます。

  3. プログラミングフォントの導入: Ricty Diminishedという可読性の高いプログラミング用のフォントを導入して、開発効率を上げることができます。

これらのおすすめ初期設定をVSCodeに適用することで、より使いやすい開発環境を構築することができます。ぜひ試してみてください!