ミスを減らすためのVisual Studio Codeの設定

# Visual Studio Codeでの生産性向上＆ミス削減設定

VScodeを使う際に、ミスを減らし、生産性を向上させるためのいくつかの設定方法を紹介します。これらの設定を行うことで、コードの可読性が向上し、コーディングスタイルを統一することができます。

## 1. 空白/Tab文字の可視化
空白やタブなどの不可視文字は、インデントのミスを見逃しやすい要素です。これらを可視化することで、インデントに関する問題を簡単に見つけ、修正することができます。特にPythonなどインデントがプログラムの構文に影響を与える言語では、誤ったインデントが致命的なエラーにつながる可能性があります。

### やり方
 1. VScodeのSettingを開く
　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512900/5c31108c-196c-4a90-b2e6-0c0344598540.png" width="60%">

 2. 検索ボックスにwhitespaceと入力:
 表示される「Editor: Render Whitespace」の設定項目を調整します。
![スクリーンショット 2025-05-24 14.08.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512900/774029b5-96e2-4837-8580-09f3313ba333.png)

 3. 項目を選択:
 デフォルトでは「selection」になっています。この設定は選択した範囲のみ空白/Tab文字が可視化されます。「all」に設定することで常に空白/Tab文字が可視化されます。

　selection(選択してない状態では見えない)
　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512900/cfae5184-8104-4b87-a0aa-b78fa881556e.png" width="70%">

　all(スペースは「・」、タブは右矢印で表示される)
　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512900/c190736c-af1b-4523-bb4f-7804a689a2cc.png" width="70%">

## 2. Tabの設定
プロジェクトごとやプログラミング言語ごとに適切なインデントサイズを設定することで、チームメンバー間でコードの一貫性を保ちます。不適切なインデントがあると、コードレビューや共同作業時に不便を生じさせるため、大事なポイントとなります。また、適切な設定はコードの読みやすさを大きく向上させ、作業効率も改善します。
[参考: インデントはタブ派？スペース派？—迷えるあなたに徹底解説！](https://saycon.co.jp/archives/neta/%E3%82%A4%E3%83%B3%E3%83%87%E3%83%B3%E3%83%88%E3%81%AF%E3%82%BF%E3%83%96%E6%B4%BE%EF%BC%9F%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9%E6%B4%BE%EF%BC%9F-%E8%BF%B7%E3%81%88%E3%82%8B%E3%81%82%E3%81%AA)

### 一般的なインデントガイドライン
- Python: スペース4つ
- JavaScript: スペース2つまたは4つ
- C/C++: スペース4つ
- Go: タブ
- Rust: スペース4つ

### やり方
 1. コマンドパレットを開く：Ctrl + Shift + P
 2. 「Preferences: Configure Language Specific Settings」
 3. 言語を選択
 ![スクリーンショット 2025-05-24 14.16.21.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512900/79d895b1-64d1-4c10-a20f-a028608c8ff9.png)

 4. Tab Sizeを変更
  ![スクリーンショット 2025-05-24 14.23.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512900/05018c5b-d2ea-4ad9-b9af-0d9c35b228b4.png)

 5. 必要に応じてInsert Spaceを設定
 ここにチェックを入れるとTabを入力した時に指定した個数分のスペースを挿入してくれます
 ![スクリーンショット 2025-05-24 14.27.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512900/10b9da3d-9962-4441-aa8a-b859d62fb8cd.png)


## 3. インデントの可視化
インデントガイドを色分けして視覚化することで、ネスト構造の深さを瞬時に把握できるようになります。過度に深いネストはコードの可読性を阻害し、バグの原因にもなり得ます。インデントレベルを意識することで、よりシンプルで直感的なコードを書く習慣が身に付きます。

### やり方
 1. VScodeのSettingを開く
　<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512900/5c31108c-196c-4a90-b2e6-0c0344598540.png" width="50%">

 2. 右上のOpen Setttings(JSON)をクリック
 ![スクリーンショット 2025-05-24 14.39.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512900/c220250c-3e55-4934-a902-3e995915b5f6.png)

 3. JSONファイルに以下の設定を追加
```
"workbench.colorCustomizations": {
    "editorIndentGuide.background1": "#008000",
    "editorIndentGuide.background2": "#FFFF00",
    "editorIndentGuide.background3": "#FFA500",
    "editorIndentGuide.background4": "#FF0000",
    "editorIndentGuide.activeBackground1": "#fff",
    "editorIndentGuide.activeBackground2": "#fff",
    "editorIndentGuide.activeBackground3": "#fff",
    "editorIndentGuide.activeBackground4": "#fff"
}
```
インデントごとに指定した順で色が付くようになります。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512900/31c434f1-59bc-4c1a-97ff-c5f1a857f88d.png" width="70%">

## 4. 全角数字の禁止設定 (Macの場合)
数字が全角になっていると、気づかれにくい上に予期しない結果を招くことがあります。たとえば、数値計算の際に全角数字が混入すると、不正確な計算結果を引き起こし、その根本原因の特定が難しくなります。この設定を行うことで、こうしたタイプの入力ミスを防ぎ、コードの信頼性と正確性を高めます。

### やり方
 1. システム設定を開く
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512900/2049f527-e506-4810-828e-c03c96d169ec.png" width="50%">

　2. キーボードタブ→テキスト入力→編集
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512900/ab9827ad-f40c-43a2-9a19-c905637f0266.png" width="70%">

　3. 日本語タブから「数字を全角入力」のチェックを外す
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2512900/b767bb47-c25a-4294-9274-541c8409e7ea.png" width="80%">

## まとめ
この記事では、コードの可読性やスタイルの一貫性を向上させるために、4つの設定をお勧めしました。
これらの設定を活用することで、普段のコーディング作業の際に不用意なミスを減らし、生産性を大幅に向上させることが可能です。ぜひ一度試してみてください！