Visual Studio Codeを使ってみる。

VSCode(Visual Studio Code)を使い始めたので、インストール方法と便利な拡張機能についてまとめていく予定。

インストール

こちらからVSCodeをダウンロードします。Windows、Mac、Linuxに対応しています。

私はWindowsにインストールしています。

ダウンロードが完了したらインストーラを起動して指示に従ってインストールするだけです。インストールが完了するとVSCodeが起動します。

使い方

基本的な使い方など。

ファイルの作成から実行

新規ファイルを作るには、上のメニューにあるFileから「New File」で任意の場所に作成できます。さらに、DebugとHelpの間にあるTerminalから「New Terminal」でVSCodeの画面下でTerminalが使えるようになります。私の場合、WindowsにVSCodeをインストールしたのでPowerShellが起動していました。

今までにインストールしたライブラリや開発環境を構築した言語もVSCodeのTerminalで動かすことができます。

拡張機能

個人的にオススメできる拡張機能についてまとめていきます。

拡張機能は赤で囲まれたところをクリックすると、

拡張機能がインストールできる画面が表示されます。

拡張機能をインストールするには、緑色のInstallを押せばインストールできます。

さらに、Search Extensions in Marketplaceからインストールしたい拡張機能を探してインストールすることが可能です。

緑色のInstallを押すとインストールが始まり青色のInstallingが表示されます。

インストールが完了すると、このように青色のReloadが表示されます。下の例ではSearch Extensions in MarketplaceからVimをインストールしています。

Reload to Activateをクリックすると拡張機能が使えるようになります。

vscodevim

VSCodeでVimを使いたかったのでvscodevimをインストールしてみました。

私はとりあえず Ctrl-j でInsertモードからNormalモードに移りたいのでkeybindingの設定をしてみました。

Ctrl - jを<ESC>に割り当てる

VSCode内でコマンドパレットが（Ctrl + Shift + P）で開くのでOpen Keyboard Shortcutsと入力しPreferences: Open Keyboard Shortcutsを選択するか、File > Preferences > Keyboard Shortcutsで以下の画面を開く。

For advanced customizations open and edit keybindings.jsonのkeybindings.jsonをクリックすると、次の画面が開く。

左にDefault Keybindings、右にkeybindings.jsonが表示されるのでkeybindings.jsonを以下のように編集し保存する。

// Place your key bindings in this file to overwrite the defaults
[    
    {
       "key": "Ctrl+j",
       "command": "extension.vim_escape",
       "when": "editorTextFocus && vim.active && !inDebugRepl"
    },
]

これでCtrl - jが<Esc>に割り当てられた。

Ctrl - OとCtrl - Nについて

vscodevimをインストールしたらファイルを開くときのCtrl-Oと新規ファイルを作るCtrl-Nが使えなくなっていた。どうやらvimの方が優先されているみたいだったので、vimの方のCtrl-OとCtrl-Nを無効にしてみました。

VSCode内でコマンドパレットが（Ctrl + Shift + P）で開くのでOpen Settingsと入力しPreferences: Open Settings (JSON)を選択すると以下の画面が開く。

左にDEFAULT USER SETTINGS、右にUSER SETTINGSが開くので、右のUSER SETTINGSに以下を追加する。

    "vim.handleKeys": {
        "<C-o>": false,
        "<C-n>": false
    }

これでCtrl-Oでファイルを開き、Ctrl-Nで新規ファイルを開くことができます。

VSCode内のTerminalとEditorをCtrl - ;で移動する

TerminalとEditorをCtrl-;で移動できるように設定してみました。

USER SETTINGSに以下を追加します。USER SETTINGSの開き方については上に書いています。

    { 
        "key": "ctrl+;", 
        "command": "workbench.action.terminal.focus"
    },
    { 
        "key": "ctrl+;", 
        "command": "workbench.action.focusActiveEditorGroup", 
        "when": "terminalFocus"
    }

（おまけ）jjを<Esc>に割り当てる

VSCode内でコマンドパレットが（Ctrl + Shift + P）で開くのでOpen Settingsと入力しPreferences: Open Settings (JSON)を選択すると以下の画面が開く。

左にDEFAULT USER SETTINGS、右にUSER SETTINGSが開くので、右のUSER SETTINGSを次のようにする。

{
    "vim.insertModeKeyBindings": [
    {
      "before": ["j", "j"],
      "after": ["<Esc>"]
    }
  ],
}

これでjjが<Esc>に割り当てられた。

現在のUSER SETTINGSとkeybindings.json

私の現在の設定を晒しときます。クリックしたら表示されます。（※ちなみに、私はWindowsを使っています。）

USER SETTINGS

{
    "vim.handleKeys": {
        "<C-o>": false,
        "<C-n>": false
    }
}

keybindings.json

// Place your key bindings in this file to overwrite the defaults
[    
    {
       "key": "Ctrl+j",
       "command": "extension.vim_escape",
       "when": "editorTextFocus && vim.active && !inDebugRepl"
    },
    { 
        "key": "ctrl+;", 
        "command": "workbench.action.terminal.focus"
    },
    { 
        "key": "ctrl+;", 
        "command": "workbench.action.focusActiveEditorGroup", 
        "when": "terminalFocus"
    }
]