{"id":792,"date":"2016-08-31T10:41:43","date_gmt":"2016-08-31T15:41:43","guid":{"rendered":"http:\/\/naps.com.mx\/blog\/?p=792"},"modified":"2017-11-16T12:13:44","modified_gmt":"2017-11-16T18:13:44","slug":"instalar-y-preparar-sublime-text-para-programacion-web","status":"publish","type":"post","link":"https:\/\/naps.com.mx\/blog\/instalar-y-preparar-sublime-text-para-programacion-web\/","title":{"rendered":"Instalar y preparar Sublime Text para Programaci\u00f3n Web"},"content":{"rendered":"

Sublime Text es un excelente editor de c\u00f3digo multiplataforma que soporta una gran cantidad de lenguajes de programaci\u00f3n. Veamos c\u00f3mo\u00a0instalar algunos complementos \u00fatiles a fin de optimizar nuestro trabajo para programaci\u00f3n web.<\/span><\/p>\n

\"sublime<\/a><\/p>\n

<\/p>\n

Se distribuye de forma gratuita, pero no es software libre.\u00a0<\/span>Tiene algunas caracter\u00edsticas muy \u00fatiles a la hora de programar como el minimapa (una vista en miniatura de todo nuestro c\u00f3digo estrat\u00e9gicamente colocado a la derecha), la multiselecci\u00f3n y el multicursor y lo mejor: soporte para snippets y pluggins de los cuales hay una amplia variedad para personalizar a\u00fan mejor el editor.<\/span><\/p>\n

 <\/p>\n

Para instalar Sublime Text<\/span><\/h2>\n

Ve al sitio de descargas de Sublime Text: <\/span>https:\/\/www.sublimetext.com\/3<\/span><\/a><\/p>\n

Selecciona tu sistema operativo y versi\u00f3n que mejor se ajuste a la plataforma en la que lo vas a utilizar.<\/span><\/p>\n

Una vez descargado, inst\u00e1lalo siguiendo los pasos del asistente.<\/span><\/p>\n

 <\/p>\n

Preparar Sublime Text para Programaci\u00f3n Web<\/span><\/h2>\n

Tal como viene de paquete, Sublime Text ya es muy \u00fatil para escribir c\u00f3digo y programar. Pero puede funcionar a\u00fan mejor. <\/span><\/p>\n

Instala Package Control<\/span><\/h3>\n

Package Control es un gestor de paquetes. Sirve para descubrir, instalar y actualizar paquetes con nuevas funciones para el editor. Este es un paso previo que nos permitir\u00e1 encontrar muchas funcionalidades que nos permitir\u00e1n preparar Sublime Text para programaci\u00f3n web.<\/span><\/p>\n

Vaya a la p\u00e1gina de instalaci\u00f3n de Package Control: <\/span>https:\/\/packagecontrol.io\/installation<\/span><\/a><\/p>\n

\"Instalaci\u00f3n<\/a>

Instalaci\u00f3n de Package Control<\/p><\/div>\n

Las instrucciones piden que copiemos el texto que all\u00ed nos proporcionan y lo peguemos en la consola de Sublime Text. Para hacer esto, desde Sublime Text abrimos el men\u00fa View<\/strong> y la opci\u00f3n Show Console<\/strong>. En el campo de texto que se abre, pegamos el c\u00f3digo que copiamos y pulsamos Enter. Nos mostrar\u00e1 un mensaje como el siguiente:<\/span><\/p>\n

\"Sublime<\/a><\/p>\n

Nos\u00a0confirma que Package Control ha sido instalado en Sublime Text.<\/p>\n

 <\/p>\n

Instala Emmet <\/span><\/h3>\n

Emmet nos permite crear bloques de etiquetas HTML utilizando una sintaxis abreviada. <\/span><\/p>\n

Estando en Sublime Text pulsa Ctrl + Shift + P<\/span><\/p>\n

En el cuadro escribe install package<\/span><\/p>\n

A continuaci\u00f3n buscamos Emmet<\/span><\/p>\n

\"Instalaci\u00f3n<\/a>

Instalaci\u00f3n de Emmet<\/p><\/div>\n

Seleccionamos la primera opci\u00f3n Emmet y listo.<\/span><\/p>\n

Reinicia Sublime Text para que todo funcione correctamente.<\/span><\/p>\n

Ya puedes utilizar toda la funcionalidad de Emmet, por ejemplo si escribes<\/span><\/p>\n

html>(head>title)+body<\/pre>\n
y pulsas TAB<\/span><\/p>\n
te generar\u00e1 el c\u00f3digo siguiente<\/span><\/p>\n
<html>\r\n\r\n<head>\r\n\r\n<title><\/title>\r\n\r\n<\/head>\r\n\r\n<body>\r\n\r\n<\/body>\r\n\r\n<\/html><\/pre>\n
Como puedes ver, evitamos escribir mucho c\u00f3digo.<\/span><\/p>\n
Otro ejemplo:\u00a0Esta l\u00ednea nos evita tener que copiar, pegar y editar muchas veces una lista.<\/span><\/p>\n
ul>(li>a[href=\"pagina$.html\"]{item$})*5<\/pre>\n
Que genera:<\/span><\/p>\n
<ul>\r\n\r\n<li><a href=\"pagina1.html\">item1<\/a><\/li>\r\n\r\n<li><a href=\"pagina2.html\">item2<\/a><\/li>\r\n\r\n<li><a href=\"pagina3.html\">item3<\/a><\/li>\r\n\r\n<li><a href=\"pagina4.html\">item4<\/a><\/li>\r\n\r\n<li><a href=\"pagina5.html\">item5<\/a><\/li>\r\n\r\n<\/ul><\/pre>\n
Entender la sintaxis de Emmet es muy intuitivo y eleva mucho nuestra productividad.<\/span><\/p>\n
Color Hightlighter<\/span><\/h3>\n
Nos permite disponer de un preview del color que estamos codificado. As\u00ed, si escribimos el c\u00f3digo #ffb400, el pluging nos muestra directa e inmediatamente el color en la pantalla. <\/span><\/p>\n
\"Color<\/a>
Color Hightlighter<\/p><\/div>\n
ColorPicker<\/span><\/h3>\n
Nos permite abrir una ventana para seleccionar un color. Esto es posible con m\u00faltiples y diversas aplicaciones, pero si deseamos hacerlo desde Sublime Text necesitamos un plugin como ColorPicker.<\/span><\/p>\n
\"Color<\/a>
Color Picker<\/p><\/div>\n
Alignment<\/span><\/h3>\n
Este plugin es sencillo pero muy valioso, pues nos permite mantener el c\u00f3digo fuente de nuestra aplicaci\u00f3n siempre legible. Por ejemplo, si tenemos el siguiente c\u00f3digo:<\/span><\/p>\n
\"Sublime<\/a><\/p>\n
y pulsamos Ctrl-Alt-A, obtenemos esto:<\/span><\/p>\n
\"Sublime<\/a><\/p>\n
Jquery<\/span><\/h3>\n
Nos permite autocompletar, y nos ayuda con las funciones y m\u00e9todos propios de jQuery, adem\u00e1s de que colorear de acuerdo con la sintaxis.<\/span><\/p>\n
Otras funciones interesantes de Sublime Text<\/span><\/h2>\n
Checa estas otras funciones que te permitir\u00e1n escribir c\u00f3digo\u00a0de forma m\u00e1s r\u00e1pida y m\u00e1s f\u00e1cilmente.<\/p>\n
Ctrl+Espacio. Abre un recuadro con opciones de texto relacionadas al c\u00f3digo que estamos escribiendo. Si ya tenemos algo parcialmente tecleado, lo termina de escribir.<\/span><\/p>\n
Ctrl+N. Crea un nuevo documento.<\/span><\/p>\n
Ctrl-S. Guarda el documento actual.<\/span><\/p>\n
Alt+1, Alt+2, etc. Nos lleva directamente al documento 1, 2, etc.<\/span><\/p>\n
Ctrl-RePag, Ctrl+AvPag. Nos lleva a la pesta\u00f1a anterior y siguiente. <\/span><\/p>\n
Alt+Shift+2, Alt+Shift+3, etc. Nos permite dividir la pantalla para ver dos, o tres documentos.<\/span><\/p>\n
Ctrl+Shift+2, Ctrl+Shift+2, etc. Abre el documento que est\u00e1 siendo actualmente utilizado en la secci\u00f3n 2 o 3, cuando tenemos la pantalla dividida.<\/span><\/p>\n
Shift+F11. Entra en \u201cmodo sin distracci\u00f3n\u201d. Oculta los men\u00fas, barras y paletas. Es diferente de F11 (pantalla completa) que deja la barra de estado y las pesta\u00f1as.<\/span><\/p>\n
Ctrl+Click. Funci\u00f3n multicursor. Permite escribir en varios sitios a la vez.<\/span><\/p>\n
Ctrl+D. Marca todas las apariciones de la palabra actualmente seleccionada. Si pulsamos repetidamente Ctrl+D se van seleccionando una a una y es posible editarlas con el multicursor.<\/span><\/p>\n
 <\/p>\n
Com\u00e9ntanos qu\u00e9 otras funcionalidades de Sublime Text te han gustado.<\/span><\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Sublime Text es un excelente editor de c\u00f3digo multiplataforma que soporta una gran cantidad de lenguajes de programaci\u00f3n. Veamos c\u00f3mo\u00a0instalar algunos complementos \u00fatiles a fin de optimizar nuestro trabajo para programaci\u00f3n web.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"amp_status":"","footnotes":""},"categories":[171],"tags":[173,174,172],"class_list":["post-792","post","type-post","status-publish","format-standard","hentry","category-programacion-web","tag-emmet","tag-package-control","tag-sublime-text"],"_links":{"self":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/792","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/comments?post=792"}],"version-history":[{"count":5,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/792\/revisions"}],"predecessor-version":[{"id":805,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/posts\/792\/revisions\/805"}],"wp:attachment":[{"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/media?parent=792"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/categories?post=792"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/naps.com.mx\/blog\/wp-json\/wp\/v2\/tags?post=792"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}