share facebook facebook twitter menu hatena pocket slack

2017.06.20 TUE

Visual Studio Code の設定メモ

WRITTEN BY 山口 与力

cloudpack あら便利カレンダー 2017 の7日目です。

Visual Studio Code の、今使っている設定をチラ裏するだけの記事です。

前提

  • Visual Studio Code Version 1.12.2

書いた人

  • OS は Windows と Mac を使っている。 Linux のデスクトップはほとんど使わない
  • コードを書くほかに各種設定ファイル、どこかにメールや投稿したりする日本語の下書きにも使う
  • 主な使用言語
    • JavaScript
    • TypeScript
    • Ruby
    • Go
  • エディター遍歴
    • (なんか使ってたけど覚えてない)
    • SublimeText 2
    • Atom
    • VSCode
  • キーボードは US 配列が好き
  • サーバーに ssh で入った時は vim 使ってる
  • Emacs は10分くらいしか使ったことない…
  • 意識が低い
    • すぐにマウスに手が伸びる
    • ホームポジションを離れても悪びれない
    • 忘れっぽい
  • 最近 Razer のキーボードを買いました
    • めっちゃ光る。ちょうたのしい

方針

  • 極力デフォルトの状態に馴れる
  • それでも足したい機能や変更したいキーバインドがあれば適宜やっていく

内容

Settings

  • Fira Codeは最初はそこまでする?って懐疑的だったけど使ってみたら超良かった。その前はRictyを使ってた
  • フォントサイズは状況に応じてショートカット(Win ならctrl+-ctrl+=、Mac ならcmd+-cmd+=)で適宜変更する

settings.json

{ 
    "window.zoomLevel" : 0 、
    "editor.tabSize" : 2 、
    "editor.fontFamily" : "Fira Code" 、
    "editor.fontSize" : 14 、
    "editor.fontLigatures" : true 、
    "editor.wordWrap" : "on" 、
    "editor.minimap.enabled" : true 、
    "git.confirmSync" : false 、
    "files.insertFinalNewline" : true 
}

Key Bindings

macOSではデフォルトで使えるEmacs風味のキーバインドをわりと使うので、それをWindowsでも使えるように。デフォルトのキーバインドとぶつかる部分は、基本的に元の機能を修飾キー足して退避。

Emacs風味のカーソル移動以外で入れてる変更は以下など。

  • ctrl+gctrl+shift+g:バッファー内検索で次または前の一致に移動
    • Chromeとかで使えるやつ。デフォはF3だけどちょっと遠いので。
  • ctrl+j:後述のjumpyという Extension を起動

keybindings.json

// Place your key bindings in this file to overwrite the defaults
[
  {
    "key": "ctrl+a",
    "command": "cursorHome",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+shift+a",
    "command": "cursorHomeSelect"
  },
  {
    "key": "alt+a",
    "command": "editor.action.selectAll"
  },
  {
    "key": "ctrl+b",
    "command": "cursorLeft",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+shift+b",
    "command": "cursorLeftSelect",
    "when": "editorTextFocus"
  },
  {
    "key": "alt+b",
    "command": "cursorWordLeft",
    "when": "editorTextFocus"
  },
  {
    "key": "shift+alt+b",
    "command": "cursorWordLeftSelect",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+alt+b",
    "command": "workbench.action.toggleSidebarVisibility"
  },
  {
    "key": "ctrl+alt+shift+b",
    "command": "workbench.action.tasks.build"
  },
  {
    "key": "ctrl+d",
    "command": "deleteRight",
    "when": "editorTextFocus && !editorReadonly"
  },
  {
    "key": "ctrl+shift+d",
    "command": "editor.action.addSelectionToNextFindMatch"
  },
  {
    "key": "ctrl+shift+alt+d",
    "command": "workbench.view.debug"
  },
  {
    "key": "ctrl+e",
    "command": "cursorEnd",
    "when": "editorTextFocus && !editorReadonly"
  },
  {
    "key": "ctrl+shift+e",
    "command": "cursorEndSelect",
    "when": "editorTextFocus && !editorReadonly"
  },
  {
    "key": "ctrl+alt+e",
    "command": "workbench.view.explorer"
  },
  {
    "key": "ctrl+f",
    "command": "cursorRight",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+shift+f",
    "command": "cursorRightSelect",
    "when": "editorTextFocus"
  },
  {
    "key": "alt+f",
    "command": "cursorWordRight",
    "when": "editorTextFocus"
  },
  {
    "key": "shift+alt+f",
    "command": "cursorWordRightSelect"
  },
  {
    "key": "ctrl+alt+f",
    "command": "workbench.view.search"
  },
  {
    "key": "ctrl+shift+alt+f",
    "command": "editor.action.formatDocument",
    "when": "editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly"
  },
  {
    "key": "ctrl+g",
    "command": "editor.action.nextMatchFindAction"
  },
  {
    "key": "ctrl+g",
    "command": "actions.find",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+shift+g",
    "command": "editor.action.previousMatchFindAction"
  },
  {
    "key": "ctrl+alt+g",
    "command": "workbench.view.scm"
  },
  {
    "key": "ctrl+h",
    "command": "deleteLeft"
  },
  {
    "key": "ctrl+shift+h",
    "command": "editor.action.startFindReplaceAction"
  },
  {
    "key": "ctrl+alt+h",
    "command": "workbench.action.replaceInFiles"
  },
  {
    "key": "ctrl+j",
    "command": "extension.jumpy-word"
  },
  {
    "key": "alt+j",
    "command": "workbench.action.togglePanel"
  },
  {
    "key": "ctrl+l",
    "command": "workbench.action.quickOpen"
  },
  {
    "key": "ctrl+n",
    "command": "cursorDown",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+shift+n",
    "command": "cursorDownSelect",
    "when": "editorTextFocus"
  },
  {
    "key": "alt+n",
    "command": "workbench.action.files.newUntitledFile"
  },
  {
    "key": "alt+shift+n",
    "command": "workbench.action.newWindow"
  },
  {
    "key": "ctrl+p",
    "command": "cursorUp",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+shift+p",
    "command": "cursorUpSelect",
    "when": "editorTextFocus"
  },
  {
    "key": "ctrl+y",
    "command": "workbench.action.showCommands"
  }
]

Extensions

各言語固有の機能拡張はそれを書くときに適宜入れればいいと思うので、汎用的で便利に使えるやつをご紹介。

  • indent-rainbow
    • 爆発的にインデントが見やすくなる
  • jumpy
    • 複雑なキーボード覚えられない人への大いなる福音。ただ1回ショットカットを押して、行きたい位置のラベルを打てばそこに行ける、脳にやさしい
  • Settings Sync
    • VSCodeの設定を複数マシン間で同期できる。Gistをバックエンドにしているとこが面白い
  • empty-indent
    • 空行にスペースだけがあるのキモイので

元記事はこちら

Visual Studioコードの設定メモ