VS Codeの設定メモ


1年くらいRubymineを使っていたんですが、最近vscodeに乗り換えたので設定のメモです。

# コードナビゲーション

Rubymineではshiftを2回押してsearch everywhereするか、`cmd + B`してコードジャンプしておけばだいたい良かったんですが、同じようなことをvscodeでやるにはどうすればいいのか結構悩みました。

| やりたいこと                 | コマンド            | ショートカット  | カスタマイズ |
|------------------------------|---------------------|-----------------|--------------|
| ファイル名からファイルを開く | Quick Open          | cmd + P         |              |
| コマンドの実行               | Show All Commands   | cmd + shift + P |              |
| 定義、参照を見る＆ジャンプ   | Peek References     | shift + F12     | ctrl + '     |
| シンボルからファイルを開く   | Open symbol by name | cmd + T         |              |
| ファイル内のシンボルに移動   | Go to Symbol        | cmd + shift + O |              |

コードジャンプは`Go to Definition`やら、`Go to Implementation`やら、`Peek Implementation`などいろいろあるけど、`Peek References`だけ使ってれば良さそう。Rubyでは効かなかったのでctagsを使う。このあたりの使い勝手はRubymineのほうが快適っぽい。

参照：[Code Navigation in Visual Studio Code](https://code.visualstudio.com/docs/editor/editingevolved)

# Diff

| コマンド                          |
|-----------------------------------|
| File: Compare Active File With... |

Git関係はSource ControlかGitLensあたりを使う。

# その他のショートカット

| やりたいこと               | コマンド                         | ショートカット  | カスタマイズ |
|----------------------------|----------------------------------|-----------------|--------------|
| PROBLEMSを開く/閉じる      | View: Toggle Problems            | cmd + shift + M |              |
| TERMINALを開く/閉じる      | View: Toggle Integrated Terminal | ctrl + `        |              |
| EXPLORERを開く             | View: Show Explorer              | cmd + shift + E |              |
| SEARCHを開く               | View: Show Search                | cmd + shift + F |              |
| フォーカスをSide Barへ移動 | View: Focus into Side Bar        |                 | cmd + ;      |
| フォーカスをEditorへ移動   | View: Focus First Editor Group   |                 | cmd + ;      |

```json:keybindings.json
[
  {
    "key": "cmd+;",
    "command": "workbench.action.focusSideBar",
    "when": "editorTextFocus"
  },
  {
    "key": "cmd+;",
    "command": "workbench.action.focusFirstEditorGroup",
    "when": "sideBarFocus"
  }
]
```

# 拡張機能

括弧なのは使ってみたけど結局無効にしたものです。

## Ruby
- [Ruby - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=rebornix.Ruby)
- [endwise - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=kaiwood.endwise)
- [vscode-ruby-ctags - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=otoniel-isidoro.vscode-ruby-ctags)
    - `cmd + alt + t`でジャンプ
    - ワークスペースのルートディレクトリがRailsのルートディレクトリでないとうまく動かない
- ([Ruby on Rails - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=hridoy.rails-snippets))
    - スニペットの補間がうるさかったので外した
- ([ruby-rubocop - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=misogi.ruby-rubocop))
    - 保存のたびにrubocopで画面が止まってしまうので外した

## JavaScript, HTML, CSS
- [Auto Rename Tag - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
- [ESLint - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
- [JavaScript (ES6) code snippets - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)
- [TSLint - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin)
- [Flow Language Support - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=flowtype.flow-for-vscode)
- [CSScomb - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-csscomb)
- ([Prettier - Code formatter - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode))
    - これなんで無効にしたのか忘れました。多分tslintと同時にprettierをかけるようにしたから必要なくなったとかだと思います

## Python
- [Python - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ms-python.python)

## CSV
- [Rainbow CSV - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv)
- [Edit csv - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=janisdd.vscode-edit-csv)

## Git
- [Git History - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)
- [GitLens — Git supercharged - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

## その他
- [Code Runner - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner)
- [Code Spell Checker - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker)
    - vscodeに乗り換えたときにtypoをプッシュしまくったので必須
- [Monokai Pro - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=monokai.theme-monokai-pro-vscode)
    - カラーテーマ
- [Path Intellisense - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)
- [Settings Sync - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync)
- [Vim - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=vscodevim.vim)
    - Rubymineのvimキーバインドより良くエミュレートできている気がする
    - ただ以下のissueがとても困る。ワークアラウンドは効いてると思うけど手元では`dd`だけでもジャンプしてしまう
        - [Cursor jumps to position in vertical split after delete · Issue #3455 · VSCodeVim/Vim](https://github.com/VSCodeVim/Vim/issues/3455)
- [vscode-icons - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)
- ([Bracket Pair Colorizer 2 - Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2))
    - これとても良いんですが重いので外しました

# settings.json

## タイトルバーにファイルのフルパスを表示する

```json:settings.json
    "window.title": "${activeEditorLong}${separator}${rootName}",
```

参照：[VScode Show Full Path in Title Bar - riow - Medium](https://medium.com/riow/vscode-show-full-path-in-title-bar-b0cb731b330)

## workbench関連

```json:settings.json
    "workbench.startupEditor": "none",
    "workbench.tree.indent": 20,
    "workbench.iconTheme": "vscode-icons",
```

## タブの色を変えて見やすくする

```json:settings.json
    "workbench.colorCustomizations": {
        "tab.activeBorder": "#e34d26",
        "tab.activeBackground": "#2d2d2d",
        "tab.inactiveBackground": "#1e1f1c",
        "tab.unfocusedActiveBorder": "#1f7480"
    },
```

## TS Lint関連

```json:settings.json
    "editor.formatOnSave": false,
    "editor.formatOnPaste": false,
    "editor.formatOnType": false,
    "editor.codeActionsOnSave": {
        "source.fixAll.tslint": true
    },
```

## Python関連

```json:settings.json
    "python.linting.enabled": true,
    "python.linting.pylintEnabled": false,
    "python.linting.pep8Enabled": true,
    "python.linting.lintOnSave": true,
```