VSCode(ブイエスコード)設定のおすすめ・初期設定で開発効率を爆速化

VSCode(Visual Studio Code・ビジュアルスタジオコード)を初めてインストールした際に、使いやすくするためのおすすめ設定を解説します。

現役のITエンジニアも使っている初心者にもおすすめな設定です。

使い方から収益化までプロが教える
WordPressの教科書

「もう限界かもしれない…」
そんな思いで立ち止まっていませんか?

「収益が一向に増えず、事業を続ける意味に迷い始めている」
「クラウドソーシングや営業して稼げるか不安だ」
「収益化したいけれど、YouTubeや書籍では解決できなかった」
「WordPressでLP制作を頼まれるが、具体的な方法がわからない」
「広告を出稿したが、まったく成果が出なくて悩んでいる」
「仕事でグラフや資料制作を思うように作れない」
「独学の限界を感じ、でも何から学ぶべきかわからない」

これらの悩みを抱えているのは、
あなただけではありません。

多くのフリーランスや経営者が、
同じ壁にぶつかっています。

その壁を越えるための「本物の解決策」が、ここにあります。

私たちはこれまで、
数多くのフリーランスや経営者が収益化に成功するための
お手伝いをしてきました。

WordPressでホームページやブログを作るスキルだけでなく、
広告を最大限活用して集客し、
売上を上げるノウハウを惜しみなくお伝えします。

「成果が出る広告の作り方」
「売れるホームページを構築する秘訣」
「初心者でも成果を上げるための実践的なステップ」

これらを余すことなく提供するWordPressの教科書を、
今なら無料で受け取れます!

WordPressの教科書

\先着300名限定!特典付きで無料配布中/

今すぐ無料ダウンロードする

いまなら、先着300部限定で無料プレゼント付です。

今すぐ無料ダウンロードする

スクロールで文字列の拡大(mousewheel)

  • ファイル>ユーザー設定>設定>mousewheel

Mouse Wheel Zoomという項目が表示されるのでチェックする。

Ctrl押しながらスクロールすると文字が拡大・縮小できる様になる。

スペース・タブを表示(whitespace)

  • ファイル>ユーザー設定>設定>whitespace

Editor:Render Whitespaceを選択します。

  • none : 表示しない
  • boundary : 単語間の単一空白文字以外を表示する(おすすめ)
  • selection : 選択している間のみ空白文字を表示する
  • trailing : 末尾の空白文字のみ表示する
  • all : すべての空白文字を表示する

boundary がおすすめ。

タブをスペースに変更(insert spaces)

  • ファイル>ユーザー設定>設定>insert spaces

Editor:Insert Spacesのチェックボックスにチェックするとタブがスペースに変換されます。

タブサイズを設定(tabsize)

  • ファイル>ユーザー設定>設定>tabsize

Editor:Tab Sizeを「4」に設定するとPythonでラクになります。

おすすめは「4」です。

自動保存設定(Auto Save)

  • ファイル>ユーザー設定>設定>Auto Save

Files:Auto SaveとFiles:Auto Save Delayの 2 つを設定します。

Files:Auto Save

  • off : 自動保存しない
  • afterDelay : 別途指定したミリ秒経過後に自動保存
  • onFocusChange : エディタがフォーカスを失ったときに自動保存
  • onWindowChange : ウィンドウがフォーカスを失ったときに自動保存

onFocusChange がおすすめ設定。

Files:Auto Save Delay

Files:Auto Save Delayで設定された秒数後に自動保存が行われます。
デフォルトでは Files:Auto Save Delay の値は 1000 となっています。

  • 1000 = 1秒
  • 5000 = 5秒
  • 10000 = 10秒

フォルダ階層を自動でまとめない(Compact Folders)

  • ファイル>ユーザー設定>設定>Compact Folders

上記の画像例 static/bootstrap530 の様にフォルダがまとまってしまう場合がある。

これだと、わかりにく場合は

Compact Folders のチェックを外すと

この様にフォルダ階層になる。

ミニマップを非表示にする(minimap)

  • ファイル>ユーザー設定>設定>minimap

右はしの方にミニマップが表示され邪魔な時がある。

そのミニマップを非表示にする方法です。

minimapと検索して

Editor Minimap:Enabledのチェックを外します。

これだけで画面を広く使える様になります。

この記事を書いた人

よこやま良平

こんにちは!18年以上ITエンジニアとして活動してきた
よこやま良平です。

4歳~85歳まで、年間1,792人名以上の方に
パソコンやプログラミング講座を行ってきました。

また18冊以上の書籍を出版しており、連続で1位を獲得しました。
オンライン講座では200件以上のレビューを頂いており
評価は4.9/5.0と高評価を得ています。

その他これまでに3000以上のサービス・システム・サイトを作成。