ExtractionCssSelectorをFLOCSS仕様にカスタマイズしてみた!
ExtractionCssSelector – Visual Studio Marketplace
こんにちは!
HTMLタグからCSSセレクターを自動生成できる VS Code 拡張機能「ExtractionCssSelector」を、Cursorでも使いたいと思ったことはありませんか?
ただ、Cursorの拡張機能検索で探しても、見つかりませんでした。
ExtractionCssSelector は、HTMLを選択してExtractionCssSelectorを使用すれば、ワンクリックでCSSセレクターを生成・コピーできる便利な拡張機能です。
この記事では、VS Code Marketplaceにしかない拡張機能を、Cursorに手動でインストールする方法を紹介します。
今回は、VS Code側で .vsix ファイルをダウンロードし、
それをCursorに読み込ませる方法でインストールしていきます。
まず、VS Codeを開きます。
拡張機能タブで以下の拡張機能を検索します。
ExtractionCssSelectorJSON
対象の拡張機能ページを開きます。
拡張機能の詳細画面を開いたら、歯車アイコンをクリックします。
表示されたメニューから、「VSIXのダウンロード」を選択します。

これで gonishiduka1985.extractioncssselector-1.0.0.vsix のようなファイルがダウンロードされます!
次にCursorを開きます。
Ctrl + Shift + P でコマンドパレットを開き、以下を入力し選択します。
Extensions: Install from VSIX...JSON
エクスプローラーが開くので、先ほどダウンロードした .vsix ファイルを選択します。
「拡張機能のインストールが完了しました」と出ればOKです!
この後は実際に選択範囲を決めて、
右クリックし「ExtractionCssSelector【filter1】」のような表記が出ていれば問題なく
インストールできております!

VSIXファイルを使えば、Cursorの拡張機能検索で見つからないVS Code拡張機能もインストールできます。
ただし、VS CodeとCursorは完全に同じ環境ではないため、
拡張機能によっては一部機能が動かない場合があります。
また、VSIXで手動インストールした拡張機能は、自動更新されない場合があります。
最新版を使いたい場合は、再度VSIXファイルを取得してインストールしなおす必要があります。
便利な方法ではありますが、通常のインストール方法とは異なるため、試す場合は自己責任でお願いします。
今回は、VS Code拡張機能の「ExtractionCssSelector」をCursorで使う方法を紹介しました!
私はCursorにこの拡張機能が見つからないことが、VS CodeからCursorへ乗り換える際の障壁になっていましたが、
VSIXファイルを使って手動インストールすることで、Cursorでも利用できるようにしてCursorに移行しました!
以前、ExtractionCssSelectorをFLOCSS仕様にカスタマイズして使いやすくした記事も書いています。
こちらもあわせて参考にしていただけると嬉しいです!
ExtractionCssSelector – Visual Studio Marketplace

No title found

ExtractionCssSelectorをCursorで使う方法|VS Code限定拡張機能をCursorに手動でインストールする方法