@@ -1,278 +1,277 @@
<font color='red'>**言語やフレームワークによらない**</font>、オススメの汎用的な[拡張機能](https://marketplace.visualstudio.com/)をまとめました。
[VSCode1.33](https://code.visualstudio.com/updates/v1_33)です。
Tipsは**[ここ](#設定などのtips)**から。
## 拡張機能 24 選
### 1. [vscode-icons](https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons)
アイコンがついて見やすくなる。
### 2. [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
とにかく強い。
「コミット単位でのファイル比較」や「最新のコミット内容とそのコミッター表示」など色々してくれる。
`git blame`する手間なくなる。
### 3. [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
コードのフォーマットは自動でやりましょう！
複数人のこだわりをうんたらするよりも、[Prettier](https://github.com/prettier/prettier)に委ねるのが楽。対応言語多い。
関連のTipsは[ここ](https://qiita.com/sensuikan1973/items/74cf5383c02dbcd82234#%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E8%87%AA%E5%8B%95%E3%83%95%E3%82%A9%E3%83%BC%E3%83%9E%E3%83%83%E3%83%88-prettier%E4%BB%A5%E5%A4%96)
### 4. [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)
Git logが見やすい
### 5. [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)
カッコの対応を色付きで表示してくれる。
**ものすごく読みやすくなって最高&最高！！**
なおBeta版ですが、後継となる[Bracket Pair Colorizer 2](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2)も出ています。
### 6. [Settings Sync](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)
どこでも同じ設定で使いたい人には便利。
<kbd>⇧ + ⌥ + U/D</kbd> で設定をアップロード/ダウンロードできる。
似たものに、[Syncing](https://marketplace.visualstudio.com/items?itemName=nonoroazoro.syncing)がある。
### 7. [REST Client](https://marketplace.visualstudio.com/items?itemName=humao.rest-client)
HTTPリクエストの操作を便利にしてくれる。
### 8. [Bookmarks](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks)
ブックマークしてジャンプしたり、リスト化できたりする。
### 9. [PlantUML](https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml)
UMLの図を書く時に便利。
### 10. [TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight)
TODOやFIXMEなどのコメントハイライトを細かく設定できる。
似たものに[Better Comments](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments)がある。
### 11. [Japanese Language Pack](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)
日本人なので。
### 12. [Path Autocomplete](https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete)
パスの入力を支援してくれる。
似たものに[Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)がある。
### 13. [Rainbow CSV](https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv)
CSVを幸せな気持ちで眺められるようになる
### 14. [Partial Diff](https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff)
選択範囲の差分を手軽に確認できて便利。
### 15. [Duplicate action](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-duplicate)
ファイルやディレクトリをボタン一つで複製できて便利
<img width="300" alt="duplicate_action.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/159680/84fd5cb6-8969-8d79-9542-aee5308d81e8.png">
### 16. [GitHub Pull Requests](https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github)
公式による拡張。
### 17. [gitignore](https://marketplace.visualstudio.com/items?itemName=codezombiech.gitignore)
[github/gitignore](https://github.com/github/gitignore)を参照して自動でやってくれる。
`.gitignore`といえば[gitignore.io](https://www.gitignore.io/)ですが、これを使うのもありかも。
### 18. [Todo +](https://marketplace.visualstudio.com/items?itemName=fabiospampinato.vscode-todo-plus)
高機能にToDoを管理したい場合は、[TODO Highlight](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight)よりもこちらを使いたい。
似たものに[Todo Tree](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree)がある。
### 19. [Output Colorizer](https://marketplace.visualstudio.com/items?itemName=IBM.output-colorizer)
出力結果を装飾してくれて便利！
ちなみに、ログファイルの装飾は **[Log File Highlighter](https://marketplace.visualstudio.com/items?itemName=emilast.LogFileHighlighter)** が便利！
### 20. [proto3](https://marketplace.visualstudio.com/items?itemName=zxh404.vscode-proto3)
ProtocolBuffers3のハイライトとかスニペットとかを提供してくれる。
### 21. [Bash Debug](https://marketplace.visualstudio.com/items?itemName=rogalmic.bash-debug)
軽い効率化でbash書く時に便利。
### 22. [Trailing Spaces](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces)
行末の空白を強調表示してくれる。
ちなみに、以下の設定をすればファイル保存時に自動で末尾の空白を削除してくれる
```settings.json
"files.trimTrailingWhitespace": true
```
### 23. [Regex Previewer](https://marketplace.visualstudio.com/items?itemName=chrmarti.regex)
正規表現をチェックする時に便利。
### 24. [Add jsdoc comments](https://marketplace.visualstudio.com/search?term=jsdoc&target=VSCode&category=All%20categories&sortBy=Relevance)
jsdoc入力を支援してくれる。
## 設定などのTips
設定ファイルは、「Code > 基本設定 > 設定」で開ける。
jsonを直接編集するか、GUIから単語検索すればOK。
### インデントの強調
インデントの強調表示は、`v1.25`で[標準サポート](https://code.visualstudio.com/updates/v1_25)されたようです。
**`highlightActiveIndentGuide`を`true`にすると有効**。
プラグインとしては以下が有名です。
• [Indent Rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow) : 好みが分かれそうですが、人気。
• [Indenticator](https://marketplace.visualstudio.com/items?itemName=SirTori.indenticator)
• [Guides](https://marketplace.visualstudio.com/items?itemName=spywhere.guides) : 赤色で強調表示してくれるだけのシンプルな機能強化
### 「code」コマンドのインストール
<kbd>⌘ + ⇧ + P</kbd> でコマンドパレットを開き、「Shell」で検索しインストール。
これでターミナルから「**code**」コマンドを使ってVSCodeを起動できる。
### 最終行に改行を自動挿入
```settings.json
"files.insertFinalNewline": true
```
### 制御文字の表示
```settings.json
"editor.renderControlCharacters": true
```
**GitHubにREADMEあげた時に文字化けしちゃう**なんてことを防げる
自動で削除したい場合は、**[Remove backspace control character](https://marketplace.visualstudio.com/items?itemName=satokaz.vscode-bs-ctrlchar-remover)**という拡張を入れると良さそう
### 折り返し表示
長い行がよく出てくるなら便利
```settings.json
"editor.wordWrap": "on"
```
### エディタレイアウトの保持
```settings.json
"workbench.editor.closeEmptyGroups": false
```
### ターミナルで選択したテキストを自動コピーする
```settings.json
"terminal.integrated.copyOnSelection": true
```
### 起動時に無題ファイルを開く
```settings.json
"workbench.startupEditor": "newUntitledFile"
```
### CPU使用の軽減
サイズの大きいファイルがあるとCPU使用率(CodeHelper)が高くなってしまうことがある。
以下のオプションで参照から除外するディレクトリを設定しておくと良い。
```settings.json
"files.watcherExclude": {
"**/images/**": true
}
```
### 不要な行の削除
```settings.json
"files.trimFinalNewlines": true
```
### [階層リンク(パンくずリスト)](https://code.visualstudio.com/updates/v1_26#_breadcrumbs)の表示
```settings.json
"breadcrumbs.enabled": true
```
### 直近閉じたタブを開き直す
<kbd>⌘ + ⇧ + T</kbd>
### コードの自動フォーマット (Prettier以外)
複数人なら[Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)や各種fmt/lintを使うのが良いと思いますが、個人ならショートカットかVSCodeの設定で済ませるのもありです。
#### ショートカットを使う
<kbd>⌃ + ⌥ + F</kbd>
JSONでの実行例↓
#### VSCodeの設定を使う
「formaton」で検索すると、たくさんの項目が出てくるのでお好みに設定する。
### フォーカスの移動ショートカット
キーバインドの設定から、jsonファイルを開いて以下をコピペするだけ。
```keybindings.json
[
{ "key": "cmd+]", "command": "workbench.action.nextEditor" },
{ "key": "cmd+[", "command": "workbench.action.previousEditor" },
{
"key": "cmd+]",
"command": "workbench.action.nextSideBarView",
"when": "sideBarFocus"
},
{
"key": "cmd+[",
"command": "workbench.action.previousSideBarView",
"when": "sideBarFocus"
},
{
"key": "cmd+]",
"command": "workbench.action.nextPanelView",
"when": "panelFocus"
},
{
"key": "cmd+[",
"command": "workbench.action.previousPanelView",
"when": "panelFocus"
}
]
```
### バーの色をプロジェクトごとに変える
参考: [Visual Studio Codeエディタの色をプロジェクトごとに設定する](https://qiita.com/kabosusoba/items/3afad300ef1ea9ddd50b)
### ターミナルを全画面表示する
```settings.json
"workbench.useExperimentalGridLayout": true
```
-
ちなみに、ターミナルは <kbd>⌃ + ⇧ + `</kbd> で開ける。
### 定義にジャンプ & 元の位置に戻る
定義にジャンプ
<kbd> ⌘ + クリック </kbd>
元の位置に戻る
<kbd>「⌃」 + 「-」 </kbd>
### ファイル名検索
<kbd> ⌘ + P </kbd>
### 修正プログラムをコマンドで選択する
赤線と一緒に出るこれ。
わざわざカーソルを持っていくのは面倒。
<kbd>⌘ + .</kbd> でカーソルを動かさずに修正内容を選択できる。
import の時に多用する。
### エディタのグループ移動
基本設定 > キーボードショートカット を開くと、ショートカットを一覧できる。
例えば、 <kbd>⌃ + ⌘ + →</kbd> でエディタを右のグループに移すのは多用する。
