Visual Studio Code（VSCode）の設定をしてみた

# 0. はじめに
## VS codeのインストール

https://code.visualstudio.com/download

# 1. 基本設定
## VSCodeの日本語化
初期設定は英語のため、日本語にするために以下の設定行う

- サイドバーの上から５つ目のアイコン（Extensions）をクリックし、「Japanese」と入力
![スクリーンショット 2023-04-09 午前11.48.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2674841/88e83c82-87c7-b852-48b2-ea3cfd25ac46.png)

- 一番上の「Japanese Language Pack for Visual Studio Code」を選択し、「Install」をクリック
⚠️画像ではインストール済みのため、「アンインストール」と表示されている
![スクリーンショット 2023-04-09 午前11.52.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2674841/1fb8c4c2-539a-a3bc-ec15-9290a936f36b.png)

- 右下に現れる「Restart Now」をクリック

- VS Codeが再起動され、日本語化される


## ターミナルからVS Codeを開く
以下の作業を行うと、ターミナルからVS Codeを簡単に開くことができる

- コマンドパレット（command shift p）を起動し、`shell`と入力
![スクリーンショット 2023-04-09 午後4.00.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2674841/aa1f6c0a-fb32-3260-8117-4130abceb44e.png)

- 「シェルコマンド: PATH内に 'code' コマンドをインストールします」を選択

- 動作確認するため、一旦VS Codeを閉じる
- ターミナルから起動してみる ⚠️`.（ピリオド）`はカレントディレクトリの意味
```:ターミナル　
code .
```
- VS Codeが起動すればOK

## ダークモードに変更
- コマンドパレット（command shift p）を起動し、`dark`と入力
- `基本設定：ライトテーマとダークテーマの切り替え`を選択

![スクリーンショット 2023-04-16 午後6.55.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2674841/f9bc9bbd-c31a-b998-9bfe-b7057075c0a1.png)

## 各種色を変更
- 設定画面を開き（`command`+`,`）、`workbench.colorCustomizations`と入力
- `Edit in settings.json`を選択
![Screenshot 2023-05-17 at 19.33.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2674841/8e1c6bce-0606-6b32-693f-a18972a40af3.png)

- `workbench.colorCustomizations`に以下を追加

```
"workbench.colorCustomizations": {
    "tab.activeBackground": "#666666cc",
    "editor.selectionBackground": "#8213be",
    "editor.selectionHighlightBackground": "#0115cd",
    "editor.findMatchHighlightBackground": "#4d5fb0",
    "editor.findMatchBackground": "#7402a9",
    // "editor.findMatchBorder": "#ffffff",
  },
```

- tab.activeBackground タブ
- editor.selectionBackground　選択中のテキスト
- editor.selectionHighlightBackground　選択中のテキストと同じ文字列
- editor.findMatchHighlightBackground　検索にヒットした文字列
- editor.findMatchBorder　検索にヒットした文字列群のうち，現在フォーカスしているものの枠線
- editor.findMatchBackground　検索にヒットした文字列群のうち，現在フォーカスしているもの

コメントアウトの文字色は以下を追加

```
"editor.tokenColorCustomizations": {
  "comments": "#dda0dd"
}
```

## HTMLタグ補完
HTMLタグの補完のため、以下のようにemmetを導入する。
- 設定画面を開き（`command`+`,`）、`emmet`と入力
- 「Emmet:Trigger Expansion on Tab」にチェックを入れる
![スクリーンショット 2023-04-11 8.41.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2674841/c8a3d50d-a035-fa9f-35a2-24497663a473.png)

- 設定画面を開き（`ctrl`+`,`）、`edit in settings`と入力
- `settings.jsonで編集`をクリック
![スクリーンショット 2023-04-11 8.48.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2674841/5ed66eb9-dbac-cc4c-240b-c4cf6b97ac83.png)

- 開いたファイルに以下を追記
```:settings.json
"emmet.includeLanguages": {
        "erb": "html"
    }
```
## 表示設定
画面に不要な項目を非表示にする
- 画面上部のView > Appearance > Status Barなど（各自お好み）

![Screenshot 2023-05-12 at 11.32.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2674841/d79fd04f-494f-0363-27c3-e6eab1e57b14.png)

## ターミナルの設定
ターミナルを左側に表示する

- ターミナルの部分で右クリックでメニューを開き、パネルの位置を「左」に設定。
![スクリーンショット 2024-01-03 10.08.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2674841/21c2d7ac-7ee1-59bf-a98a-a131457bae6d.png)

## 自動保存
保存時とペースト時に自動でフォーマットする設定

以下を`settings.json`に追加
```:settings.json
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
```

# 2. ショートカットキー
以下の作業を行うと、VS Codeでやり直しができる

- コマンドパレット（command shift p）を起動し、`keyboard shortcut`と入力
![スクリーンショット 2023-05-05 午後5.46.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2674841/7b1577ca-a722-08e4-0592-dd33d6b9d497.png)


- 「基本設定：キーボードショートカットを開く」を選択し、上部の検索バーに変更したい項目を入力

![スクリーンショット 2023-05-05 午後5.46.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2674841/11ea4de8-38f9-13f2-da7b-0aeb28da7fba.png)

- 今回設定した内容は以下

| 項目             | 設定値                 |
| ---------------- | -------------------- | 
|redo|⌘ Y|
|view open next editor|⌘ ↓|
|View:open previous editor|⌘ ↑|
|View: show explorer|⌘ E|
|View: Show source control|⌘ G|
|置換|⌘ H|
|エディターでシンボルに移動|⌘ U|
|File: Copy Relative Path of Active File|⌘ R|
|Terminal: Create New Terminal in Editor Area|⌘ T|
|Terminal: Focus Next Terminal Group|⌘ ↓|
|Terminal: Focus Previous Terminal Group|⌘ ↑|
|Terminal: Kill the Active Terminal Instance|⌘ w|
|View: Toggle Maximized Panel|⌘ M|
|View: Split Editor|⌃ S|
|View: Git Graph (git log)|⌘ L|
|View: Move Editor Left|⌘ ,|
|View: Move Editor Right|⌘ .|
|View: Pin Editor|⌃ P|
|View: Unpin Editor|⌃ P|
|表示：ターミナルの切り替え|⌘ ;|
|workbench.action.openSettings|⇧ ⌘ ,|
|workbench.action.openEditorAtIndex1|⌘ ]|
|workbench.action.terminal.focusPrevious| ⌘ ⇧|
|workbench.action.terminal.focusNext|⌘ ↓|

(参考)
設定済みのショートカットで一般的ではないが、よく使うもの
| 項目             | 設定値                 |
| ---------------- | -------------------- | 
|ターミナルの表示/非表示|⌘ J|
|サイドバーの表示/非表示|⌘ B|
|インデントでの折りたたみ|⌥ ⌘ [|
|現在のフォルダのファイル一覧表示|⌘ ⇧ .|


# 3. 各種設定
- 設定画面を開き（`⌘`+`,`)、以下の内容を設定していく

![Screenshot 2023-05-13 at 20.55.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2674841/bb5729a5-5ffc-5262-afb3-f7f3d2e593c4.png)


| 項目             | 設定値                 |　内容                 |
| ---------------- | -------------------- | -------------------- |
|editor.autoIndent |full|コピーした行を貼り付けるときにインデントを保持|
|editor.font size |11|フォントサイズ|
|editor.rulers	| [120]	| 垂直ルーラーを120文字ラインに設定 |
|editor.minimap.showSlider	| “always”	| ミニマップのスライダー を 常に表示 |
|editor.cursorBlinking	| “smooth”	| カーソル・アニメーション を スムーズに |
|editor.cursorSmoothCaretAnimation|on|カーソルの移動をアニメーション|
|editor.cursorStyle|block|カーソルをブロックで表示|
|editor.renderWhitespace	| “boundary”	| 空白文字を単語間の単一スペース以外表示 |
|editor.copyWithSyntaxHighlighting|off|テキストコピー時に書式設定を含めない|
|editor.formatOnType|on|フォーマットを自動化(値入力時)|
|editor.formatOnPaste|on|フォーマットを自動化(値貼り付け時)|
|editor.GlyphMargin|行番号の横の領域を非表示|
|editor.LetterSpacing|-1.8|フォントの横幅を狭くする|
|editor.LineHeight|1.2|フォントの縦幅を狭くする|
|editor.Folding|チェックしない|行番号右側の↓を非表示|
|editor.fontFamily|Menlo, Monaco, monospace|フォント変更|
|editor.scrollbar.vertical|hidden|縦スクロールバーを非表示|
|editor.scrollbar.horizontal|hidden|横スクロールバーを非表示|
|Editor: Suggest Font Size|12|候補用語のフォントサイズ|
|editor:suggest Line Height|12|候補用語のフォント高さ|
|explorer.compactFolders|false|アイコンのコンパクト表示しない|
|files.autoGuessEncoding	| true	| ファイルを開くときに文字セット エンコードを推測 |
|files.eol	| “\n”	| 既定の改行文字を LF に設定 |
|files.trimTrailingWhitespace	| true	| ファイルの保存時に末尾の空白をトリミング |
|files.insertFinalNewline	| true	| ファイルの保存時に最新の行を末尾に挿入 |
|files.trimFinalNewlines|on|ファイル保存時に最終行以降の空行を自動削除|
|terminal.integrated.scrollback	| 200000	| ターミナルの最大行数 |
|terminal.integrated.confirmOnExit|never|終了時にアクティブなターミナルセッションを確認しない|
|terminal.integrated.copyOnSelection|on|ターミナルで選択したテキストをクリップボードに自動コピー|
|terminal.integrated.defaultLocation|editor|ターミナルをediterで開く|
|terminal.integrated.letterSpacing|-1.3|エディタフォントの横幅を狭くする|
|title bar style|native|タイトルバーを非表示|
|tabsize|2|インデント幅の変更|
|auto Save|OnFocusChange|ファイルの自動保存|
|debug.inlineValues|on|デバックの有効化|
|workbench.editor.tabSizing|shrink|複数のタブを開いている場合にタブが縮小表示|
|workbench.editor.Pinned Tab Sizing|compact|ピン留めしているタブのサイズを縮小|
|Workbench.editor.Open Positioning|last|新しいタブを一番右側で開く|
|extensions.ignoreRecommendations|off|拡張機能の推奨をしない|
|window.Zoom Level|-1|VScode全体のフォントサイズ|
|breadcrumbs.enabled|false|ぱんくずリスト表示|

参考記事

https://azriton.github.io/2017/08/26/Visual-Studio-Code%E6%9C%80%E5%88%9D%E3%81%AE%E8%A8%AD%E5%AE%9A%E5%A4%89%E6%9B%B4/

https://www.cview.co.jp/cvcblog/2021.04.20.dYMmFSxAihNBwoEkCys_X

https://www.kurusugawa.jp/20210512-vscode-wide-area/


# 4. 拡張機能
## HTML
### HTMLHint
HTML構文チェッカー

https://marketplace.visualstudio.com/items?itemName=mkaufman.HTMLHint

### Auto Complete Tag
Auto Rename Tag と Auto Close Tag のセット
(Auto Rename Tag) 開始タグを変更すると終了タグも編集
(Auto Close Tag) 閉じタグの補完

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-complete-tag

### open in browser
HTMLファイルを開いているとき、option(⌥) + B でそのファイルをブラウザで開ける

https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser

### Live Server
HTMLファイルを開いているとき、下にあるステータスバーの「Go Live」をクリックすると、ブラウザでそのファイルを開く。また、ファイル更新時に自動反映される。

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

## CSS
### HTML CSS Support
CSS側で作ったクラス名の補完

https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css

### CSS Peek
CSS の class の定義元へジャンプ
(class 上で F12 もしくは command キーを押しながら class をクリック)

https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

### Live Sass Compiler
下にあるステータスバーの「Watch Sass」をクリックすると、Sassファイルを保存した際に自動的にCSSファイルが作成・更新される

https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass

## JavaScript
### ESLint
リンター（構文チェックツール）

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

ESLintで保存時に自動修正したい場合は、`settings.json`に次を追加

```:settings.json
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
```

## Vue.js
### Vue Language Features (Volar)
Veturに変わるVueの推奨プラグイン

https://marketplace.visualstudio.com/items?itemName=Vue.volar

### Vue peek
定義元にジャンプできる

https://marketplace.visualstudio.com/items?itemName=dariofuzinato.vue-peek

## Git
### GitLens
コミット履歴・ブランチ間の差分などを確認できる

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

以下の機能が追加される
![スクリーンショット 2023-04-23 午前8.36.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2674841/fb103839-a6fa-77f2-a80f-482eed7b479e.png)

COMMITSでは git commit の履歴を確認できて、ファイルをクリックすると、差分確認できる
![スクリーンショット 2023-04-23 午前8.36.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2674841/4021dd74-01d8-a078-48ea-568fe711429e.png)

ソースコード内でコミット履歴が表示される
![スクリーンショット 2023-04-23 午前8.09.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2674841/62d4ecf3-7fec-4133-df10-513675ef214c.png)

### ~~GitHub Pull Requests and Issues~~ 現在は利用していない
- VSCodeでGitHubのプルリクやコメントを編集・送信できる

https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github

以下のメニューが追加される
![スクリーンショット 2023-04-23 午前9.41.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2674841/6389d6d2-7351-ad98-ed91-56869cd62dc0.png)

### Git Graph
コミット履歴を元にブランチが視覚的にわかりやすくなる

https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph

![スクリーンショット 2023-05-02 8.03.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2674841/3f1d0a75-f987-19e0-7389-507012a94878.png)


## Ruby, Ruby on Rails
**事前に Ruby on Rails の環境構築が必要**

### ~~Ruby~~ ※サポート対象外

https://marketplace.visualstudio.com/items?itemName=rebornix.Ruby

設定
- .rb ファイルのフォーマッタでrufoを利用。
- 拡張機能`ruby`を導入後に、以下の設定で`rufo`を導入

```:ターミナル
gem install rufo
```

- settings.json に次を追加
```:settings.json
  "ruby.intellisense": "rubyLocate",
  "ruby.useLanguageServer": true,
  "ruby.lint": {
    "rufo": true
  },
  "ruby.format": "rufo",
```

定義元にジャンプする記事は以下

https://tanarizm.com/vs-code-rails-def

### ruby-rubocop

https://marketplace.visualstudio.com/items?itemName=misogi.ruby-rubocop

### Rails Routes

https://marketplace.visualstudio.com/items?itemName=aki77.rails-routes

erbのhelper_pathにcommandを押しながらクリックすると、contorllerのactionに遷移

### VSCode Ruby
シンタックスハイライト

https://marketplace.visualstudio.com/items?itemName=wingrunr21.vscode-ruby

### Rails

https://marketplace.visualstudio.com/items?itemName=bung87.rails

### ERB Formatter/Beautify

https://marketplace.visualstudio.com/items?itemName=aliariff.vscode-erb-beautify

「ホームディレクトリ」で，次をターミナルから実行

```:ターミナル　
gem install htmlbeautifier
```

### Ruby Solargraph
コントローラで定義したメソッドを一覧で確認できる

https://marketplace.visualstudio.com/items?itemName=castwide.solargraph

![スクリーンショット 2023-04-23 午前8.23.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2674841/a4710114-2b48-a50d-164b-8938d15ab3ee.png)

```:ターミナル　
gem install solargraph
```

### erb
HTMLタグの補完

https://marketplace.visualstudio.com/items?itemName=CraigMaslowski.erb

設定
- settings.json に次を追加
```:settings.json
  "emmet.includeLanguages": {
    "erb": "html"
  },
  "files.associations": {
    "*.erb": "erb"
  },
```

【注意】
一部の環境で，このフォーマッタを使用すると、Railsのhtml.erb形式のファイルを保存（＆フォーマット）した際に、tmpファイルが作成されることがある。

現時点では、このフォーマッタをアンインストールする以外の方法が不明のため、上記の場合はフォーマッタを使用して tmp ファイルを削除するか、フォーマッタをあきらめるかの二択になる。

![Screenshot 2023-05-11 at 7.15.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2674841/796e556d-0cf2-71d4-8655-447f9fd2e4cb.png)

### endwise
endの自動補完

https://marketplace.visualstudio.com/items?itemName=kaiwood.endwise

### Ruby LSP

https://marketplace.visualstudio.com/items?itemName=Shopify.ruby-lsp

### Rails Go to Spec

https://marketplace.visualstudio.com/items?itemName=sporto.rails-go-to-spec&ssr=false#review-details

Cmd + Shift + yで対象のspecファイルを開く。
※ ModelとMailerはspecファイルを開けたが、Controllerはspecファイルが開けなかった

## AI
### GitHub Copilot

https://learn.microsoft.com/ja-jp/visualstudio/ide/visual-studio-github-copilot-extension?view=vs-2022

### Phind

https://marketplace.visualstudio.com/items?itemName=phind.phind

使い方は以下の記事を参考

https://qiita.com/tsukky67/items/f0689e9b4c73324bb47b#ctrlcmd--shift--l

## 見た目調整
### zenkaku
全角スペースを「灰色」で表示

https://marketplace.visualstudio.com/items?itemName=mosapride.zenkaku

有効化するため，次をターミナルから実行

```:ターミナル　
code ~/.vscode/extensions/mosapride.zenkaku-0.0.3/extension.js
```

開かれたファイルを次のように修正して、VSCodeを再起動
```
// 5行目の false を true に修正
var enabled = true;

// 11〜18行目を緑色に修正
    light: {
        backgroundColor: 'rgba(100, 200, 100, 0.7)',
        borderColor: 'rgba(100, 100, 200, 1)'
    },
    dark: {
        backgroundColor: 'rgba(100, 200, 100, 0.7)',
        borderColor: 'rgba(100, 200, 100, 1)'
    }
```
### Rainbow CSV

### vscode-icons
フォルダやファイルのアイコンが追加されて見やすくなる

https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

![スクリーンショット 2023-04-23 午前8.13.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2674841/0b85a231-2442-cc90-2d61-c33344f57590.png)

### Partial Diff
選択した部分のコードを簡単に比較できる

https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff

比較したい1つ目のコードをコピーし、2つ目のコードを選択して右クリック。
`Compare Text with Clipboard`をクリック。
![スクリーンショット 2023-04-23 午前8.14.14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2674841/38317c89-f758-3c96-b461-335b85f2ae43.png)

すると、差分ファイルが開き、変更点を教えてくれる。
例） postと@postの部分で`@`に色が付いている。
![スクリーンショット 2023-04-23 午前8.14.47.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2674841/696124c9-de7a-72a3-dada-3b5355bc367b.png)

### Code Spell Checker
英単語のタイプミスを教えてくれる

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

### Path Autocomplete 
パスを自動補完してくれる

https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete

![スクリーンショット 2023-04-23 午前8.12.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2674841/c6b8cdd9-4be1-c231-7ef0-182eeae48826.png)


### indent-rainbow
インデントに色付けしてくれる

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow


![スクリーンショット 2023-04-23 午前8.11.17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2674841/b266a990-fc74-e854-bd83-c76d06bf10f4.png)

### Output Colorizer
VSCodeの出力を色付けしてくれる

https://marketplace.visualstudio.com/items?itemName=IBM.output-colorizer

### Prettier
コードフォーマッタ

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Prettierの設定
フォーマットに Prettier を使用できるように指定する場合は， settings.json に次を追加
どれを Prettier に指定するかはお好み。

```:settings.json
settings.json
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
```
以下も settings.json に追加

```:settings.json
  "prettier.printWidth": 120,
  "prettier.singleQuote": true,
  "prettier.semi": true,
```
【補足】
**rintWidth**：「1行の文字数制限」を120文字に設定。デフォルトは80文字。

**singleQuote**:文字列リテラルを「シングルクォート」に強制的に変更。デフォルトは `false`で「ダブルクォート」を「シングルクォート」に強制敵に変更しない。

**semi**:式の最後にセミコロン`;`を付ける設定。デフォルトは`true`。


### Atom One Dark Theme
目に優しい配色にしてくれる
長時間のパソコン作業には必要

https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onedark

- インストール前
![スクリーンショット 2023-04-23 午前8.56.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2674841/81d7fde8-0332-3f70-1c17-6628d77d7f3d.png)


- インストール後
![スクリーンショット 2023-04-23 午前8.57.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2674841/903f982f-6385-ca2c-43e1-647522294a29.png)


### trailing-spaces
コードの末端の空白を色付きで表現してくれる

https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces

![スクリーンショット 2023-04-23 午前9.01.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2674841/629f9be1-2e42-d047-feda-f287390bb5fb.png)

### markdownlint
マークダウンの構文チェッカー

https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint

### Restore Editors
開いているタブを保存し、ボタン一つで復元できる

https://marketplace.visualstudio.com/items?itemName=amodio.restore-editors#overview

### Error Lens
- フォーマッタやリンターで設定している警告を大きく表示

https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens

![Screenshot 2023-05-30 at 19.15.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2674841/4347b317-1efa-82ef-936d-a1e69bef3a98.png)

### TODO Highlight
- TODOコメント等を見やすくする

https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight

### Better Comment

- TODOコメント等を見やすくする

https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

## 各種ツール

### Remote Development
- 複数の機能がパックされている

https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack


### REST Client
HTTPリクエストの内容を確認できる
⚠️.httpファイルに限る

https://marketplace.visualstudio.com/items?itemName=humao.rest-client

.httpファイルを作り`Send Request`をクリック
![スクリーンショット 2023-04-23 午前9.04.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2674841/1cfcf1c3-a678-296c-97bb-cf7f507ed676.png)

以下のようにHTTPリクエストの内容が表示される
![スクリーンショット 2023-04-23 午前9.04.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2674841/b15c9305-92f1-6997-5545-50dee95a6f2d.png)

# 5. settings.json
これまでの設定を踏まえた現在の設定がこちら。
```
{
    "files.autoSave": "onFocusChange",
    "editor.tabSize": 2,
    "git.enableSmartCommit": true,
    "git.autofetch": true,
    "auto-close-tag.SublimeText3Mode": true,
    "emmet.triggerExpansionOnTab": true,
    "liveServer.settings.AdvanceCustomBrowserCmdLine": "chrome",
    "emmet.includeLanguages": {
      "erb": "html"
    },
    // "editor.formatOnSave": true,
    // "editor.formatOnPaste": true,
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "workbench.iconTheme": "vscode-icons",
    "workbench.colorTheme": "Atom One Dark",
    "vsicons.dontShowNewVersionMessage": true,
    "editor.inlineSuggest.enabled": true,
    "githubPullRequests.pullBranch": "never",
    "terminal.integrated.scrollback": 9999,
    "editor.cursorBlinking": "smooth",
    "editor.rulers": [120],
    "editor.renderWhitespace": "none",
    "files.autoGuessEncoding": true,
    "files.eol": "\n",
    "files.trimTrailingWhitespace": true,
    "files.insertFinalNewline": true,
    "editor.minimap.enabled": false,
    "githubPullRequests.createOnPublishBranch": "never",
    "editor.renderControlCharacters": false,
    "terminal.integrated.persistentSessionReviveProcess": "onExitAndWindowClose",
    "workbench.startupEditor": "none",
    "debug.inlineValues": "on",
    "editor.formatOnType": true,
    // "editor.formatOnPaste": true,
    "files.trimFinalNewlines": true,
    "terminal.integrated.copyOnSelection": true,
    "scm.inputFontSize": 11,
    "markdown.preview.fontSize": 11,
    "workbench.layoutControl.type": "menu",
    "workbench.colorCustomizations": {
      "tab.activeBackground": "#666666cc",
      "editor.selectionBackground": "#8213be",
      "editor.selectionHighlightBackground": "#0113cd",
      "editor.findMatchHighlightBackground": "#4d5fb0",
      "editor.findMatchBackground": "#7402a9"
      "terminal.tab.activeBorder": "#00ff00"
    },
    "explorer.confirmDelete": false,
    "workbench.editor.pinnedTabSizing": "compact",
    "workbench.editor.tabSizing": "shrink",
    "editor.letterSpacing": -1.3,
    "explorer.openEditors.visible": 0,
    "editor.suggestLineHeight": 13,
    "debug.console.lineHeight": 11,
    "scm.diffDecorations": "none",
    "editor.folding": false,
    "editor.minimap.showSlider": "always",
    "editor.scrollbar.vertical": "hidden",
    "editor.scrollbar.horizontal": "hidden",
    "rest-client.fontSize": 13,
    "notebook.output.fontSize": 13,
    "notebook.markup.fontSize": 13,
    "editor.suggestFontSize": 13,
    "editor.inlayHints.fontSize": 13,
    "editor.codeLensFontSize": 13,
    "editor.cursorSmoothCaretAnimation": "on",
    "editor.cursorStyle": "block",
    "explorer.compactFolders": false,
    "editor.fontFamily": "Menlo, Monaco, monospace",
    "editor.fontWeight": "normal",
    "editor.tokenColorCustomizations": {
      "comments": "#d19cd1"
    },
    "terminal.integrated.enableMultiLinePasteWarning": false,
    "window.titleBarStyle": "native",
    "workbench.editor.openPositioning": "last",
    "workbench.editor.enablePreview": false,
    "git.showInlineOpenFileAction": false,
    // "liveServer.settings.donotShowInfoMsg": true,
    // "liveServer.settings.host": "file:///Users/jaraki/Desktop/Vue",
    "editor.fontSize": 13,
    "chat.editor.fontSize": 13,
    "editor.lineHeight": 0.9,
    "terminal.integrated.fontSize": 13,
    "terminal.integrated.letterSpacing": -1,
    "diffEditor.useInlineViewWhenSpaceIsLimited": false,
    "workbench.statusBar.visible": false,
    "window.zoomLevel": 1,
    "editor.fontLigatures": false,
    "workbench.activityBar.visible": false
  }

```
# 6. keybindings.json
```
// 既定値を上書きするには、このファイル内にキー バインドを挿入します
// Place your key bindings in this file to override the defaults
[
  {
    "key": "cmd+y",
    "command": "redo",
    "when": "editorTextFocus"
  },
  {
    "key": "shift+cmd+e shift+cmd+r",
    "command": "actions.findWithSelection"
  },
  {
    "key": "cmd+e",
    "command": "-actions.findWithSelection"
  },
  {
    "key": "cmd+e",
    "command": "workbench.view.explorer",
    "when": "viewContainer.workbench.view.explorer.enabled"
  },
  {
    "key": "shift+cmd+e",
    "command": "-workbench.view.explorer",
    "when": "viewContainer.workbench.view.explorer.enabled"
  },
  {
    "key": "shift+cmd+g",
    "command": "workbench.view.scm",
    "when": "workbench.scm.active"
  },
  {
    "key": "ctrl+shift+g",
    "command": "-workbench.view.scm",
    "when": "workbench.scm.active"
  },
  {
    "key": "cmd+down",
    "command": "workbench.action.nextEditor"
  },
  {
    "key": "shift+cmd+]",
    "command": "-workbench.action.nextEditor"
  },
  {
    "key": "cmd+up",
    "command": "workbench.action.previousEditor"
  },
  {
    "key": "shift+cmd+[",
    "command": "-workbench.action.previousEditor"
  },
  {
    "key": "cmd+h",
    "command": "editor.action.startFindReplaceAction",
    "when": "editorFocus || editorIsOpen"
  },
  {
    "key": "alt+cmd+f",
    "command": "-editor.action.startFindReplaceAction",
    "when": "editorFocus || editorIsOpen"
  },
  {
    "key": "cmd+u",
    "command": "workbench.action.gotoSymbol"
  },
  {
    "key": "shift+cmd+o",
    "command": "-workbench.action.gotoSymbol"
  },
  {
    "key": "cmd+m",
    "command": "workbench.action.toggleMaximizedPanel"
  },
  {
    "key": "cmd+l",
    "command": "git-graph.view"
  },
  {
    "key": "cmd+r",
    "command": "copyRelativeFilePath",
    "when": "editorFocus"
  },
  {
    "key": "cmd+k shift+alt+cmd+c",
    "command": "-copyRelativeFilePath",
    "when": "editorFocus"
  },
  {
    "key": "cmd+,",
    "command": "workbench.action.moveEditorLeftInGroup"
  },
  {
    "key": "cmd+k shift+cmd+left",
    "command": "-workbench.action.moveEditorLeftInGroup"
  },
  {
    "key": "cmd+.",
    "command": "workbench.action.moveEditorRightInGroup"
  },
  {
    "key": "cmd+k shift+cmd+right",
    "command": "-workbench.action.moveEditorRightInGroup"
  },
  {
    "key": "ctrl+p",
    "command": "workbench.action.pinEditor",
    "when": "!activeEditorIsPinned"
  },
  {
    "key": "cmd+k shift+enter",
    "command": "-workbench.action.pinEditor",
    "when": "!activeEditorIsPinned"
  },
  {
    "key": "ctrl+p",
    "command": "workbench.action.unpinEditor",
    "when": "activeEditorIsPinned"
  },
  {
    "key": "cmd+k shift+enter",
    "command": "-workbench.action.unpinEditor",
    "when": "activeEditorIsPinned"
  },
  {
    "key": "cmd+t",
    "command": "workbench.action.terminal.new",
    "when": "terminalProcessSupported || terminalWebExtensionContributedProfile"
  },
  {
    "key": "ctrl+shift+`",
    "command": "-workbench.action.terminal.new",
    "when": "terminalProcessSupported || terminalWebExtensionContributedProfile"
  },
  {
    "key": "shift+cmd+,",
    "command": "workbench.action.openSettings"
  },
  {
    "key": "cmd+,",
    "command": "-workbench.action.openSettings"
  },
  {
    "key": "shift+cmd+e",
    "command": "workbench.files.action.focusOpenEditorsView",
    "when": "workbench.explorer.openEditorsView.active"
  },
  {
    "key": "cmd+k e",
    "command": "-workbench.files.action.focusOpenEditorsView",
    "when": "workbench.explorer.openEditorsView.active"
  },
  {
    "key": "shift+cmd+j",
    "command": "aipopup.action.modal.generate",
    "when": "editorFocus"
  },
  {
    "key": "shift+cmd+k",
    "command": "-aipopup.action.modal.generate",
    "when": "editorFocus"
  },
  {
    "key": "shift+cmd+j",
    "command": "cursor.addSelectionToBigCmdKParallel",
    "when": "bigCommandKEnabled"
  },
  {
    "key": "shift+cmd+k",
    "command": "-cursor.addSelectionToBigCmdKParallel",
    "when": "bigCommandKEnabled"
  },
  {
    "key": "shift+cmd+j",
    "command": "aichat.insertselectionintofollowup"
  },
  {
    "key": "shift+cmd+y",
    "command": "-aichat.insertselectionintofollowup"
  },
  {
    "key": "cmd+up",
    "command": "workbench.action.terminal.focusPrevious",
    "when": "terminalFocus && terminalHasBeenCreated && !terminalEditorFocus || terminalFocus && terminalProcessSupported && !terminalEditorFocus"
  },
  {
    "key": "shift+cmd+[",
    "command": "-workbench.action.terminal.focusPrevious",
    "when": "terminalFocus && terminalHasBeenCreated && !terminalEditorFocus || terminalFocus && terminalProcessSupported && !terminalEditorFocus"
  },
  {
    "key": "cmd+down",
    "command": "workbench.action.terminal.focusNext",
    "when": "terminalFocus && terminalHasBeenCreated && !terminalEditorFocus || terminalFocus && terminalProcessSupported && !terminalEditorFocus"
  },
  {
    "key": "shift+cmd+]",
    "command": "-workbench.action.terminal.focusNext",
    "when": "terminalFocus && terminalHasBeenCreated && !terminalEditorFocus || terminalFocus && terminalProcessSupported && !terminalEditorFocus"
  },
  {
    "key": "shift+cmd+w",
    "command": "workbench.action.terminal.kill"
  },
  {
    "key": "cmd+i",
    "command": "composerMode.agent"
  },
]

```