1. ホーム
  2. visual-studio-code

[解決済み] Visual Studio Codeで一致する要素を選択する/HTMLタグの名前を変更する

2023-07-05 17:37:44

質問

次のようなコードがあるとします。

    <div class="footer">
      <div>Foo</div>
    </div>

どうすれば .footerdiv 要素から footer 要素に変更しますか?

つまり、もし私がカーソルを div 要素の開始タグと終了タグを選択するキーボードショートカットを探しています。以前、Sublimeでこれを行うためにemmetを使用したと信じていますが、Codeで同様の機能を見つけることができないようです。(理想的には、これはJSXファイルでも動作するのですが...)

どのように解決するのですか?

V1.41でこの機能が追加されています。 https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_41.md#html-rename-tags

HTMLリネームタグ

F2 を使って、HTML の開始/終了タグのペアをリネームできるようになりました。

F2 カーソルをタグの上に持っていくと、小さな入力ボックスが表示され、新しいタグの名前を入力することができます。

参照 https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_42.md#html-mirror-cursor-off-by-default

また、v1.41で追加されたquot;mirror tags"の機能も興味深いかもしれません( https://github.com/microsoft/vscode-docs/blob/vnext/release-notes/v1_41.md#html-mirror-cursor ):

タグの内側をクリックすると、一致する開始タグまたは終了タグに別のカーソルができます。

<ブロッククオート

VS Code は、HTML タグを編集しているときに、"ミラーカーソル" を追加するようになりました。 この動作は、設定 html.mirrorCursorOnMatchingTag という設定で制御されます。

---------- v1.42 では、ミラーカーソルのデフォルトのステータスが変更されています。

HTML ミラーカーソルはデフォルトでオフ

私たちはミラーカーソルをオプトイン方式にしました。今後の イテレーションでは、この機能をより理解しやすくし、より多くの言語で使用できるようにするために、その実装を改善し続けます。 機能をより理解しやすくし、より多くの言語で利用できるようにするために、その実装を改善し続けます。 この機能を使用するには html.mirrorCursorOnMatchingTag .


下のJerryGoyalさんの回答(upvotedしました)に感謝します - この継続的な回答を続けています。

私が半年以上にわたってこれを追跡しているため、v1.44 では、これをもう一度改名しました。 以下から 同期されたリージョン :

同期されたリージョン

昨年 11 月に導入されたミラー カーソル機能を改良し、Synced Regions と呼ばれる新しい実装を導入しました。 を、Synced Regions と呼ばれる新しい実装で改良しました。現在、この この機能は HTML で利用可能で、次のいずれかの方法で試すことができます。 以下のいずれかの方法で試すことができます。

コマンドを実行する On Type Rename Symbol をHTMLタグ上で実行する(バインドされるのは デフォルトではCtrl+Shift+F2)。

をオンにすると editor.renameOnType の設定をして、HTMLタグにカーソルを移動させます。

赤いリージョンはSynced Regionsです。その名前が示すように、あるリージョンでの変更は他のリージョンに は他のリージョンに同期されます。このモードを終了するには このモードを終了するには、カーソルをリージョンから移動するか、または ESC . また、空白文字で始まるコンテンツをいずれかの領域で入力または貼り付けると、このモードが終了します。 を押すと、このモードを終了します。

私たちは、JSX などの他の言語でもこの JSX や XML、あるいは TypeScript のローカル変数など、他の言語でもこのリネームオンタイプのエクスペリエンスを利用できるようにする API を提供することを楽しみにしています。 XML、あるいは TypeScript のローカル変数など、他の言語でもこのリネームオンを利用できるようにする API を提供することを期待しています。

最後の部分にあるように、htmlではすぐに動きますが、他の言語では自分で実装する必要があります。 2020年6月現在、私のテストでは、htmlタグを埋め込んだjsxファイルではまだ動作していません。

設定でこれを有効にする必要があります、それは デフォルトではオフ .