社内でよく使う VSCode の機能紹介

テックタッチのバックエンドエンジニアの taisa です。

社内勉強会で、Visual Studio Code（以降 VSCode と記載）ナレッジ共有会を実施したのでその内容を紹介します。

今回の趣旨は「VSCode で各自がよく使う機能やショートカット、ちょっとしたノウハウを共有することで開発効率を向上させたい」というものです。自分自身 VSCode を使いこなせておらず、他のメンバーの使い方に興味がありました。共有会では、みんなで順番に画面共有しながら進めていきました。

コマンドパレット編
シンボル検索編
ショートカット編
Git 編
- 特定の行をハイライトした状態のURLを取得する
Extension 編
設定編
まとめ

コマンドパレット編

まずはコマンドパレットです。コマンドパレットを使えば、ショートカットコマンドを割り当てたり、覚えてなくても様々な機能が実行できるので大変便利な機能です。以下のショートカットからウィンドウを開き実行したいコマンドを実行します。

Mac	Windows
cmd + shift + P	ctrl + shift + P

例えば「>View: Split Editor Right」を実行するとエディタ表示の分割ができます。これはタブ上で右クリック > Split Right を選択したのと同じ動作です。

また、バックエンド開発は Golang で行っているので、Go を例にすると、プラグインをインストールすれば、>Go:と入力して必要なコマンドを選択するだけで、開発する上での便利なコマンドが実行可能になります。

例えば、struct 定義内で下記コマンドを実行すると struct にタグが自動生成できます。

>Go: Add Tags To Struct Fields

type User struct { // このカッコ内でコマンドを実行する
    ID        int
    Email     string
    FirstName string
    LastName  string
}

デフォルトではjson: "snake_case, omitempty"が自動生成されます。

type User struct {
    ID        int   `json:"id,omitempty"`
    Email     string `json:"email,omitempty"`
    FirstName string `json:"first_name,omitempty"`
    LastName  string `json:"last_name,omitempty"`
}

.vscode/settings.jsonに下記を追加すると、camelcaseにしてomitemptyを無くすことが可能です。

{
    "go.addTags": {
        "tags": "json",
        "options": "json=",
        "promptForTags": false,
        "transform": "camelcase"
    }
}

type User struct {
    ID        int   `json:"id"` // このカッコ内でコマンドを実行する
    Email     string `json:"email"`
    FirstName string `json:"firstName"` // `json: "camelCase"`になる
    LastName  string `json:"lastName"`
}

シンボル検索編

次はシンボル検索です。シンボル検索は、開いているファイルの function や struct（Golang であれば）を検索する機能です。下記のショートカットからウィンドウを開き検索したいシンボルを入力します。

Mac	Windows
cmd + shift + O	ctrl + shift + O

「@」に加えてコロン「@:」を入力するとシンボルがグルーピングできます。

また、下記ショートカットを実行するとプロジェクト内すべてのシンボルが検索できます。

Mac	Windows
cmd + T	ctrl + T

ショートカット編

次はショートカットです。コードの編集機能は vim プラグインを使っていたり人それぞれなので、VSCode 共通でよく使う機能だけピックアップしました。

最近開いたプロジェクトを開く

下記のショートカットで、プロジェクト選択後「enter」を実行すると、現在開いているプロジェクトが切り替わりますが「ctrl + enter」を実行すると新しいウィンドウでプロジェクトが開けます。

Mac	Windows
ctrl + R	ctrl + R

最近開いたファイルを開く / ファイルを検索する

最近開いたファイル一覧を表示しつつ、入力するとプロジェクト内のファイルが検索できます。これは誰もが使っているであろうショートカットですね。

Mac	Windows
cmd + P	ctrl + P

サイドバーを開く/ 閉じる、パネルを開く/ 閉じる、エクスプローラを開く

開発時にエディタを広く使いたい、ターミナルに移動したい、エクスプローラに移動したいときに良く使うショートカットです。

アクション	Mac	Windows
サイドバーを開く/ 閉じる	cmd + B	ctrl + B
パネルを開く/ 閉じる	cmd + J	ctrl + J
エクスプローラを開く	cmd + shift + E	ctrl + shift + E