VSCode の Emmet で自作スニペットを登録し img 要素に loading=”lazy” を付与する

画像遅延読み込みの loading 属性がウェブ標準となった。

2.6.7 Lazy loading attributes | HTML Standard

なので Visual Studio Code(以下 VSCode)の Emmet での img 要素展開時に自動的に loading 属性を付与したいが現時点(2020/10/26)では以下の通り src 属性、alt 属性しか付与されないようなので自作スニペットを登録して対応する。

// Emmet 標準で img 要素を展開した場合
<img src="" alt="">

VSCode のスニペット登録は “ファイル > ユーザー設定 > ユーザースニペット” を選択。
上部にコマンドパレットが出てくるのでそこから html.json を選択。

“ファイル > ユーザー設定 > ユーザースニペット”
html.json を選択

html.json の例にならって独自のスニペットを記述する。

{
	// Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	// "Print to console": {
	// 	"prefix": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"

	// 以下を追加
	// body 部分、html 要素内のダブルクォーテーションの前には \ を付ける
	// $1, $2, $0 は展開後のタブ移動の際にフォーカスされる場所 
	"insert image loading": {
		"prefix": "img",
		"body": [
			"<img src=\"$1\" alt=\"$2\" loading=\"lazy\">$0"
		],
	},
}

スニペットに記述した内容は即反映されるので img 要素を展開すると loading=”lazy” が付与される。

<img src="" alt="" loading="lazy">

※ loading 属性の値として auto, lazy, eager があるが lazy の使用頻度が高いと思われるためスニペットでは lazy を付与するようにしたが、ファーストビューの画像のように遅延読み込みが望ましくないものについては手動で loading 属性削除、もしくは auto に変更することで対応。

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 ボタンをクリック。
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を使用しているので…

何か方法ないのかなぁ