VS Code：CDNの各種ライブラリを簡単に呼び出すことができる拡張機能「cdnjs」

インストール

拡張機能は「cdnjs - Visual Studio Marketplace」の「Install」ボタン、またはエディタのメニューにある「拡張機能」からインストールでき、エディタ上でインストールする場合は cdnjs と検索すれば該当の拡張機能が出てくると思います。
その後、エディタを再起動させればインストール完了になります。

使い方

拡張機能の有効化後、F1 または Mac：command + shift + P、 Win：Ctrl + Shift + Pで表示されるコマンド表示内でcdnと入力すると下記3種類のコマンドが表示されるようになり、呼び出したいライブラリを探す際はこの中のcdnjs: Search for librariesを選択します。

• cdnjs: Search for libraries
• cdnjs: Recent libraries
• cdnjs: Clear cache

以下でcdnjs: Search for librariesを選択してからの流れを、jQueryを呼び出すのを例に紹介します。

1. キーワードを検索

cdnjs: Search for librariesを実行後、続けて呼び出したいライブラリ名を入力します。
今回はjQueryを呼び出したいので、入力欄に「jquery」と入力してenterを押します。

2. ライブラリを選択

上記実行後にキーワードに関連するものがずらっと一覧で表示されると思うので、この中から使用したいライブラリを選びます。
プラグインなども多数表示されていると思いますが、ここでは本体を利用したいので「jquery」を選択します。

3. バージョンを選択

ライブラリ選択後は、呼び出したいバージョンを選択できます。
ここでは最新版である「3.3.1」を選択します。

4. ファイルの種類を選択

バージョン選択後は、呼び出したいファイルの種類を選択できます。
jQueryの3.3.1の場合は圧縮版・スリム版・ソースマップなど全部で7種類表示されていると思うので、この中から「jquery.min.js」を選択します。

5. 挿入 or コピーを選択

最後にCDN呼び出しの記述をどう扱うかの選択肢が表示されるので、その中から<script>: Insert into documentを選択すると下記のような記述が挿入されるのを確認できます。

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

選択肢は全部で5つ用意されており、それぞれ下記のような挙動になっています。

• <script>: Insert into document
scriptタグ付きの記述を現在開いているドキュメント内に挿入。
• <script>: Copy to clipbord
scriptタグ付きの記述をクリップボードにコピー。
• URL: Insert into document
  CDNファイルのURLのみを現在開いているドキュメント内に挿入。
• URL: Copy to clipbord
  CDNファイルのURLのみをクリップボードにコピー。
• URL: Open in browser
  CDNファイルのURLをブラウザで開く。

設定

拡張機能には4つの設定項目が用意されており、「設定 > 拡張機能 > cdnjs」で項目の確認・変更ができます。

• Cdnjs: Cache Time（cdnjs.cacheTime）
  ライブラリや検索結果のキャッシュ時間を変更。
• Cdnjs: Max Recent Libraries（cdnjs.maxRecentLibraries）
  最近使用したライブラリの保存件数を変更。
• Cdnjs: Protoco（cdnjs.protcol）
  URLプロトコルをhttp://, https://, //のいずれかに変更。
• Cdnjs: Quote Style（cdnjs.quoteStyle）
  クォーテーションをsingleまたはdoubleに変更。