投稿

投稿日:

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. 参考

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 ボタンをクリック。
（repo と user も必要という記事もあったが 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

参考

投稿日:

WordPress REST API (Version 2) の posts エンドポイントにカスタムフィールドの値を追加する

WordPress REST API (Version 2) で出力される JSON でカスタムフィールドで登録した値を取得したいけど Post Meta エンドポイント （http://example.com/wp-json/wp/v2/posts/<parent_id>/meta） はセキュリティの関係上、認証[*1]されたユーザにしか出力されないので Posts エンドポイント （http://example.com/wp-json/wp/v2/posts/<id>) でカスタムフィールドの値を出力するメモ。 [*1] Authentication | WP REST API v2 Documentation functions.php に以下を追加。 $response に出力される JSON のデータ（？）が入っているので rest_prepare_post をフックして値を書き換え。 
function my_rest_prepare_post( $response, $post, $request ) {

$response-&gt;data['post_meta'] = array(
'hoge' =&gt; get_post_meta( $post-&gt;ID, 'key_hoge', true ),
'fuga' =&gt; get_post_meta( $post-&gt;ID, 'key_fuga', true ),
);

return $response;
}
add_filter( 'rest_prepare_post', 'my_rest_prepare_post', 10, 3 );
フィルターフックはプラグインディレクトリ内、 rest-api/lib/endpoints/class-wp-rest-posts-controller.php で定義されており post_type 毎に設定できるので pagesエンドポイント （http://example.com/wp-json/wp/v2/pages/<id>) に追加したいのであれば rest_prepare_page と。 
/**
* Filter the post data for a response.
*
* The dynamic portion of the hook name, $this-&gt;post_type, refers to post_type of the post being
* prepared for the response.
*
* @param WP_REST_Response   $response   The response object.
* @param WP_Post            $post       Post object.
* @param WP_REST_Request    $request    Request object.
*/
return apply_filters( 'rest_prepare_' . $this-&gt;post_type, $response, $post, $request );
カスタマイズ方法を探していて WordPress › フォーラム » カスタムフィールドの内容をJSON REST APIで表示する を参考にしたのですがこの時は WordPress REST API (Version 1) で、 Version 2 になってフィルターフック名が変わっていたので躓いた…

参考サイト

投稿日:

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を使用しているので…

何か方法ないのかなぁ