Sublime Text 2 envolviendo la selección en la etiqueta

78

En ST2, resaltar un poco de texto y presionar alt+ shift+ w(en Windows) ajustará la selección actual en <p></p>etiquetas. Pero, ¿hay alguna manera de especificar con qué etiqueta envolver? Porque tal vez quiera envolver en un lapso, o un div en su lugar.

Lars
fuente
@Chef Gracias, eso está hecho. Agregué esto como respuesta a continuación.
Lars
@Chef debería ser el que agregue la respuesta.
AGS
6
Emmet funciona, pero solo como una nota adicional. Creo que la ctrl+shift+wencuadernación simplemente inserta un fragmento. Luego coloca los cursores dentro de las etiquetas creadas. Debería poder ingresar cualquier contenido arbitrario para la etiqueta desde allí.
skuroda
3
El valor predeterminado es Alt+ Shift+ wpara envolver etiquetas. Su acceso directo cierra toda la ventana con todas las pestañas en Windows. Perdí toda la capacidad de deshacer para probar eso.
usuario

Respuestas:

78

Con Emmet, coloque el cursor en la etiqueta que desea envolver y presione ctrl+ w(para MacOS) o Alt+ Shift+ W(para Windows), aparecerá un cuadro para ingresar el tipo de etiqueta con la que desea envolver.

Lars
fuente
10
¿Estás en Windows? Prueba Alt-Shift-W. En Windows, ctrl + w es un atajo para cerrar pestaña.
Lars
21
Si está utilizando texto sublime en Windows con el paquete Emmet instalado, debe usar Shift + Ctrl + G
am_
6
en Sublime Text 3 funcionó con CTRL + SHIFT + G así como con ALT + SHIFT + W
Mik
4
Emmet no es necesario para esto.
shivams
3
Emmet es genial. Me encanta, pero no lo necesitas para esta función. Vea la respuesta de @ janaspage en esta página.
sugardaddy
23

Linea sola

Si quieres convertir esto

Lorem ipsum dolor sit amet.

a esto

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

hacer esto:

  • Seleccione el texto o presione CTRL+ L(seleccionará la línea actual)
  • Presione ALT+ SHIFT+W
  • Escriba la etiqueta deseada (sobrescribirá la etiqueta p predeterminada)

Varias líneas

Si quieres convertir esto

Item 1
Item 2
Item 3

a esto

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

hacer esto:

  • Seleccione el texto o presione CTRL+ Lvarias veces
  • Presione CTRL+ SHIFT+ L(hará una selección por línea)
  • Presione ALT+ SHIFT+W
  • Escriba la etiqueta deseada (sobrescribirá la etiqueta p predeterminada)

También puede seleccionar el texto con SHIFT+ MOUSE RIGHT BUTTONy, en este caso, puede omitir el segundo paso.

Usando Emmet

Si quieres convertir esto

Item 1
Item 2
Item 3

a esto

<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>

hacer esto:

Nota para usuarios de Mac:

ALT+ SHIFT+ W= CTRL+ SHIFT+W

CTRL+ SHIFT+ L= CMD+ SHIFT+L

Gustavo
fuente
Guau. Esta es una respuesta mucho mejor :)
shivams
5

Cree un fragmento personalizado, por ejemplo, para insertar una etiqueta de intervalo. Vaya al menú de la aplicación: Tools > New Snippet ...y copie en la ventana el siguiente fragmento:

<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>

... luego guarde el fragmento en un archivo con, por ejemplo, html-span--colornombre y vincule ese fragmento a una combinación de teclas Preferences > Key Bindings-User, creando una nueva entrada de clave, por ejemplo:

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

Se supone que una ubicación del fragmento es Packages/User/directorio.

Ahora seleccione cualquier texto que necesite ajustar en la etiqueta span y presione Alt+ Shift+ co escriba 'span', presione Tab, un cursor se colocará en la posición requerida dentro de la etiqueta, simplemente escriba su texto.

Probé con éxito el fragmento y el enlace de teclas con Sublime Text 3 en Ubuntu Linux.

Vladimir S.
fuente
1
Esto parece haberse movido en SublimeText3: ahora está atrasadoTools > Developer > New Snippet...
Paul Sturm
5

Todas las respuestas son buenas. Aquí es donde se encuentran las combinaciones de teclas para personalizar:

En preferencia: combinaciones de teclas - Predeterminado :

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

Si tiene Emmet, la versión de emmet es

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

Edítelos en Preferencias: Combinaciones de teclas - Usuario a su gusto,

Phillip Chan
fuente
1

para facilitarle la vida mientras está en Sublime text3: escriba cualquiera de estos ( p, h1, div, encabezado, pie de página, título ...) y presione Tab, por ejemplo, si desea div Simplemente escriba div y presione Tab

mwangaben
fuente
1
Esto realmente no ayuda en este caso porque el OP está hablando de envolver el texto existente en una etiqueta, no comenzar desde cero.
sugardaddy
0

en ST2 escriba una etiqueta sin corchetes y presione Tab. Te dará automáticamente una etiqueta abierta y cerrada


fuente
Bienvenido a SO y gracias por responder una pregunta. ¿Podría proporcionar más contexto para su respuesta? Además, se pueden encontrar más sugerencias en el Centro de ayuda .
Richard Erickson
-5

Este sistema de inserción de fragmentos es muy engorroso en comparación con el mecanismo proporcionado en Dreamweaver. En ese caso, crea un fragmento de cualquier tipo. Se almacena en una biblioteca en RAM y se muestra en una estructura de estilo de directorio. Usted declara si el fragmento es de tipo INSERT (en la posición del cursor) o de tipo SPAN (abarcan el texto seleccionado). En el primer caso, se inserta el fragmento completo. En el segundo caso, el fragmento se crea con una parte "antes" y una parte "después". Normalmente, la parte "después" es solo la etiqueta de cierre. Para usar el modo INSERT HERE, coloque el cursor, haga doble clic en el fragmento de la biblioteca y lo inserte en la posición del cursor. Para usar el modo SPAN SELECTED TEXT, resalte el texto que desee y haga doble clic en el fragmento de la biblioteca. El texto seleccionado está rodeado por el "antes" y partes "posteriores" del fragmento. Esto es muy intuitivo, fácil de usar y permite al usuario crear tipos ilimitados de fragmentos que pueden abarcar texto seleccionado. ¿ALGÚN PROGRAMADOR MUY INTELIGENTE CONSTRUYE UNA EXTENSIÓN COMO ESTA PARA SUBLIME 3? Nota: En comparación, Bracket Highlighter es un complemento Sublime con una función de envoltura que parecería tener esa funcionalidad, pero si se examina de cerca es demasiado engorroso de usar si desea crear una biblioteca de fragmentos eficiente sobre la marcha. Gracias, Peter Rosti Bracket Highlighter es un complemento Sublime con una función de envoltura que parece tener esa funcionalidad, pero si se examina de cerca es demasiado engorroso de usar si desea crear una biblioteca de fragmentos eficiente sobre la marcha. Gracias, Peter Rosti Bracket Highlighter es un complemento Sublime con una función de envoltura que parece tener esa funcionalidad, pero si se examina de cerca es demasiado engorroso de usar si desea crear una biblioteca de fragmentos eficiente sobre la marcha. Gracias, Peter Rosti

Peter R
fuente