自分的Visual Studio Code(VS Code)の必須設定7選

## 1. 区切り文字の設定変更
CSSクラス名や変数名をダブルクリックした際、ハイフン等がデフォルト設定では区切り文字として判定されます。それらの判定を変更する設定です。

**設定前**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3110694/5f0eaca9-e5fc-19b8-4272-f60bb9b4b461.jpeg" width="75%">

**設定後**
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3110694/f4cb0245-2ef4-6920-d1b7-3e8e75d9b449.jpeg" width="75%">

### 設定手順
1. Code → 基本設定(Preferences) → 設定(Settings)
2. 「設定の検索(Search settings)」欄に、```editor.wordSeparators``` と入力
3. 区切りとして扱ってほしくない文字を消す

![vsc-1-3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3110694/03122566-23dc-0180-7928-2f50f58a7756.jpeg)

**初期値**
```txt
`~!@#$%^&*()-=+[{]}\|;:'",.<>/?
```

**自分の設定**
初期値から```-$.@```を削除
```txt
`~!#%^&*()=+[{]}\|;:'",<>/?
```

## 2. HTMLブロックの一括選択設定
HTMLブロックの選択を楽にする為の設定です。

[Emmet公式の説明ページ](https://docs.emmet.io/actions/match-pair/)

選択したいHTMLタグにカーソルを合わせ、設定したキーを押すと、
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3110694/d1b7e862-aa58-b476-bffa-604c185b1c2e.jpeg" width="50%">
↓
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3110694/7889cd7a-0a41-01a7-2adf-3d690b431180.jpeg" width="50%">

### 設定手順
1. Code → 基本設定(Preferences) → キーボードショートカット(Keyboard Shortcuts)
2. 「入力してキーバインドを検索(Type to search in keybindings)」欄に、```editor.emmet.action.balanceOut```と入力
3. お好みのキーバインドを設定

※ 動作しない場合、「いつ」の設定を調整してみてください(自分は空欄)

![vsc-2-3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3110694/3de07130-9649-a70f-47e9-bdc22a93a237.jpeg)

### .html以外の拡張子で動かない場合(emmet.includeLanguages)
.html以外でも拡張子によってはデフォルトでEmmetが問題なく動くかもしれませんが、動かない場合は```emmet.includeLanguages```の設定を確認してみてください

**設定場所**
1. Code → 基本設定(Preferences) → 設定(Settings)
2. 「設定の検索(Search settings)」欄に、```emmet.includeLanguages``` と入力
3. 項目と値を入力する

**例**
![スクリーンショット 2025-02-06 190700.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3110694/075201cf-f78f-4a1a-b99a-3c17817e187c.png)


## 3. 編集中ファイルの場所を、Finder(macOS)又はエクスプローラー(Windows)で開く
VS Codeのエクスプローラー内ファイル移動で足りる場合は必要ないですが、Finder(エクスプローラー)で開きたい場面もあるので、キーボードショートカットを設定します。

### 設定手順
1. Code → 基本設定(Preferences) → キーボードショートカット(Keyboard Shortcuts)
2. 「入力してキーバインドを検索(Type to search in keybindings)」欄に、```revealFileInOS``` と入力
3. お好みのキーバインドを設定

※ 動作しない場合、「いつ」の設定を調整してみてください(自分は空欄)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3110694/2bc376ac-e509-2fe1-34d0-2f7e8413f302.jpeg">

## 4. フォルダまたはファイルを右クリックからVisual Studio Codeを開く(macOSのみの設定)
Windowsではデフォルトでこの機能があるのですが、macOSではできないです。個人的に不便だと感じるので設定しています。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3110694/105b869f-4cda-e3bd-099f-259a26e7155e.jpeg" width="50%">

### 設定手順
1. macOS搭載されているAutomatorアプリを開く
2. クイックアクションを選択
![vsc-4-3.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3110694/2302521b-74c4-3f94-c2c7-0686128b4876.jpeg)

3. 赤枠で囲った部分を同じする
![vsc-4-4.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3110694/843c9f10-5ace-a850-4d6c-417dad6f0549.jpeg)
**アクション (必須)**
→ ライブラリから「Finder項目を開く」を選び、「このアプリケーションで開く」部分にはVisual Studio Codeを設定<br>
**ワークフローが受け取る現在の項目 (必須)**
→ ファイルまたはフォルダ<br>
**検索対象 (必須)**
→ Finder<br>
**イメージ (任意)**
→ フォルダ／ファイルを右クリック → クイックアクションで表示される、メニュー名左のアイコンを設定できます。(アイコンが反映されない時は、システム再起動をしてみてください)

4. 保存する(設定画面上でCommand + S、また、保存時の名前がメニュー名になるので注意)

### 設定ファイルの保存場所
上記手順で作成したファイルは下記に保存されているので、消したい場合は下記を開き、該当のファイルを削除してください。こちらのフォルダは隠しフォルダです。表示されていない場合、Shift + Command + .で表示できます。

```txt
/Users/ユーザー名/Library/Services 
```

## 5. 左サイドバーファイルツリーの固定スクロールを止める
[2024年1月に追加された機能](https://code.visualstudio.com/updates/v1_86#_sticky-scroll-in-tree-views)なのですが、個人的に好きではないので止めます。

### 設定手順
1. Code → 基本設定(Preferences) → 設定(Settings)
2. 「設定の検索(Search settings)」欄に、```workbench.tree.enableStickyScroll``` と入力
3. チェックを外す

![スクリーンショット 2025-02-06 190546.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3110694/357fd1dd-faab-4738-73a2-6fc6f6deb6a1.png)

## 6. スクロール中にエディターの上部に入れ子になった現在のスコープを表示させない

### 設定手順
1. Code → 基本設定(Preferences) → 設定(Settings)
2. 「設定の検索(Search settings)」欄に、```editor.stickyScroll.enabled``` と入力
3. チェックを外す

![スクリーンショット 2025-02-06 185757.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3110694/23ce9db5-e95e-9aff-fbed-01f5a95bf77e.png)

## 7. ピン止めしたタブを個別の行で表示する

### 設定手順
1. Code → 基本設定(Preferences) → 設定(Settings)
2. 「設定の検索(Search settings)」欄に、```editor.pinnedTabsOnSeparateRow``` と入力
3. チェックを入れる

![スクリーンショット 2025-02-06 190058.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3110694/fc59e98b-4cdd-906d-ccca-1f55a357acbb.png)

![スクリーンショット 2025-02-06 185942.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3110694/4af3164d-04ed-2544-f99e-f8e03d3e54b7.png)