Help us understand the problem. What is going on with this article?

Visual Studio Codeで設定ファイル・キーバインディング・拡張機能を共有する

VS Code 1.44.0のインサイダーで、公式のSeeings Sync機能がリリースされます。
Microsoftアカウントで同期する形のようなので、この記事の対応は不要になります。

https://code.visualstudio.com/updates/v1_43#_settings-sync


長年使っていたVimからVisual Studio Codeに乗り換えました。
拡張機能も入れるの簡単ですし、そもそも最初の設定だけでそれなりに使えていいエディタだと思っています。
自分はデスクトップ・ラップトップを持ち替えて使うことが多く、個別にセットアップしていたら色々と差分が出てきてしまったので設定ファイルの共有方法を考えていました。

Vim, Emacsを使っている人ならdotfilesリポジトリを使って管理しているような雰囲気を感じますが、Visual Studioでは基本GUIで設定を行えてしまいます。
開発環境のポータビリティを考えてシェルの設定と含めてVSCodeの設定を含んだdotfilesをGithubで管理したいというモチベーションで考えています。

設定ファイルの共有

VSCodeの設定ファイルはmacOSだと ~/Library/Application\ Support/Code/User/ 以下のsettings.json, keybindings.jsonに保存されています。

単純に共有したいディレクトリ上とシンボリックリンクを貼れば問題ないと思います。
以下はmacOSでの実行例です。

macOSでの実行例
# = 現在の設定があるPCでの操作
# 共有用フォルダ(今回の例では~/dotfiles/vscode)に今の設定ファイルを置く

mkdir -p ~/dotfiles/ ~/dotfiles/vscode
cd ~/Library/Application\ Support/Code/User/
mv ./settings.json ~/dotfiles/vscode/settings.json
mv ./keybindings.json ~/dotfiles/vscode/keybindings.json
ln -s ~/dotfiles/vscode/settings.json ./settings.json
ln -s ~/dotfiles/vscode/keybindings.json ./keybindings.json

# = 新しいPCでの操作
# 共有用フォルダにあるファイルからシンボリックリンクを貼る

cd ~/Library/Application\ Support/Code/User/
rm settings.json
ln -s ~/dotfiles/vscode/settings.json ./settings.json
rm keybindings.json
ln -s ~/dotfiles/vscode/keybindings.json ./keybindings.json

自分はdotfilesをGithubで管理する前提で~/dotfilesディレクトリを使っていますが、Dropbox上で同期する方法も考えられます。

Windowsだとlnではなくてmklinkでシンボリックリンクを作れるらしいですが、動作確認する環境がないので今回は対象外。

拡張機能の共有

拡張機能はファイルで管理しているわけではありません。(そういう認識でいます)
Command Lineツールで拡張機能一覧をの取得や新規拡張機能のインストールが出来るのでCommand Lineツールを利用して共有していきます。

(mac OSのみ必要) Command Lineツールをインストールする

WindowsとLinuxでは code コマンドがインストール時に使えるようになっていますが、mac OSでは自分でインストールする必要があります。

macだとCommand Palatte(Shift + Command + P) を開きShell Commandと検索して Shell Command: Install 'code' command in PATH command. を選択します。

これでTerminal上でcodeコマンドが利用可能になります。

参考
https://code.visualstudio.com/docs/setup/mac

拡張機能一覧を出力する

設定ファイルには拡張機能の情報はないので、このままではプラグインの共有が出来ません。
code-cliを使えばインストール中のプラグインを出力出来たり、特定の拡張機能をインストールすることが出来ます。

code --list-extensions で以下の様な出力が得られるので code --list-extensions > extensions で拡張機能リストのファイルを作ります。

出力例
HookyQR.beautify
PeterJausovec.vscode-docker
vscodevim.vim
...

拡張機能のインストールをする

1行ずつ見ていってインストールしていけばいいので以下の様なシェルスクリプトを実行すれば一覧を元に復元出来ます。
これで拡張機能の共有が可能になります。

install_extensions.sh
#!/bin/sh

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

先程保存したextensionsファイルがあるディレクトリでsh install_extensions.shを入力するといい感じにインストールしてくます。

スクリーンショット 2017-08-02 4.07.17.png

もっといい方法知りたい

拡張機能の復元方法が強引な感じがしますが、しょうがないかなという印象です。
そのうち本体に管理機能ができそうな気がするので今はこの方法でごまかしていきたいと思います。

開発環境のポータビリティを上げて旅しながら仕事みたいなことしてみたいですね

自分のdotfiles
https://github.com/mottox2/dotfiles/tree/master/vscode

mottox2
フロントエンドを中心にWebサービス・アプリを作ってるフリーランスエンジニア。UIデザインと編曲もやってます。
https://mottox2.com
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。
https://admin-guild.slack.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした