Plugins para Sublime Text 2(ST2)
SublimeLinter(SL):
Este plugin nos ayuda a detectar errores en el código en tiempo real.
Soporta los siguientes lenguajes:
- CoffeeScript
- CSS
- Java
- Javascript
- Objective-J
- Perl
- PHP
- Python
- Ruby
Para poder instalar SL hay que instalar el "Package Control" que pueden descargar desde la url: http://goo.gl/ygxiE, después de instalarlo, es recomendable reiniciar ST2, abrir la paleta de comandos (Command+Shift+P on OS X, Control+Shift+P on Linux/Windows), en la lista desplegada seleccione "Package Control: Install Package", desplegara una nueva lista con buscador endonde escribiremos "SublimeLinter" y seleccionaremos el correspondiente, en la barra de estado en la parte inferior nos indicara el proceso de la instalación, después de finalizado es recomendable reiniciar el ST2 para que cargue el nuevo plugin, con esto ya queda activado.
SL maneja una configuración de modos que indican el comportamiento de la detección de errores, por defecto los detecta en tiempo real, es posible decirle que los detecte en un tiempo X, o que los detecte al guardar o al abrir el archivo, todas estas configuraciones las podemos ver en detalle en esta url.
El funcionamiento es simple, cada vez que tengamos un error de sintaxis aparecerá resaltado y podremos navegar (OS X: next: Control+Command+E, prev: Control+Command+Shift+E Linux, Windows: next: Control+Alt+E, prev: Control+Alt+Shift+E), entre cada error para ver el tipo de error en la barra de estado.
Este plugin nos da la posibilidad de escribir todo el codigo HTML de una pagina en una sola linea, con un formato abreviado muy parecido al formato CSS, tambien nos da la posibilidad de agregar nuestras lineas CSS de forma abreviada sin necesidad de escribir completamente el CSS. ZC Soporta la gran mayoría de editores de código que podemos encontrar entre estos ST2.
Paleta Zen Coding |
El funcionamiento de ZC es muy sencillo maquetamos nuestro código HTML con el formato ZC y oprimimos (Tab), nos mostrara el código HTML así de sencillo, a continuación algunos ejemplos:
USE:
USE:
USE:
USE:
USE:
USE:
USE:
USE:
USE:
html:5 (tab)
RESULT:
<!DOCTYPE HTML>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
USE:
div (tab)
RESULT:
<div></div>
USE:
<div></div>
USE:
form (tab)
RESULT:
<form action=""></form>
USE:
<form action=""></form>
USE:
p#parrafo (tab)
RESULT:
<p id="parrafo"></p>
USE:
<p id="parrafo"></p>
USE:
p#identificador.escondido (tab)
RESULT:
<p id="identificador" class="escondido"></p>
USE:
<p id="identificador" class="escondido"></p>
USE:
ul>li (tab)
RESULT:
<ul>
<ul>
<li></li>
</ul>
USE:
div+p+section (tab)
RESULT:
<div></div>
<p></p>
<section></section>
USE:
ul>li*10 (tab)
RESULT:
<ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
USE:
ul#nav>li.item*10 (tab)
RESULT:
<ul id="nav">
<ul id="nav">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
USE:
ul>li.item.corrent+li*9 (tab)
RESULT:
<ul>
<li class="item corrent"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
USE:
ul>li.item.corrent+li.item*9 (tab)
RESULT:
<ul>
<li class="item corrent"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
USE:
ul>li.item$*10 (tab)
RESULT:
<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
<li class="item8"></li>
<li class="item9"></li>
<li class="item10"></li>
</ul>
USE:
div#header+div#content+div#footer|c (tab)
RESULT:
/*#header */
<div id="header"></div>
/* /#header */
/* #content */
<div id="content"></div>
/* /#content */
/* #footer */
<div id="footer"></div>
/* /#footer */
- Alinear varias selecciones en la misma columna por espacios Inserción (o fichas)
- Alinear todas las líneas en una selección de varias líneas al mismo nivel de sangría
- Alinear el = por primera vez en cada línea de una selección de varias líneas a la misma columna
Uso:
Realice una selección de varias líneas, o selecciones múltiples
Pulsa las teclas Ctrl + alt + A en Windows y Linux, o Cmd + Ctrl + A en Mac OS X
Cuando se utiliza con una selección de varias líneas, las líneas se sangría consistente en primer lugar. Si las líneas seleccionadas son constantemente sangría, el = por primera vez en cada línea se alineará. El carácter de alinear a los de mediados de la línea de alineación se puede configurar a través de los ajustes.