3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

自分好みのVSCodeを育てる

Last updated at Posted at 2025-12-12

はじめに

  • 会社で開発用の環境をもらったので、VSCodeのセットアップを久々にやっていました
  • VSCodeなどのエディタをよく使う方は自分なりの設定を見つけて、エディタを育てるということをよくやっていると思いますが、今回は私のVSCodeの育て方について書いていきます
    • 今回書くのは見た目部分の話だけです

日本語化する

  • 英語の勉強はしようと思っているもののそれはそうとして、まずはこれをしないと操作するのにストレス
  • ということで日本語化します

手順

  1. Japanese Language Pack for Visual Studio Codeの拡張機能を入れて、VSCodeを再起動
  2. 再起動すれば日本語になっていると思いますが、たまにならないこともあります。その場合は以下手順を実施
    1. Ctrl+Shift+Pを押してコマンドパレットを開く
    2. Configure Display Languageを検索して選択
    3. 日本語を選択

フォントを入れる

  • 昔はRicty Diminished一択だよねという風潮がありましたが、どうやら今は別のものが推奨らしい

Ricty および Ricty Diminished は、2010 年代前半には欧文・和文合成プログラミング用フォントとして先駆的でしたが、現在は前時代的な存在となっています。不具合もいくつか確認されています。良質なプログラミング用フォントが数多く登場していますので、それらの利用をおすすめします。

  • 正直、開発用にはデフォルトフォントかRicty Diminished以外のフォントを使ったことがないのですが、これを機にPlemolJPを使ってみます

手順

  1. PlemolJPからPlemolJP_xxx.zipをダウンロード
  2. readmeのサンプル画像を参考に、好きなものをインストール(自分はPlemolJP-Regularを入れました)
  3. VSCodeの ファイル > ユーザ設定 > 設定を開く
  4. 検索窓にEditor: Font Familyを入力して検索
  5. Editor: Font Familyと書かれている部分の先頭にPlemolJPをコンマ区切りで追加(PlemolJP-Regular以外のフォントを入れた人はそのフォント名に合わせる)
  6. 基本的に即時反映だと思うので、ターミナルやエディタなどで「0」を打ってみてください。〇に・が入ったような特徴的な形をしていれば反映されています。反映されない場合、ターミナルのフォントを個別で設定していないか確かめてください
    image.png

ターミナルをbashにする

  • bashの方がどのブランチにいるか分かりやすく、個人的に好きなので設定を変えます

手順

  1. (前提)gitが入っていること
  2. VSCodeの ファイル > ユーザ設定 > 設定を開く
  3. Terminal › Integrated › Default Profile: Windowsを検索窓に打ち込み、設定をnull(既定値)からBashにする
  4. Windowsの場合、Git bashだと文字化けするのでvscodeのターミナルのGit Bashの表示をUTF-8にしたいときの記事を参考にUTF-8に対応させる

Ctrl+マウスホイールくるくるで拡大・縮小ができるようにする

  • 仕事上、VSCode画面を共有することが多く、相手の見やすさのためにサッと拡大したいときがちょこちょこあります
  • そのため、コードの編集部分だけCtrl+マウスホイールくるくるで拡大・縮小できるような設定を入れていきます(上のメニューバーや、左のエクスプローラー部分は拡大・縮小されません)

手順

  1. VSCodeの ファイル > ユーザ設定 > 設定を開く
  2. Editor: Mouse Wheel Zoomを検索窓に打ち込み、チェックしてONにする

テーマを変える

  • テーマについては完全に好みです
  • 私が好きなのはこのあたりです

手順

  1. (前提)好きなテーマを選んで拡張機能を入れている状態
  2. Ctrl+shift+Pを押してコマンドパレットを開き、基本設定:配色テーマを選ぶ
  3. 入れたテーマに変更

アイコンを変える

  • ここ辺りはやるもやらないも好みですが、私は何となくカスタマイズした感が好きでやってます
  • 私が使っているアイコンはこれです。完全に色合いだけで選んでいるので、正直入れると何のアイコンか見にくくなります。機能性より可愛さ重視です

手順

  1. Catppuccin Icons for VSCodeを入れる
  2. いくつかアイコンテーマの種類があり、選べる画面になるのでお好みのものを選ぶ

最後に

  • 私は色んな方が「自分はこういう風にエディタを育ててるんだ!」と聞くのが好きです。そこには何となく職人魂に似たものを感じます
  • なので、今回は私のVSCodeの育て方を書きました
  • どなたかのエディタ育成の一助になりましたら幸いです
3
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?