Settings Sync で Visual Studio Code の設定を複数マシンで同期

他にも同内容の記事いくつもあったけど自分用にメモ。

Visual Studio Code(以下 VS Code)の設定(エディタ設定や拡張機能等)を複数のマシンで同期させる。
同期は VS Code の Settings Sync 拡張機能を用い GitHub Gist を介してアップロード/ダウンロードが行われる。(なので要 GitHub アカウント)

環境:Windows 10 + Visual Studio Code(1.26.1) + Settings Sync(3.0.0 – 3.1.0)

INDEX

  1. Settings Sync インストール
  2. アップロード(初回はセットアップが実行される)
  3. ダウンロード(未設定マシンではセットアップが実行される)
  4. エラー発生時の再設定方法
  5. 参考

1. Settings Sync インストール

VS Code サイドバー拡張機能より「Settings Sync」を検索しインストール。
有効化のため再読み込み。

2. アップロード(初回はセットアップが実行される)

以下ショートカット、またはコマンドパレット実行時に VS Code の設定が Gist へアップロードされる。
初回実行時は GitHub の Personal Access Tokens が開くので token を生成し Settings Sync の設定を行っていく。

ショートカット

Shift + Alt + U

コマンドパレット(Ctrl + Shift + P)

> Sync Update / Upload Settings
VS Code ショートカット Shift + Alt + U もしくはコマンドパレットから Sync Update / Upload Settings 実行で GitHub Personal Access Token 生成ページが自動的に表示される

Generate new token クリック。

必要な項目を入力する

Token description に任意の説明文を入力(今回はドキュメントに沿って code-settings-sync とした)。
Secret scopes > gist をチェックし Generate token ボタンをクリック。
repouser も必要という記事もあったが gist のみでいけた)

token が生成される

token が生成されるので控えておく。

VS Code で token の入力を求められているので先程の token をペースト

VS Code 側で Enter GitHub Personal Access Token と token の入力を求められるので先程生成した token をペースト Enter。

設定が完了し VS Code の設定が Gist にアップロードされた旨の通知、及びログが出力される。

Gist に追加されていることが確認され、ひとまず設定及びアップロード完了。

3. ダウンロード(未設定マシンではセットアップが実行される)

以下ショートカット、またはコマンドパレット実行時、2. アップロード の項で token を登録した VS Code であればそのまま Gist から設定がダウンロードされ VS Code に反映される。
別のマシンの場合セットアップが行われていないため上記で生成した token 及び Gist id の入力が必要となる。

ショートカット

Shift + Alt + D

コマンドパレット(Ctrl + Shift + P)

> Sync Download Settings
別マシンの場合別途 VS Code に token の入力を求められる

控えておいた token を登録。

token に続き Gist id の入力を求められる

続いて Gist id の入力を求められる。

Gist 個別ページ
https://gist.github.com/GitHubID/Gist id となっているので Gist id をコピー

Gist id は Gist > VS Code Settings 個別ページの URL に記載されているのでコピーして VS Code に登録する。

Gist から設定がダウンロードされ VS Code に反映される。
拡張をたくさんある場合それらのインストールである程度時間が掛かるかな。


以上で複数マシン間で VS Code の設定変更時にアップロード(Shift + Alt + U) / ダウンロード(Shift + Alt + D)を行う事で同期を行えるようになった。
その他の機能として
Toggle Auto Download :VS Code 起動時に Gist から自動的に設定をダウンロード(デフォルト無効)
Toggle Auto-Upload on change :設定を変更する度に自動的に Gist にアップロード(デフォルト無効)
等があるのでドキュメント参照。

また設定を誤るとアップロード / ダウンロード時にエラーとなり同期が行われいのでその際は以下より再設定を。

4. エラー発生時の再設定方法

token 生成時の設定ミス、VS Code へ誤った token を登録してしまうとアップロード時(Shift + Alt + U)以下のようなエラーが通知される。

token 生成の際に gist にチェックをし忘れたまま生成

Sync : Invalid Gist Id Entered. Verify your gist : https://gist.github.com/<your_userName>/<gist_id>.

VS Code へ 誤った token を入力

Sync : Invalid / Expired GitHub Token. Please generate new token with scopes mentioned in readme. Exception Logged in Console.

上記エラーはコマンドパレットから Settings Sync 設定リセット、再度セットアップを行う事により解決する。

コマンドパレット(Ctrl + Shift + P)

> Sync Reset Extension Settings

参考

NetBeansが重くなるのでnode_modulesやbower_componentsディレクトリを読み込ませなくする。

netbeans-so-slow-01

node.jsパッケージ管理ツール npm やWeb開発用パッケージ管理ツール Bower を利用しているのですが、NetBeans IDEでプロジェクトを開いた際にそれらが作成するパッケージ保存用ディレクトリ node_modules, bower_components の読み込みに時間が掛かり「プロジェクトのバックグラウンド・スキャン中…」と表示され続けていたので読み込まなくする方法を探してみました。

NetBeans performance severely degrades with many bower and npm dependencies – Stack Overflow

という訳で上記リンク先説明のままですが node_modules, bower_components ディレクトリを 「IDEが無視するファイル」に追加すれば読み込まれなくなります。
日本語環境では “ツール > オプション > その他(M) > ファイル” の “IDEが無視するファイル > 無視するファイルのパターン” となります。

^(CVS|SCCS|vssver.?\.scc|#.*#|%.*%|_svn)$|~$|^\.(?!(htaccess|git.+|hgignore)$).*$

に node_modules, bower_components を追加。

^(bower_components|node_modules|CVS|SCCS|vssver.?\.scc|#.*#|%.*%|_svn)$|~$|^\.(?!(htaccess|git.+|hgignore)$).*$

netbeans-so-slow-02

これでNetBeansの起動・読み込みは速くなりましたが当然 node_modules, bower_components ディレクトリがプロジェクト内に表示されなくなります。パッケージを直接編集というケースはないと思いますが、パッケージの中身を確認したいという場合に開けないのでその点不便になりそうです。


同様にDropboxでも node_modules, bower_components ディレクトリの同期処理に時間が掛かるので何とかできないかと探したのですが無さそうです…

選択型同期を使用してコンピュータの空き容量を節約するには | Dropboxヘルプセンター の方法だと対象ディレクトリのチェックを外す事により共有が行われなくなるようですが、

チェックマークをオフにしたフォルダはすべてハード ドライブから削除されますが、Dropbox ウェブサイトやアカウントとリンクしているコンピュータからアクセスすることが可能です。

の通り、チェックを外したディレクトリがハードドライブ上から削除される・Webや同期している別マシンからはアクセス可能という想定外の仕様なので使えません。
選択型同期の競合について | Dropboxヘルプセンター の通りチェックを外したディレクトリを再度作成する事により、ようやくそのディレクトリが同期対象から外れるという希望の仕様になるようですが面倒というか何か違う。
(特定ディレクトリのみDropboxの共有対象から外したいだけなんだけど…)

Mac間だと Dbignore by tkonolige でいけそうですが、MacとWindows間でDropboxを使用しているので…

何か方法ないのかなぁ

Mac OS XでエックスサーバーにSSH接続

年末間際にエックスサーバーでSSH接続が出来るようになったと聞いたのでMac OS X環境からアクセスしてみました。
マニュアルを見たところ公開鍵認証方式のみでパスワード認証には対応していないとの事。なのでSSHクライアントからの接続のみかなと思いましたが鍵情報登録したらFilezillaのSFTPにも対応できるみたいですが、うちの環境だとFilezillaが途中で止まりましたね・・・
Tera Termとか使用している人はマニュアルに沿って行けば問題ないと思うのでそちらを参照ください。
xserver-ssh-01

INDEX

  1. サーバーパネルのSSH設定について
  2. [公開鍵認証用鍵ペアの生成]からの設定
  3. [公開鍵登録・設定]からの設定
  4. ターミナルからSSH接続を実行
  5. 参考サイト

サーバーパネルのSSH設定について

xserver-ssh-02
“エックスサーバーコントロールパネル > サーバーパネル > SSH設定”のメニューは[SSH設定] [公開鍵認証用鍵ペアの生成] [公開鍵登録・設定]の3つ。

[SSH設定]ではSSH接続機能のON/OFF切り替えを行う。デフォルトではOFF。

SSH接続設定方法は2通り用意されており、[公開鍵認証用鍵ペアの生成]、[公開鍵登録・設定]となります。設定は後述。

というわけで、[SSH設定]でSSH機能の使用状態をONにし、[公開鍵認証用鍵ペアの生成]からの設定、もしくは[公開鍵登録・設定]からの設定へ。

[公開鍵認証用鍵ペアの生成]からの設定

xserver-ssh-03
1つ目の設定方法、[公開鍵認証用鍵ペアの生成]では公開鍵認証用の鍵ペア(公開鍵・秘密鍵)を自動で生成してくれます。
パスフレーズを入力して「公開鍵認証用の鍵ペア生成(確認)」をクリック、続けて次ページにて「公開鍵認証用の鍵ペア生成(確定)」をクリックで公開鍵・秘密鍵が生成されます。秘密鍵は”サーバID.key”というファイル名でダウンロードされ、公開鍵はサーバ上 /.ssh/authorized_keys へ保存されます。
xserver-ssh-04

ダウンロードされた”サーバID.key”秘密鍵はファイル名を”id_rsa”にリネームし /Users/ユーザ名/.ssh/ に移動。
リネーム時に拡張子.keyが残るのでファイルの「情報を見る」より拡張子を削除する。
xserver-ssh-05

一通り設定が完了したので次の項は飛ばしてターミナルからSSH接続を実行へ。

[公開鍵登録・設定]からの設定

xserver-ssh-06
2つ目の設定方法、[公開鍵登録・設定]ではMacのターミナルで公開鍵認証用の鍵ペア(公開鍵・秘密鍵)を生成し、上図公開鍵部分へ公開鍵を登録します。手順は以下の通り。

ターミナルを起動しssh-keygenを実行し鍵ペアを生成。
保存場所、鍵名を聞かれるのでそのままEnter。

$ ssh-keygen
Generating public/private rsa key pair.
Enter file in which to save the key (/Users/ユーザ名/.ssh/id_rsa):

鍵名を変更したい場合は以下の通り。
※鍵名はデフォルトではid_rsa、id_dsa、identity以外登録されていないので /etc/ssh_config の IdentityFileプロパティに追加する必要あり

Enter file in which to save the key (/Users/ユーザ名/.ssh/id_rsa): /Users/ユーザ名/.ssh/hoge_rsa

パスフレーズを求められるので入力。

Enter passphrase (empty for no passphrase):

確認用にもう一度求められるので再度入力。

Enter same passphrase again:

鍵ペアの生成が完了。
xserver-ssh-07

/Users/ユーザ名/.ssh/にid_rsa(秘密鍵)id_rsa.pub(公開鍵)が作成されます。
xserver-ssh-08

id_sra.pubをテキストエディタで開いてコピー。エックスサーバーサーバパネルの[公開鍵登録・設定]の公開鍵部分にペーストして「公開鍵を登録する(確認)」をクリック。続けて次ページにて「公開鍵を登録する(確定)」をクリックでサーバ上に公開鍵情報が登録されます。
xserver-ssh-09
公開鍵はサーバ上 /.ssh/authorized_keys へ保存されます。

xserver-ssh-04

サーバ上に公開鍵、Mac OS X上に秘密鍵が準備できたのでターミナルからSSH接続を実行へ。

ターミナルからSSH接続を実行

2通りのSSH接続設定、[公開鍵認証用鍵ペアの生成]、[公開鍵登録・設定]を行いましたが、共にサーバ上には /.ssh/authorized_keys が登録、Max OS X上には秘密鍵 /Users/ユーザ名/.ssh/id_rsa が保存されたのでターミナルからSSH接続を実行して行きます。

ターミナル起動。
$ ssh サーバID@サーバID.xsrv.jp -p 10022 で接続。(サーバIDは仮に”hogehoge”とする)
※接続ポートはエックスサーバー側で10022に制限されているので-pオプションで使用ポートを指定します。

$ ssh hogehoge@hogehoge.xsrv.jp -p 10022

なお、/Users/ユーザー名/.ssh/id_rsaのパーミッションが他のユーザからアクセス可能なもの(644等)の場合以下エラーが発生するので秘密鍵のパーミッションは600にしておく。

@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
@         WARNING: UNPROTECTED PRIVATE KEY FILE!          @
@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
Permissions 0644 for '/Users/ユーザ名/.ssh/id_rsa' are too open.
It is recommended that your private key files are NOT accessible by others.
This private key will be ignored.
bad permissions: ignore key: /Users/ユーザ名/.ssh/id_rsa
Permission denied (publickey,gssapi-with-mic).

パーミッション変更方法は以下の通り。

$ chmod 600 /Users/ユーザ名/.ssh/id_rsa

再度、SSH接続実行。初回接続時は以下が表示されるかもしれない(うろ覚えです)ので”yes”を入力してEnter。

The authenticity of host '[hogehoge.xsrv.jp]:10022 ([xxx.xxx.xxx.xxx]:10022)' can't be established.
RSA key fingerprint is xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx:xx.
Are you sure you want to continue connecting (yes/no)? 

ポップアップが開きSSHキー”id_rsa”のパスワードを聞かれるので登録したパスフレーズを入力しOK。
xserver-ssh-10

これでエックスサーバーにSSH接続する事ができました。
試しにWordPressインストールディレクトリに移動し一覧を表示してみました。
xserver-ssh-11

というわけで年末と全くない記事でしたが来年もよろしくお願い致します。

参考サイト