VSCode設定まとめ

メインエディタをVimからVScodeにしようかなと思ったのでメモ書き

設定同期

自分のgithub accountで同期

Settings Sync in Visual Studio Code

ショートカット

設定

  • alt + s + alt + pでショートカット設定を開いて設定
  • 被っているショートカットの検索は、検索窓の recorded keys に切り替えてショートカットで検索。
    • これでvimコマンドと被っているコマンドも確認できる

デフォルト

  1. User settings: Ctrl + , Command + ,
  2. コマンドパレット: Ctrl + Shift + p Shift + Command + p

その他のデフォルトのショートカット

ユーザー定義

項目 説明 プラグイン ショートカット
grep 全文検索 vscode本体 ctrl + shift + f, command + shift + f
find ファイル名検索 vscode本体 ctrl + p, command + p
ショートカット設定 ショートカットのキーを順番にササっと入力すれば大丈夫。そこまでシビアな入力判定ではない。vimのキーバインディングだとデフォルトのショートカット使えないので変えておく vscode本体 alt + s + alt + o
Terminalトグル Terminal開いていない時は新規に開いてくれる vscode本体 F9
新規Terminal 新規Terminalを開く vscode本体 shift + F9
Markdown preview ehnancedのプレビュー開く Markdown preview ehnanced alt + p
Markdownのテーブル挿入 Markdown preview ehnanced alt + p

基本ムーブ

  1. コマンドパレットを開く
  2. やりたいことを入力してみる
  3. 出てきたコマンドでの設定ボタンでショートカットが設定されていなかったら設定する

Settings

Theme

Darcula Theme https://marketplace.visualstudio.com/items?itemName=rokoroku.vscode-theme-darcula

Vim emulator

制約と誓約により高まるVim

GitHub - VSCodeVim/Vim: Vim for Visual Studio Code

Font

Fira code

GitHub - tonsky/FiraCode: Free monospaced font with programming ligatures

インストールと各種エディターでの設定方法

Home · tonsky/FiraCode Wiki

UI

    "workbench.colorCustomizations": {
        "statusBar.background" : "#0c000b",
    }

Extensions

とりあえず入れてるもの。今後、GoLandもVSCodeに移行しようかなと思うのでそのうちまた増える。

JS

  1. Prettier
  2. Bracket pair colorizer
  3. JavaScript ES6 Code snippets

    ショートカットはREADMEに書いてある

    GitHub - xabikos/vscode-javascript: Contains the code snippets for JavaScript (ES6) development in VS Code editor

  4. Simple React snippets

    ショートカットはREADMEに書いてある

    GitHub - burkeholland/simple-react-snippets: Simple React Snippets for VS Code that you will actually use

Markdown

  1. Markdown Preview Enhanced

    Markdown Preview Enhanced

  2. Markdown All in One ボルドとかイタリックとかよくあるショートカット使えるようになるはずだが、Windowsは、デフォルトがctrlを使うのでvimキーバインディングだと使えない。テーブル挿入くらいのために使う

  3. Markdown Emoji
    VSCodeMarkdown プレビューに:emoji: syntaxのサポート追加 👍

  4. :emojisense: emojiのサジェスト 🥇 🔥 🐈 🎸 🎾

Debug

組み込みのデバッガーで直接デバッグできるらしい。これはまた別記事でまとめる。