Vue.jsやReactなど、JavaScriptライブラリのコードスニペットを利用できるVS Codeの拡張機能 -Snipsnap

Vue.js, React, Redux, Gatsby, Next.jsなど、Webやスマホアプリのプロジェクトに使用されるさまざまなJavaScriptライブラリのコードスニペットを利用できるVS Codeの拡張機能を紹介します。

Snipsnap -GitHub

• Snipsnapの特徴
• Snipsnapのインストール
• Snipsnapの使い方

Snipsnapの特徴

Snipsnapは、さまざまなJavaScriptライブラリのコードスニペットを利用できるVS Codeの拡張機能です。

サポートしているJavaScriptライブラリの一覧（上記以外にもたくさんあります）

Snipsnapは現在のプロジェクトで使用している言語やパッケージに基づいて、ライブラリで使用可能なスニペットをナビゲートし、必要なスニペットを選択します。

Snipsnapのインストール

Snipsnapのインストールは、VS Code Marketplaceから。

Snipsnap -VS Code Marketplace

「Install」ボタンをクリックすると、「VS Codeで開きますか？」と表示されるので、VS Codeで開いてインストールします。

VS Codeで開いたら、「Install」をクリック

Snipsnapの使い方

Snipsnapは、手動でアクティブ化する必要はありません。ワークスペースフォルダにpackage.jsonファイルが含まれ、すぐに使用できます。トリガーが必要な場合は、コマンドパレットのReload Windowを使用します。

設定

利用可能な設定オプションは、スニペットのリクエストから特定のライブラリを除外することだけです。Snipsnapはロックファイルからでも、プロジェクト全体ですべてのdepを収集することで機能します。そのため、lodashのようなサブ依存関係はスニペット環境を汚染し、イライラの原因になる可能性があります。

%unwanted_library%のスニペットがフェッチされないようにするには、プロジェクトのルートに.snipsnapignore.jsonファイルを作成し、無視するすべてのライブラリを単一のリストで指定する必要があります。