web-dev-qa-db-ja.com

タグでのSublime Text 2の折り返しの選択

ST2で、一部のテキストを強調表示して押します alt + shift + w （Windowsの場合）現在の選択を<p></p>タグでラップします。しかし、ラップするwhichタグを指定する方法はありますか？多分私はスパン、または代わりにdivにラップしたいからです。

tagskeyboard-shortcutssublimetext2word-wrap
78
Lars

Emmetを使用して、ラップするタグにカーソルを置き、押します ctrl + w （MacOSの場合）または Alt+Shift+W （Windowsの場合）、ラップするタグのタイプを入力するためのボックスがポップアップ表示されます。

75
Lars

少なくともMac用Sublime Text 3ではEmmetは必要ありません。

Emmetプラグインの有無にかかわらず、カーソルをWordのどこかに置き、 commandd、 押す controlshiftw （Menubar > Edit > Tag > Wrap Selection With Tag）、および現在強調表示されている、デフォルトで生成されたpタグに必要な要素タイプを入力します。

注：MS Windowsでは、ラップするショートカットは altshiftw。

enter image description here

enter image description here

enter image description here

90
jtheletter

単一行

これを変換したい場合

Lorem ipsum dolor sit amet.

これに

<div>Lorem ipsum dolor sit amet.</div>

これを行う：

  • テキストを選択するか、を押します CTRL + L （現在の行を選択します）
  • 押す ALT + SHIFT + W
  • 目的のタグを入力します（デフォルトのpタグが上書きされます）

複数行

これを変換したい場合

Item 1
Item 2
Item 3

これに

<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>

これを行う：

  • テキストを選択するか、を押します CTRL + L 複数回
  • 押す CTRL + SHIFT + L （行ごとに1つの選択を行います）
  • 押す ALT + SHIFT + W
  • 目的のタグを入力します（デフォルトのpタグが上書きされます）

を使用してテキストを選択することもできます SHIFT + MOUSE RIGHT BUTTON、この場合は2番目の手順をスキップできます。

Emmetの使用

これを変換したい場合

Item 1
Item 2
Item 3

これに

<nav>
  <ul class="nav">
    <li class="nav-item1"><a href="">Item 1</a></li>
    <li class="nav-item2"><a href="">Item 2</a></li>
    <li class="nav-item3"><a href="">Item 3</a></li>
  </ul>
</nav>

これを行う：

  • テキストを選択
  • 押す SHIFT + CTRL + G （ 略語で囲む ）
  • タイプnav> ul.nav> li.nav-item $ *> a

Macユーザーへの注意：

ALT + SHIFT + W = CTRL + SHIFT + W

CTRL + SHIFT + L = CMD + SHIFT + L

20
Gustavo

たとえば、カスタムタグを作成して、spanタグを挿入します。アプリメニューTools > New Snippet ...に移動し、以下のスニペットをウィンドウにコピーします。

<snippet>
    <content><![CDATA[
<span style="color:#0000FF">$SELECTION$1</span>
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>span</tabTrigger>
    <description>HTML - span - color - blue</description>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>source.html</scope>
</snippet>

...次に、スニペットをファイルに保存します。 html-span--color名前とそのスニペットをPreferences > Key Bindings-Userのキーの組み合わせにバインドし、新しいキーエントリを作成します。次に例を示します。

{ "keys": ["alt+shift+c"], "command": "insert_snippet", "args": { "name": "Packages/User/html-span--color.sublime-snippet" } }

スニペットの場所はPackages/User/ディレクトリであると想定されています。

次に、spanタグで囲む必要があるテキストを選択して、 Alt+Shift+c または「span」と入力して押します Tab、カーソルがタグ内の必要な位置に設定されます。テキストを入力するだけです。

Ubuntu LinuxでSublime Text 3を使用してスニペットとキーバインディングをテストしました。

5
Vladimir S.

答えはすべて良いです。カスタマイズ用のキーバインディングは次のとおりです。

In Preference：Key Bindings-Default：

{ 
  "keys": ["ctrl+shift+w"], "command": "insert_snippet", 
  "args": { "name": "Packages/XML/long-tag.sublime-snippet" } 
}

Emmetがある場合、emmetバージョンは

{ "keys": ["super+shift+w"], "command": "wrap_as_you_type"}

設定：キーバインディング-ユーザー好みに合わせて編集し、

5
Phillip Chan

sublime text3での作業を楽にするために：これらのいずれかを入力します（p、h1、div、header、footer、title ... ）を押してTabたとえば、必要な場合div divとヒットTab

1
mwangaben

sT2で、括弧なしでタグを入力し、Tabを押します。自動的に開始タグと終了タグを提供します

0
user4918206