VSCode 設定

Setup

• Download Visual Studio Code

全体

• 文字コードを 'Ricty Diminished' に変更
  • 設定を開く (cmd,)
  • 検索窓に 'Editor Font Family' を入力
  • Editor: Font Family の先頭に 'Ricty Diminished' (''が必要) を入力

ショートカット変更

• keybindings.json を開き以下の設定を行う ([Code|基本設定|キーボードショートカット]選択後、アイコン「キーボードショートカットを開(Json)」をクリック)

  • ctrl+n, p 次/前 エディター移動
  • ctrl+h, l 次/前 エディターグループ移動
  • ctrl+j, k Terminal, Editor を移動

    {
        "key": "ctrl+p",
        "command": "workbench.action.previousEditor"
    },
    {
        "key": "ctrl+n",
        "command": "workbench.action.nextEditor",
    },
    {
        "key": "ctrl+j",
        "command": "workbench.action.terminal.focus",
    },
    {
        "key": "ctrl+k",
        "command": "workbench.action.focusActiveEditorGroup",
    },
    {
        "key": "ctrl+l",
        "command": "workbench.action.focusNextGroup"
    },
    {
        "key": "ctrl+h",
        "command": "workbench.action.focusPreviousGroup"
    },
  

vim Key binding

• Esc キーで IME off (英数)

  • Karabiner で対応

• vim-surround 設定
  
  標準で付いているため、設定を有効にする

    $ vim ~/Library/Application\ Support/Code/User/settings.json
    {
      ・
         "vim.surround": true,
    }
  

ターミナル

• 色を黒に変更

  • 設定を開く (cmd,)

  • 検索窓に 'workbench color customizations' を入力

  • [setting.json を編集] link をクリックし、settings.json を表示する

  • settings.json に以下の内容を入力

    • Base16 Terminal Colors for Visual Studio Code|ashes

    "workbench.colorCustomizations": {
      "terminal.background":"#1C2023",
      "terminal.foreground":"#C7CCD1",
      "terminalCursor.background":"#C7CCD1",
      "terminalCursor.foreground":"#C7CCD1",
      "terminal.ansiBlack":"#1C2023",
      "terminal.ansiBlue":"#AE95C7",
      "terminal.ansiBrightBlack":"#747C84",
      "terminal.ansiBrightBlue":"#AE95C7",
      "terminal.ansiBrightCyan":"#95AEC7",
      "terminal.ansiBrightGreen":"#95C7AE",
      "terminal.ansiBrightMagenta":"#C795AE",
      "terminal.ansiBrightRed":"#C7AE95",
      "terminal.ansiBrightWhite":"#F3F4F5",
      "terminal.ansiBrightYellow":"#AEC795",
      "terminal.ansiCyan":"#95AEC7",
      "terminal.ansiGreen":"#95C7AE",
      "terminal.ansiMagenta":"#C795AE",
      "terminal.ansiRed":"#C7AE95",
      "terminal.ansiWhite":"#C7CCD1",
      "terminal.ansiYellow":"#AEC795"
    },
    

Plugins

Coding

• Vim (vscodevim.vim)
• ESLint (dbaeumer.vscode-eslint)
• Prettier - Code formatter (esbenp.prettier-vscode)
• stylelint (stylelint.vscode-stylelint)
• Visual Studio IntelliCode (visualstudioexptteam.vscodeintellicode)
• Bracket Pair Colorizer (coenraads.bracket-pair-colorizer)
• indent-rainbow (oderwat.indent-rainbow)
  
  インデントを見やすくする（レインボー表示）

Debug

• Debugger for Chrome (msjsdiag.debugger-for-chrome)

Misc

• Japanese Language Pack for Visual Studio Code (ms-ceintl.vscode-language-pack-ja Microsoft)
  
  日本語パック
• Hybrid Next (wyze.theme-hybrid-next)
  
  色テーマ
• VSNotes (patricklee.vsnotes)
  
  作業履歴、技術資料管理
  
  良さそうだったが、git 管理しようと思ったら読み込みが著しく遅くなったので、アンインストール
• vscode-icons "vscode-icons-team.vscode-icons"
  
  ファイル毎のアイコン表示
• Auto-Open Markdown Preview (hnw.vscode-auto-open-markdown-preview)
  
  md ファイルをエディターで開くと自動でプレビュー画面を表示する
  
  自動で開かれるとうざいため、アンインストール

資料

• VSCode でも Vim 風に操作する拡張機能 VSCodeVim
• [vim-surroundでvimmerへの道を極めよう] (https://qiita.com/takuyanin/items/5eb009e737a235e51ab2)

memo

# vim surround tips
ブロック選択して S( をすると(にスペースが挿入される) スペースなしは以下のコマンドで行う
  b: (
  B: {
  r: [
  a: <