The Visual Studio Code use for one week

オフィシャルサイト

IntelliJ,Android Studio,XCode,Atomに疲弊したので、Visual Studio Code に移行してみた。

カスタマイズ方法を調べたのでメモがてらまとめます

Site

https://www.visualstudio.com/products/code-vs.aspx


Support OS

  • Windows
  • Linux (.rpm/.deb)
  • OS X

設定

すべての設定はJSONで定義します(// コメント可能)

User Settings

ユーザ単位の設定

今回設定した、User Settings

{
"editor.fontFamily": "'Ricty Discord'",
"editor.fontSize": 16,
// タイプ時に整形を自動実施
"editor.formatOnType": true,
// 最後の行を越えてスクロールするか
"editor.scrollBeyondLastLine": true,
// タブ1つに相当するスペースの数
"editor.tabSize": 2,
// ファイルの保存時に末尾の空白をトリミング
"files.trimTrailingWhitespace": true
}
Default Settings(デフォルト設定/変更不可)
User Settings(カスタム設定)

Workspace Settings

対象ディレクトリ(WorkSpace)単位の設定

今回設定した、Workspace Settings

{
“go.gopath”: “${workspaceRoot}/example”
}
“go.gopath” -> 任意のディレクトリをGOPATHにする設定

Keyboard Shortcuts

いろいろなショートカットがあるのでDefault Keyboard Shortcutsを参考に設定すると良い

今回設定した、Default Keyboard Shortcuts

{ “key”: “ctrl+x ctrl+1”, “command”: “workbench.action.splitEditor” },
{ “key”: “ctrl+x 1”, “command”: “workbench.action.splitEditor” },
{ “key”: “ctrl+x ctrl+t”, “command”: “workbench.action.terminal.toggleTerminal” },
{ “key”: “ctrl+x t”, “command”: “workbench.action.terminal.toggleTerminal” },
{ “key”: “ctrl+x ctrl+p”, “command”: “workbench.action.showCommands” },
{ “key”: “ctrl+x p”, “command”: “workbench.action.showCommands” },
{ “key”: “ctrl+shift+l”, “command”: “editor.action.format”, “when”: “editorTextFocus” },
{ “key”: “ctrl+x ctrl+o”, “command”: “workbench.action.nextEditor” },
{ “key”: “ctrl+x o”, “command”: “workbench.action.nextEditor” },
{ “key”: “ctrl+x ctrl+x”, “command”: “workbench.action.quickOpen” },
{ “key”: “ctrl+x x”, “command”: “workbench.action.quickOpen” }

key: ショートカットキー

command: Default Keyboard Shortcuts に用意されているコマンド

when: どのパネルにフォーカスされた時に有効/無効に

下記のターミナルのショートカットを設定したが、フォーカス移動できず、、、Help!
// — workbench.action.terminal.focus
// — workbench.action.terminal.focusNext
// — workbench.action.terminal.focusPrevious

User Snippets

ファイルタイプ別に スニペット を記述

Color Theme

アプリのカラーテーマを設定(後述するExtensionsから簡単にインストール可能)

File Icon Theme

ファイルアイコンテーマを設定(後述するExtensionsから簡単にインストール可能)

Extensions

Atom で言う、Packages/Themes で、extensionを入れて自分好みのエディタに仕上げていきます。

マーケットプレースサイトでも確認できます

https://marketplace.visualstudio.com/VSCode

人気順やインストール済みなどのソート/フィルタがついてます。

迷ったら、インストール数が多いやつを入れていけばいいと思います。

インストールするとアプリの再起動が必要です。

今回インストールした Extensions

vscode-icons : 前述した、File Icon Theme で設定

Material-theme : 前述した、Color Theme で設定

vscode-emacs : emacs のバインディング追加

キーバインド ctrl+x ctrl+x とか普通にサポートしているので、インストールしなくても自分で設定することも可能
Vimはすごい再現率らしいです。使わないからわかないけど

オススメ機能

  • Terminal機能 : IntelliJ/Atomにもあるけどここまで完成度の高いターミナルはすごい(複数 Terminal サポート)
  • デバッガ : node.js/golang など結構なサポート数(もちろんブレイクポイントだってサポート)
  • Git : 標準組み込みされているので普通に便利
  • Recent Files: Atomは拡張だったけど、標準搭載

おすすめショートカット

// エディタ縦分割
{ “key”: “cmd+\\”, “command”: “workbench.action.splitEditor” },

// ターミナルを開く(トグル)
{ “key”: “ctrl+`”, “command”: “workbench.action.terminal.toggleTerminal” },

// Command パネルを開く
{ “key”: “alt+x”, “command”: “workbench.action.showCommands” },

// コードフォーマット
{ “key”: “shift+alt+f”, “command”: “editor.action.format”, “when”: “editorHasFormattingProvider && editorTextFocus && !editorReadonly” },

// 開いているエディタの右を移動(ループ)
{ “key”: “alt+cmd+right”, “command”: “workbench.action.nextEditor” },

// 過去に開いたファイルやworkspaceのファイルをクイック検索表示
{ “key”: “cmd+p”, “command”: “workbench.action.quickOpen” },

さいごに

後発こそのいいとこ取りエディタという印象。その上完成度がかなり高い

iOS/Androidは、流石に専用IDEつかうけど、それ以外は、このエディタでしばらく言ってみます。

Emacsも最近メジャーアップデートしたよねーー (Version 25)