ABCウェブエンジニアblog

Webデザイナー/エンジニア/講師のホームページ・ウェブサイト制作の備忘録

VScodeの設定を同期してWin/Mac拡張機能や設定を揃える

Microsoft VisualStudioCodeで設定の同期をオンにして拡張機能などを簡単移行!

PCの買い替えなどで、新たにソフトを入れなおして一つ一つ再設定していく作業…

面倒ですよね。

 

私事ですが、つい先日M1チップ搭載のMacbook Airを購入して、まさに環境移行に時間を費やすという状況がありました。

そこで何かいい方法がないかと調べたところ、クラウド同期による便利な方法を見つけた次第です。

という事で、今回は表題の通りVScodeの設定をそのまま同期して拡張機能や設定を自動で揃える方法をご紹介したいと思います。

 

OfficeやAdobeのソフトなども何でもクラウドでデータ同期などが当たり前の昨今、こういった環境移行が簡単に行えるというのはまさにクラウドの恩恵ですね。

Windows/Mac問わず移行できるので、同じようにVScodeの環境移行に困ってる方は是非ご参考頂ければ幸いです。

ではやっていきましょう。

 

VScode標準の機能で設定の移行が可能

今回の環境移行の方法、試験的な機能という情報で使ってみましたが、現在は正式にVScodeの標準の機能として導入されているようです。

Microsoft Visual Studio Codeの設定の同期で拡張機能など環境移行する方法

VScodeの上部メニューから「ファイル>ユーザー設定>設定の同期がオン」という項目があるのがお分かりいただけるでしょうか。

▼同期をオンにする前は「設定の同期をオンにする」という項目になっているはずです。

Microsoft VisualStudioCode設定の同期をオンにする画面

ここをクリックして設定を有効化することで各デバイス間で設定を同期することが出来ます。

まずは既に色々設定済みの移行前の端末側で、設定の同期をオンにしてみましょう。

▼こんな画面が出てきたかと思います。

VisualStudioCodeで設定の同期をオンにした後の画面キャプチャ

バイス間でデータ同期する項目を選択することが出来ます。 

必要な項目にチェックマークがついてる状態にして次に進みましょう。

右上に「サインインしてオンにする」というボタンがあります。

クラウドでデータ同期するので、アカウントが必要です。

VisualStudioCodeへMicrosoftかGithubアカウントでログインし同期オン

GithubMicrosoftのアカウントが使用できます。

アカウントが無い場合はまず新規アカウント作成する必要がありますが、おそらくVScodeを使われている方はどちらかのアカウントは持っている方が多いかと思います。

いずれかを選択すると、ブラウザでサインインし、アカウント情報をVScodeへ共有する許可の可否画面が表示されるので、OKにして進みましょう。

Microsoft VisualStudioCodeの画面キャプチャ「設定の同期がオンになりました」

サインインが済んでVScodeへ画面が戻ると「設定の同期がオンになりました」と表示されるはずです。

 

拡張機能のインストールには少々時間がかかるかと思いますが、少し放って置けば見慣れたアイコンなどが画面に並んでいくでしょう。

 

この設定を環境構築済みの使い慣れた端末にした後、新しくVScodeをインストールした端末でも行います。

そうすると自動的に同期されて、同じ環境が整うかと思います。

非常に便利ですね。

 

VScodeで設定の同期に関するその他の機能

一度設定の同期をオンにした後再度VScode上部メニューから「ファイル>ユーザー設定>設定の同期がオン」をクリックすると以下のような項目が表示されます。

VisualStudioCodeの設定同期オンにした後の他の機能

一つ目の「構成」は、同期の際にチェックマークを入れた、デバイス間でデータ同期する項目の選択を再度選び直せる機能です。

 

▼2つめの「設定を表示する」を選ぶと以下のような画面になります。

Microsoft VisualStudioCodeの設定同期のその他の詳細設定

細かくsetting.jsonを編集することで同期を無視するアプリを選んだりできるようです。

 

▼3つめ「同期されたデータを表示」ではいつどんな同期が行われたかを見る事が出来ます。

Microsoft VisualStudioCodeで同期している内容を表示

各項目の右側の矢印アイコンでその同期を取り消して状態の復元ができるようです。

 

残りの「今すぐ同期」と「同期をオフ」は説明不要でしょう。

 

クラウドによる同期はとても便利

以前は設定ファイルのデータコピーなどが必要だったようですが、今回の方法だとVScodeのインストールさえしてしまえば、設定の手順としてはものの数分で環境移行が出来てしまいます。

クラウドによる移行なので、アカウントが必要だったり慣れていない方は戸惑うという事もあるかもしれませんが、使いこなせばデータの同期を自動でしてくれて非常に強力で便利です。

▼他にも便利な使い方がVScodeには多くあるので、しっかり学んでおきたいですね。 

 

ChromeOSなどほぼクラウドだけで何でも出来るようなプラットフォームも存在しますし、今後もどんどん便利になることが予想されます。 

 

クラウドって何?という疑問をお持ちの方はイラストでわかり易く理解!

 

近い将来、よりよくなる可能性に期待がふくらみますね。 

 

最後までお読みいただきありがとうございました!

 

 

 

webabc.hatenablog.jp

webabc.hatenablog.jp

webabc.hatenablog.jp

webabc.hatenablog.jp

webabc.hatenablog.jp

 

 

 

【VSCode】公式版の設定同期機能 Settings Sync を早速使ってみた - 7839