【大阪 / 横浜 / 徳島】インフラ / サーバーサイドエンジニア募集中!

【大阪 / 横浜 / 徳島】インフラ / サーバーサイドエンジニア募集中!

【導入実績 500社以上】AWS 構築・運用保守・監視サービス

【導入実績 500社以上】AWS 構築・運用保守・監視サービス

【CentOS 後継】AlmaLinux OS サーバー構築・移行サービス

【CentOS 後継】AlmaLinux OS サーバー構築・移行サービス

【WordPress 専用】クラウドサーバー『ウェブスピード』

【WordPress 専用】クラウドサーバー『ウェブスピード』

【格安】Webサイト セキュリティ自動診断「クイックスキャナー」

【格安】Webサイト セキュリティ自動診断「クイックスキャナー」

【予約システム開発】EDISONE カスタマイズ開発サービス

【予約システム開発】EDISONE カスタマイズ開発サービス

【100URLの登録が0円】Webサイト監視サービス『Appmill』

【100URLの登録が0円】Webサイト監視サービス『Appmill』

【200ヶ国以上に対応】グローバル eSIM「ビヨンドSIM」

【200ヶ国以上に対応】グローバル eSIM「ビヨンドSIM」

【中国への旅行・出張・駐在なら】中国SIMサービス「チョコSIM」

【中国への旅行・出張・駐在なら】中国SIMサービス「チョコSIM」

【グローバル専用サービス】北米・中国でも、ビヨンドのMSP

【グローバル専用サービス】北米・中国でも、ビヨンドのMSP

【YouTube】ビヨンド公式チャンネル「びよまるチャンネル」

【YouTube】ビヨンド公式チャンネル「びよまるチャンネル」

Visual Studio Codeで有能な設定をオンにしてみる

こんにちは。
開発チームのワイルド担当、まんだいです。

Visual Studio Code(以下、VSCode)をメインのエディタで使いだして約一年。
開発スピードが速すぎて、ステキな機能がどんどん追加されていくのに、取り残されていく私……。

定期的に設定を見直し、知識を棚卸しするためにオススメ設定をまとめてみました。

 

エディタ周りの設定

まずは、心臓部のエディタ周りの設定を見てみます。
最近のホットなトピックスとしては、エディタの左側にミニマップが表示できるようになったことでしょうか。
「コードの流れを形でつかむ」という新しい発想に気付き、「今、脳みそが刺激されたぜ!」という瞬間を感じることができたのは記憶に新しいですね。

 

editor.minimap.renderCharacters

そのミニマップですが、よく見ると表示されている文字が読めなくもない状態で、実際のコードが極小のフォントで表示されるようになっています。
これをカラーブロックに置き換えることで、多少(体感で)動作が軽くなるように感じました。

超長いコードを書く場合はありがたいですね。

 

editor.minimap.showSlider

ミニマップ関連でもう一つ。
ミニマップにマウスカーソルを乗せると、いま表示されている部分がハイライトされるエフェクトが入りますが、これを常時ハイライトする設定がこれになります。

今どの辺りにいるのか、迷子になりにくいのでありがたいですね。

 

editor.autoIndent

コードをコピペしたり、「Alt + 矢印キー」で移動させたりしたした際、インデントを合わせるのが面倒な時、ありますよね。
複数行の移動なんかはまさにそれで、過信は禁物ですが、前後の文脈から移動した行が適したインデントに調整してくれる便利な機能です。

矢印 → Homeキー → Tabのセットを連打する必要がなくなるのでありがたいですね。

この度バージョン1.15系からデフォルトで有効になりました!ビバ!

 

editor.fontLigatures

合字を使うという設定ですが、そもそも合字に対応しているフォントをフォントファミリーに指定していないと意味がありません。

最近プログラミング界で有名な合字対応フォントは、Fira Codeかなと思って使ったりしているのですが、合字対応フォント自体は探せばたくさんありますが概ね有料。
作るのに時間も手間も掛かるからなのかなと勝手に思っているのですが、Fira Codeはオープンソースです。

こんな感じになります。

アロー演算子が一文字に見えたり、Markdownのヘッダ記号がくっついたり、より直感的に見える訳ですが、初学者向けではないのでご利用にはご注意を。
特に新しい言語を学ぼうとしている時は、無理解に繋がりかねません。

個人的には、Consolasの方が読みやすい気もしていますが、気に入ってはいます。

合字対応フォントで、プログラミングが少しでも楽しくなるのはありがたいですね。

 

ターミナル周り

開発をする上で、ターミナルが不要という局面はなかなか少ないので、VSCodeで「Ctrl + Shift + @」を押すことは多いと思います。
そんなターミナル周りの設定を紹介します。

 

terminal.integrated.shell.windows

そもそもよく使うターミナルってコマンドプロンプトじゃないよという人は多いと思いますので、ターミナルを変更する設定を紹介します。

ターミナル変更の反映には再起動が必要ですが、このオプションにターミナルの実行ファイルのパスを与えてやると、そのターミナルを利用するようになります。

試した限りでは

  • コマンドプロンプト
  • PowerShell
  • Git Bash
  • Bash on Ubuntu (on Windows)

は利用できるみたいで、Bash on Ubuntu辺りは、インフラに近いエンジニアだと重宝しそうでありがたいですね。

 

terminal.integrated.scrollback

このオプションは、ターミナルの行バッファの最大値を設定できます。

デフォルトでは1000行ですが、流れの早いログや大量に出力される場合は、この値を大きくしておくと見逃しが少なくなってありがたいですね。

 

ファイル周り

ここではファイルの保存に関する設定を紹介します。

 

files.eol

ファイルの改行コードを指定します。「\n」や「\r\n」といった感じで指定します。

改行コードは、開発環境やプロジェクトごとに変わる可能性があるので、「ユーザー設定」から「ワークスペースの設定」に切り替えて設定しておくと便利です。

小さなことですが大事なことなのでありがたいですね。

 

files.encoding

改行コードと並んで、環境によって変わるのが文字コード。
最近では、UTF-8がデフォルトになりつつあり、あまり意識しなくなりましたが、ちょっと古めかしいシステムだと、Shift-JISだったなんてこともよくあります。

たまにしか使わないですがありがたいですね。

 

全体的な設定(ワークベンチ)

最後にワークベンチと呼ばれる、VSCode全体の設定を見ていきます。

 

workbench.editor.enablePreview

時と場合によりけりなのですが、VSCodeのエディタにはプレビューモードという状態があり、エクスプローラーから開いた時点では、プレビューの状態です。

何も変更しないうちは、プレビューとして扱われますが、他のファイルを開いた場合、プレビューのエディタを再利用します。
つまり、プレビューとして開いていたファイルのところに新しく選択したファイルが開かれるわけです。

ソースコードを横に並べて見たいのに!!!とイライラした記憶がある方は、このオプションに「false」を入れてあげると、ストレスレスなコーディングが楽しめるんじゃないでしょうか。

Ctrlキーを押しながらファイルを選択することで、新しいグループにファイルを表示することもできますが、最大3グループしか表示できないのが残念でたまりません。

マウスドラッグで思うようにファイルを開くこともできますので、マウス操作を厭わなければ無理にオフにする必要もないですね。ありがたいですね。

 

まとめ

少し小技が効いた設定を集めてみたつもりでしたが、皆さんはいくつ知っていたでしょうか?
冒頭でも書きましたが、VSCodeの進化のスピードが速すぎて、この記事が役に立たなくなる日はすぐに来るかも知れません。
そうなったら寂しい反面、より便利になっているVSCodeを使いたいという気持ちもありますね。

 
以上です。

この記事がお役に立てば【 いいね 】のご協力をお願いいたします!
1
読み込み中...
1 票, 平均: 1.00 / 11
37,831
X facebook はてなブックマーク pocket
【2025.6.30 Amazon Linux 2 サポート終了】Amazon Linux サーバー移行ソリューション

【2025.6.30 Amazon Linux 2 サポート終了】Amazon Linux サーバー移行ソリューション

この記事をかいた人

About the author

萬代陽一

ソーシャルゲームのウェブ API などの開発がメイン業務ですが、ありがたいことにマーケティングなどいろんな仕事をさせてもらえています。
なおビヨンド内での私の肖像権は CC0 扱いになっています。