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を呼び出すのを例に紹介します。

キーワードを検索

キーワード検索時のイメージ

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

ライブラリを選択

ライブラリ選択時のイメージ

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

バージョンを選択

バージョン選択時のイメージ

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

ファイルの種類を選択

ファイルの種類選択時のイメージ

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

挿入 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に変更。

圧縮有無やバージョンを指定することもできますし、ちょっと試したいライブラリがあるときなど手軽に呼び出せて特に便利だと思います。

拡張機能のインストールや詳細については以下より確認できます。