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

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 + ;

keybindings.json

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

拡張機能

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

Ruby

• Ruby - Visual Studio Marketplace
• endwise - Visual Studio Marketplace
• vscode-ruby-ctags - Visual Studio Marketplace
  • cmd + alt + tでジャンプ
  • ワークスペースのルートディレクトリがRailsのルートディレクトリでないとうまく動かない
• (Ruby on Rails - Visual Studio Marketplace)
  • スニペットの補間がうるさかったので外した
• (ruby-rubocop - Visual Studio Marketplace)
  • 保存のたびにrubocopで画面が止まってしまうので外した

JavaScript, HTML, CSS

• Auto Rename Tag - Visual Studio Marketplace
• ESLint - Visual Studio Marketplace
• JavaScript (ES6) code snippets - Visual Studio Marketplace
• TSLint - Visual Studio Marketplace
• Flow Language Support - Visual Studio Marketplace
• CSScomb - Visual Studio Marketplace
• (Prettier - Code formatter - Visual Studio Marketplace)
  • これなんで無効にしたのか忘れました。多分tslintと同時にprettierをかけるようにしたから必要なくなったとかだと思います

Python

• Python - Visual Studio Marketplace

CSV

• Rainbow CSV - Visual Studio Marketplace
• Edit csv - Visual Studio Marketplace

Git

• Git History - Visual Studio Marketplace
• GitLens — Git supercharged - Visual Studio Marketplace

その他

• Code Runner - Visual Studio Marketplace
• Code Spell Checker - Visual Studio Marketplace
  • vscodeに乗り換えたときにtypoをプッシュしまくったので必須
• Monokai Pro - Visual Studio Marketplace
  • カラーテーマ
• Path Intellisense - Visual Studio Marketplace
• Settings Sync - Visual Studio Marketplace
• Vim - Visual Studio Marketplace
  • Rubymineのvimキーバインドより良くエミュレートできている気がする
  • ただ以下のissueがとても困る。ワークアラウンドは効いてると思うけど手元ではddだけでもジャンプしてしまう
    • Cursor jumps to position in vertical split after delete · Issue #3455 · VSCodeVim/Vim
• vscode-icons - Visual Studio Marketplace
• (Bracket Pair Colorizer 2 - Visual Studio Marketplace)
  • これとても良いんですが重いので外しました

settings.json

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

settings.json

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

参照：VScode Show Full Path in Title Bar - riow - Medium

workbench関連

settings.json

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

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

settings.json

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

TS Lint関連

settings.json

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

Python関連

settings.json

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