見出し画像

VSCodeの設定ファイルやキーバインド、拡張機能をDotfiles形式(GitHub)で管理し、環境を共有する。

teitei.tk

この記事は

Visual Studio Code Advent Calendar 2018 の5日目の記事になります。

エンジニアの方でvimやemacs、bashrcやzshrcなどをDotfilesという名前でRepositoryを作成し、自宅や会社のマシンなど、どの環境でも同じ設定を利用している方は多いと思います。

VSCodeでは設定を共有する拡張機能としてSettings Syncというものがあります。


ですが、shellやvimなどの設定はDotfilesで管理をしており、VSCodeだけ拡張機能を分けるというのは管理するものが増えるので避けたいと思っていたので、Dotfilesで管理をするようにしました。

1. Repositoryを作る

すでにRepositoryがある方はスキップしてもらって大丈夫です。
無い方は下記の記事を参考にして作成をしてください。

2. VSCodeのコマンドラインを追加する。

Launch VS Code.
Open the Command Palette (⇧⌘P) and type 'shell command' to find the Shell Command: Install 'code' command in PATH command.

上記の記事を参考にインストールをすると、codeというコマンドが追加されています。
自分が利用している拡張ファイルを書き出すのは下記のコマンドを実行することで出来ます。

$ code --list-extensions > extensions

3. Shellファイルを作成し、VSCodeの設定をDotfiles Repositoryから参照するようにする。

VSCodeの設定は、下記のフォルダのファイルを元にしています。

$ ~/Library/Application\ Support/Code/User

settings.jsonとkeybindings.jsonというファイルに設定とキーバインドが定義されています。
なので、上記2つのファイルをシンボリックリンクを設定し、Dotfiles Repositoryから参照をするようにさせればよいのです。

実際のコードは下記になります。

#!/bin/sh

SCRIPT_DIR=$(cd $(dirname $0) && pwd)
VSCODE_SETTING_DIR=~/Library/Application\ Support/Code/User

rm "$VSCODE_SETTING_DIR/settings.json"
ln -s "$SCRIPT_DIR/settings.json" "${VSCODE_SETTING_DIR}/settings.json"

rm "$VSCODE_SETTING_DIR/keybindings.json"
ln -s "$SCRIPT_DIR/keybindings.json" "${VSCODE_SETTING_DIR}/keybindings.json"

すでに設定があれば削除をし、シンボリックリンクを貼ります。
その後、自宅の環境でキーバインドを変更した場合、Dotfiles RepositoryにPushをし、会社の環境でpullをし、上記のshellを実行すれば設定の共有ができます。

これで条件は整いました。下記のコードを restore.sh などの名前で保存をし、Repositoryにpushをします。

その後、各環境で実行することで

1. 利用端末での拡張機能のバックアップと上書き
2. 設定とキーバインドの反映

が行われ、各環境での共有が出来ます。

#!/bin/sh
SCRIPT_DIR=$(cd $(dirname $0) && pwd)
VSCODE_SETTING_DIR=~/Library/Application\ Support/Code/User

rm "$VSCODE_SETTING_DIR/settings.json"
ln -s "$SCRIPT_DIR/settings.json" "${VSCODE_SETTING_DIR}/settings.json"

rm "$VSCODE_SETTING_DIR/keybindings.json"
ln -s "$SCRIPT_DIR/keybindings.json" "${VSCODE_SETTING_DIR}/keybindings.json"

cat ./extensions | while read line
do
 code --install-extension $line
done

code --list-extensions > extensions

自分のRepositoryで利用している事を記事にしました。全てRepositoryにあるので、何かあればRepositoryを確認していただければと思います。


Software Engineer. https://teitei-tk.com