VSCodeとVimとNERDTree

本格的にVSCodeを使っていきたいので、Vimキーバインドは必須です。

Overview

  • vscodevim
  • 諸々の設定設定

Input

Proccess

  1. (VScode Extention)Vim(vscodevim) install
  2. 設定の場所
  3. 設定

(VScode Extention)Vim(vscodevim) install

(VScode Extention)Vim(vscodevim) からInstall

設定の場所

setting.jsonは * Windows: %APPDATA%\Code\User * macOS: $HOME/Library/Application Support/Code/User

設定

おいおい設定していくとして、上記サイトを参考にしたのが、files.trimTrailingWhitespaceだとmarkdown時の改行が消されてしまう。 markdownのときは、末尾削除は止めておきたい。

{
    "window.zoomLevel": 0,
    "eslint.alwaysShowStatus": true,
    "eslint.autoFixOnSave": true,
    "editor.tabCompletion": "onlySnippets",
    "editor.renderWhitespace": "boundary",
    "diffEditor.ignoreTrimWhitespace": true,
    "editor.wordWrap": "on",
    "files.trimTrailingWhitespace": true,
    "vim.useSystemClipboard": true,
    "vim.visualstar": true,
    "breadcrumbs.enabled": true,
    "workbench.editor.highlightModifiedTabs": true,
    "debug.inlineValues": true,
    "vim.hlsearch": true,
    "editor.parameterHints.cycle": true,
    "editor.scrollBeyondLastLine": false,
    "files.hotExit": "off",
    "files.eol": "\n",
    "vim.whichwrap": "b,s,h,l,<,>,[,]"
}

拡張子別の設定

[Command+Shift+P]
「Preferences: Configure language specific settings」入力
markdownでEnter押下すると上記のsetting.jsonが開く。
この方法で拡張子別の設定が可能になります。

{
    "window.zoomLevel": 0,
    "eslint.alwaysShowStatus": true,
    "eslint.autoFixOnSave": true,
    "editor.tabCompletion": "onlySnippets",
    "editor.renderWhitespace": "boundary",
    "diffEditor.ignoreTrimWhitespace": true,
    "editor.wordWrap": "on",
    "files.trimTrailingWhitespace": true,
    "vim.useSystemClipboard": true,
    "vim.visualstar": true,
    "breadcrumbs.enabled": true,
    "workbench.editor.highlightModifiedTabs": true,
    "debug.inlineValues": true,
    "vim.hlsearch": true,
    "[markdown]": {
        "files.trimTrailingWhitespace": false
    },
    "editor.parameterHints.cycle": true,
    "editor.scrollBeyondLastLine": false,
    "files.hotExit": "off",
    "files.eol": "\n",
    "vim.whichwrap": "b,s,h,l,<,>,[,]"
}

設定:NomalでIMEOff

NormalModeでIMEOFFは必須です。
Google日本語入力→環境設定→キー設定[編集]→[エントリー追加]
モード:入力文字なし
入力キー:Escape
コマンド:キャンセル後IMEを無効化

設定:エクスプローラにCtrl+h Ctrl+lで行ったりきたり

vscodevim、エクスプローラでもvimキーバインドしてくれるので、とてもいい具合です。あとは、
[Enter]でリネームを[m]menu相当→[r]rename [Ctrl+d]でサイドバーのトグル
[Enter]でエディタでファイルオープン
[m]menu相当→[c]copy
[m]menu相当→[p]paste
[m]menu相当→[a]add
[m]menu相当→[d]delete
にしたいです。

NERDTreeとはCtrl+hで行ったりきたりしたいです。
[Command+Shift+P]
「Preferences: Open Keyboard Shortcuts File」入力 すると、 /Users/froggugugugu/Library/Application Support/Code/User/keybindings.json としてファイルが出来上あります。 あとは参考の割と突き詰めてやったvim→vscode移行を見よう見まねで、

// 既定値を上書きするには、このファイル内にキー バインドを挿入します
[
    // --------------------------------------------------
    // サイドバーの制御
    // --------------------------------------------------
    // サイドバーの表示トグル
    {
        "key": "ctrl+d",
        "command": "workbench.view.explorer",
        "when": "!explorerViewletVisible && vim.mode != 'SearchInProgressMode' && vim.mode != 'Insert'"
    },
    {
        "key": "ctrl+d",
        "command": "workbench.action.toggleSidebarVisibility",
        "when": "explorerViewletVisible && !searchViewletVisible && !inDebugMode && vim.mode != 'SearchInProgressMode' && vim.mode != 'Insert'"
    },
    // サイドバーフォーカストグル
    {
        "key": "ctrl+h",
        "command": "workbench.action.focusSideBar",
        "when": "editorFocus"
    },
    {
        "key": "ctrl+h",
        "command": "workbench.action.focusFirstEditorGroup",
        "when": "!editorFocus"
    },
    // --------------------------------------------------
    // エクスプローラ操作
    // --------------------------------------------------
    // 別ウィンドウで開く(デフォルトは「l」で同一タブ開くになるので。)
    {
        "key": "Enter",
        "command": "explorer.openToSide",
        "when": "explorerViewletFocus && explorerViewletVisible && !explorerResourceIsFolder"
    },
    // フォルダのときは小要素をトグルで開く
    {
        "key": "Enter",
        "command": "list.toggleExpand",
        "when": "explorerViewletFocus && explorerViewletVisible && explorerResourceIsFolder"
    },
    {
        "key": "l",
        "command": "list.toggleExpand",
        "when": "explorerViewletFocus && explorerViewletVisible && explorerResourceIsFolder"
    },

    // --------------------------------------------------
    // エクスプローラ操作(各種ファイル操作)
    // ※一度のアクションではできないないので、mc→mpなどで代用。
    // --------------------------------------------------
    // リネーム
    {
        "key": "m r",
        "command": "renameFile",
        "when": "explorerViewletVisible && filesExplorerFocus"
    },
    // コピー
    {
        "key": "m c",
        "command": "filesExplorer.copy",
        "when": "explorerViewletVisible && filesExplorerFocus"
    },
    // ペースト
    {
        "key": "m p",
        "command": "filesExplorer.paste",
        "when": "explorerViewletVisible && filesExplorerFocus"
    },
    // ファイル追加
    {
        "key": "m a",
        "command": "explorer.newFile",
        "when": "explorerViewletVisible && filesExplorerFocus"
    },
    // 削除
    {
        "key": "m d",
        "command": "deleteFile",
        "when": "explorerViewletVisible && filesExplorerFocus"
    },
    // フォルダ追加
    {
        "key": "m f",
        "command": "explorer.newFolder",
        "when": "explorerViewletVisible && filesExplorerFocus"
    },
]

Output

  • vscodevim
  • setting.jsonの場所は「$HOME/Library/Application Support/Code/User」
  • NomalModeでIMEOffは「Google日本語」の設定から
  • [Command+Shift+P]「Preferences: Configure language specific settings」入力 で言語別設定
  • [Command+Shift+P]「Preferences: Open Keyboard Shortcuts File」入力 でキーバインド設定

ひとまずは運用できそうな基礎はできた感ある


  • JS開発環境構築1 Prev
  • VSCodeと等幅フォント Next