VSCodeを便利にするあれこれまとめていく

記事の目的

今後 VSCode をヘビーユーズしていきたい。
そのために便利なものがあればどんどんカスタマイズしていきたい。
そんでそれを備忘録として見返せるようにしておきたい。
（あとは誰かの役に立てばいいな。自分の同じような価値観の人に刺さるといいな。）

目次

• 記事の目的
• 目次
• 現在の開発ウインドウの保存
  • ワークスペースとは何か
  • ワークスペースの作り方と使い方
• フォント変更
  • フォントを美しくしよう
  • 参考サイト３選
  • 検討したフォントたち
• マークダウンファイルの目次を生成する
  • 採用したプラグイン
• VSCodeのUIをおしゃれにする
  • 例えばこんなUIになる
  • インデントをおしゃれにする
  • 行ハイライトをおしゃれにする
• ダークモード時のVSCodeのタブを見やすくする
• コーディングを便利にする
  • コードの自動整形
• スクロールをぬるぬるにする
• 今後どんどん追記予定（続く）

現在の開発ウインドウの保存

ワークスペースとは何か

ワークスペース化とは何か。簡単にいうと、「現在の開発ウインドウの保存」である。

例えば今この記事は、zenn-cli を使って VSCode で書いている。
こんな感じだ。

VSCode の左サイドバーにディレクトリを表示。
作業スペースの右側にはメモファイル。
作業スペースの左側には記事作成ファイル。
下段にはターミナル。

記事を書くときは、この状態にしてから記事を書きたい。効率がいいからね。
このウインドウの状態を保存しておいて、いつでもワンクリックもしくはダブルクリックでこの状態を再現することができる機能が「ワークスペース」である。

「記事執筆用」「Aアプリ開発用」「Bアプリ開発用」とそれぞれ別のワークスペースを作り保存しておくと、ダブルクリックですぐに開発環境が再現できて便利。

ワークスペースの作り方と使い方

vscode でウインドウを保存して次回再利用することはできませんか？

VSCode では、特定のウインドウのレイアウトを保存して後で再利用するという具体的な機能はありません。ただし、VSCode には"ワークスペース"という概念があります。ワークスペースを使うと、特定のプロジェクトやタスクに対応する一連のファイルや設定を保存して、後からすぐに再開することができます。

ワークスペースは、ファイルエクスプローラーのルートとして表示されるフォルダのセットで、これらのフォルダは VSCode の設定や拡張機能の設定を持つことができます。

ワークスペースを保存するには次の手順を実行します:

1. VSCode で File メニューを開きます。
2. "Save Workspace As..."を選択します。
3. ワークスペースの名前と保存場所を選択します。

それぞれのワークスペースは、.code-workspace ファイルとしてディスク上に保存されます。これをダブルクリックするか、VSCode で開くと、そのワークスペースが再度開きます。

ワークスペースはウインドウの位置やサイズを保存しませんが、ファイルとフォルダのレイアウト、開いたファイルやタブ、設定などを保存します。これは VSCode を閉じて再開するときや、別のマシンで作業を続けるときなどに便利です。

あとは Dock などにワークスペースのショートカットを置いて、その環境を再現したいときにクリックするだけでウインドウを再現できる。超便利。

フォント変更

フォントを美しくしよう

Windows の VSCode で、デフォルトフォントがあまりにひどい（特に日本語が）ので、フォントを変更する。(Mac の場合はフォントが美しいので気にならない。)

色々調べて、PlemolJP フォントを採用することにした。(後述の 7 つより選定)
日本語が美しい。（プログラミングコードも読みやすい）

ちなみにデフォルト：Consolas, 'Courier New', monospace

PlemolJP フォント

神は細部に宿るのである。
細かいところまで気を遣うからこそ、すべての質が少しずつ良くなるのである。

参考サイト３選

PlemolJP
https://pouhon.net/font-plemol/6599/

PlemolJP のダウンロード（公式 Github）
https://github.com/yuru7/PlemolJP

VSCode での設定
https://gocean.jp/vscode/font/

検討したフォントたち

• 源ノ等幅 (Source Han Code JP): Adobe と Google が共同開発した日本語の等幅フォントで、欧文部分は Source Code Pro をベースにしています。このフォントは日本語だけでなく、多言語に対応しています。

• M+ FONTS: M+ FONTS は、ラテン文字と日本語の視認性を高めるために設計されたフォントです。M+ 1m または M+ 2m がプログラミングに適しています。

• Ricty Diminished: Ricty Diminished は、ラテン文字には "Inconsolata"を、日本語には "Migu 1M"をそれぞれベースにしており、コーディングに適した美しい等幅フォントです。すでに開発がストップされています。

• HackGen: HackGen は、英文用フォントとして「Hack」を、日本語用フォントとして「源柔ゴシック」をベースにしたプログラミング向けの等幅フォントです。見やすさと読みやすさを両立したデザインが特徴です。

• UDEV Gothic (宇髄ゴシック): UDEV Gothic は、日本語の等幅フォントで、そのシンプルなデザインと視認性の高さから、特にプログラミングに適しています。ラテン文字の部分は Roboto Mono をベースにしているため、西洋の文字も綺麗に表示されます。

• Source Han Mono (源ノ等幅): Source Han Mono は、Adobe と Google が共同開発した等幅フォントで、Source Code Pro と源ノ角ゴシックを組み合わせたものです。日本語だけでなく、多言語に対応しており、その視認性の高さとデザインの美しさから多くの開発者に利用されています。

• 游ゴシック: 游ゴシックは、明瞭な表示が特徴のゴシック体フォントです。等幅フォントとしては利用できませんが、その清潔でモダンなデザインは、ウェブやプリントなど様々な場面で利用されています。ただし、一部のプログラミング環境やエディタでは等幅フォントが推奨されるため、ソースコードの編集には適していないかもしれません。

マークダウンファイルの目次を生成する

現在 VSCode で md ファイルを書き記事生成をしているが、目次を入れたい。
いろんな方法があるか、下記の要件を満たしたプラグインが意外と少なかったため、メモしておく。

1. 右クリックから目次生成ができる
   （Ctrl+Shift+P または Cmd+Shift+P で目次を作るのは面倒くさい）
2. 更新日が新しく、ちゃんと動く
3. 見出しに特殊記号「、」や「・」があっても正しく目次が生成される
   これ実現しているものでちゃんと動くものがなかった

採用したプラグイン

• Markdown TOC & Chapter Number（Takumi Ishii）
  https://marketplace.visualstudio.com/items?itemName=TakumiI.markdown-toc-num&ssr=false#review-details

その他比較したプラグイン

• Auto Markdown TOC（Hunter Tran）
• Markdown All in One
• Markdown TOC（Joffrey Kern）
• Auto Markdown TOC（Xavier Guarch）

VSCodeのUIをおしゃれにする

VSCode の UI をおしゃれしたい。UI がいいとやる気も出るってもん。

例えばこんなUIになる

インデントをおしゃれにする

インデントレインボー（indent-rainbow）プラグインを入れる

拡張機能検索から indent-rainbow を検索してインストールする

indent-rainbow 詳細はこちら
https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

設定を変更する

1. VSCode 設定画面へ行く
2. 設定画面右上の「設定(JOSN)を開く」から settings.json を開く
3. settings.json に indent-rainbow の設定を追加する

  "indentRainbow.colors": [ //インデントの色を設定
      "rgba(255,255,64,0.3)",
      "rgba(127,255,127,0.3)",
      "rgba(255,127,255,0.3)",
      "rgba(79,236,236,0.3)"
  ],
  "indentRainbow.indicatorStyle": "light", //インデントのタイプを設定（線に設定）
  "indentRainbow.lightIndicatorStyleLineWidth": 2 //線の太さの設定

色や太さは自由に設定すべし。

行ハイライトをおしゃれにする

vscode で選択された行の色がハイライトされますが、この色を変えたいです。どうしたらいいですか

settings.json に下記のような記述を追加して保存します。

    "workbench.colorCustomizations": {
        "editor.lineHighlightBackground": "#2D2C57"
    }

vscode が黒背景なので、それに合うカラーパレットをいくつか教えていただけませんか？

もちろんです！VSCode の黒背景に合うカラーパレットはたくさんあります。特にダークテーマの場合、鮮やかな色がよく映えるため、以下のような色の組み合わせがオススメです。

1. 青系: ダークモードでよく使われる色で、目にも優しく読みやすいです。

   • 行ハイライト: #1E1E1E

2. 緑系: コードに自然な感じを与えることができます。

   • 行ハイライト: #0D6338

3. 紫系: 落ち着いた感じのある色です。

   • 行ハイライト: #2D2C57

4. オレンジ系: 活気やエネルギーを感じさせる色です。

   • 行ハイライト: #3B2D1F

5. 灰色系: シンプルで洗練された印象を与えます。

   • 行ハイライト: #2C2C2C

お好みに応じて色を調整したり、他のカラーパレットを探してみるのも良いでしょう。

VSCode のテーマを変更して全体の配色を一新することも可能です。拡張機能のマーケットプレイスで、ダークテーマを検索すると、多くの選択肢が見つかると思います。

ダークモード時のVSCodeのタブを見やすくする

ダークモードにすると開いたタブの名前が暗くて見にくい。
よって見やすくタブ名の色を変更する。

先ほどの選択行のハイライトを変えたのと同じ場所、VSCodeの色設定部分を変更する。
下記ではタブの文字色を白にしている。

    "workbench.colorCustomizations": {
        "editor.lineHighlightBackground": "#2D2C57", //先ほどの説明した行ハイライトの色
        "tab.activeForeground": "#ffffff", // アクティブタブの文字色の変更
        "tab.inactiveForeground": "#ffffff" // 非アクティブタブの文字色の変更
    }

コーディングを便利にする

コードの自動整形

HTML ファイルを保存したときに、自動で整形してくれるプラグインはないですか？

はい、Visual Studio Code（VS Code）にはファイルを保存したときに自動でコードを整形する機能があります。また、それを補完するプラグインもいくつか存在します。以下に手順とオプションを説明します。

設定で自動整形を有効にする

1. VS Code の設定（settings.json）を開きます。これは、F1キーを押してコマンドパレットを開き、「Preferences: Open Settings (JSON)」と入力することで開けます。

2. この JSON ファイルに以下の行を追加して保存します。

   {
     "editor.formatOnSave": true
   }
   

これで、ファイルを保存するたびに自動的に整形されます。

Prettier プラグイン

Prettierは、多くのプログラミング言語に対応したコード整形ツールです。VS Code の拡張機能としても利用可能です。Prettier をインストール後、設定（settings.json）に以下を追加すれば、保存時に自動整形が行われます。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": true
}

初級者エンジニアとして、コードの可読性と整合性はとても重要です。自動整形ツールを使うことで、これらの側面を維持しつつ、より効率的にコーディングができるでしょう。

"editor.formatOnSave": trueは Python や Javascript なども整形してくれますか？

はい、"editor.formatOnSave": true の設定は Python、JavaScript を含む多くのプログラミング言語に対して保存時に自動整形を行います。ただし、特定の言語に対して整形を行うためには、その言語に対応した整形ツールや拡張機能がインストールされている必要があります。

例えば：

• JavaScript: VS Code はデフォルトで JavaScript の整形に対応していますが、より高度な設定を行いたい場合は Prettier などの拡張機能を使用できます。
• Python: Python の場合は、Python extension for Visual Studio Codeをインストールすることで、保存時にautopep8やblackなどの整形ツールを実行できます。

言語ごとに整形の設定をカスタマイズすることもできます。例えば、JavaScript だけ Prettier を使用し、Python ではblackを使用するといった設定が可能です。settings.json に以下のように記述することで、それぞれの言語で異なるフォーマッタを指定できます。

{
  "editor.formatOnSave": true,
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[python]": {
    "editor.defaultFormatter": "ms-python.python"
  }
}

Prettier は Python に対応していないのですか？

いいえ、Prettier は Python に対応していません。Prettier は主に JavaScript、TypeScript、HTML、CSS、JSON、GraphQL、Markdown などの言語に対応していますが、Python はその対象外です。

Python のコード整形には、一般的に以下のようなツールが使われます：

1. autopep8: PEP 8（Python Enhancement Proposals 8）に基づいてコードを整形します。
2. black: 高度にオピニオン化された（設定オプションが少ない）整形ツールで、コードを一貫したスタイルに自動整形します。
3. yapf (Yet Another Python Formatter): Google が開発した Python コードのフォーマッタで、多くの設定オプションがあります。

これらのツールは VS Code の Python 拡張機能と連携して動作する場合が多く、settings.jsonに設定を追加することで保存時に自動整形を行うように設定できます。

例えば、blackを使用する場合は以下のように設定します：

{
  "python.formatting.provider": "black",
  "editor.formatOnSave": true
}

こちらの設定があると、Python ファイルを保存した際にblackが自動的に実行されます。

Python におけるコード整形も非常に重要なスキルです。整形されたコードは後から読み返しやすく、他の人との協力もしやすいです。

Prettier で HTML、CSS、Javascript の整形を行いたい場合の setting.json の設定を教えてください。

Prettier で HTML、CSS、JavaScript の整形を行いたい場合、以下のような設定をsettings.jsonに追加できます。

まず、Prettier 拡張機能が VS Code にインストールされていることを確認してください。インストールされていなければ、VS Code の拡張機能マーケットプレースから Prettier をインストールしてください。

次に、VS Code のsettings.jsonファイルを開いて以下の設定を追加します。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": true
}

これで、HTML、CSS、JavaScript ファイルを保存すると、自動的に Prettier によって整形されます。

この設定は各言語に対して Prettier をデフォルトのフォーマッタとして設定し、ファイルを保存するたびに整形を行うように設定しています。

スクロールをぬるぬるにする

WindowsのVSCodeでは、マウスホイールでスクロールする場合、結構動きがカクカクする。
それよりもぬるぬる動いた方見やすいし、コードを見失うこともない。

1. VSCodeの設定画面を開く
2. 設定画面で「スムーズスクロール」または「smooth scrolling」と検索する
3. 見つけたら、このオプションを有効にする

これでスクロールがぬるぬるしてよい。

この設定を行うと、VSCodeの設定jsonに下記のように追加される。
"editor.smoothScrolling": true,

今後どんどん追記予定（続く）