Você está na página 1de 9

28/10/12

Gua definitiva Sublime Text 2

Home

Sobre mi

Blog

Roxana Falasco
RecursosytutorialessobredesarrollofrontendHTML5
GuadefinitivaSublimeText2 Gua definitiva Sublime Text 2 Publicadoel23/07/2012 Losquemeconocensabenquedesdesiemprehesido unafieldefensorayseguidora,ocomodicenalgunos "evangelizadora"deEclipse,desdeelmomentoenelque empecadedicarmeprofesionalmentealdesarrolloweb comencconEclipse,peroamedidaquepasabanlos aoscadavezeramsdifcilrecomendaresta herramientadebidoasusconstantescuelgues,lentituda lahoradecargarproyectos,refrescarelrboldetrabajo, etc... Unda,haraproximadamenteunao,escuchandoun webcastsobredesarrolloweboquerecomendaban utilizaruneditorllamado"SublimeText",alprincipiopens nopuedesertanbuenocomomiEclipse!,elcualme habaacompaadoalolargodeestosaostantoenel trabajocomoencasa. Finalmenteundaeneltrabajo,volvaacolgarseEclipse alrealizarunrefreshdeunproyectocontropecientosmil archivos...recordporunmomentoaquellaherramienta delaquetodoshablabanllamada...SublimeText. Alllegaracasa,mepusemanosalaobra,busquenGoogle"Sublimetext2",medescargueleditory ....yahoraqu?pens,nohabanadadeinformacinencastellanoyeninglseranpocaslaswebs quecomentasentemasdeconfiguracin,cambiaratajosdeteclado,personalizacin,etc,etc. PocoapocofuiaprendiendodondeestabanlascosasenSublimeyconfigurandoeleditoramigusto. Evangelicamiscompaerosdetrabajoyahoratodomiequipoaguardadoenelbaldelosrecuerdos aEclipseyhandadolabienvenidaaSublimeText2,uneditorligero,rpidoy"fcilmenteconfigurable", lodigoentrecomillas,porquerealmentesinosabesdondeestnlascosasesdifcildeentenderyde ahquedespusdemedioaoutilizandoSublimeText,ansiguesinhaberunaguaclaraydetallada encastellanoparalosnovatosqueseincorporantantoendesarrollowebcomoaprofesionalesdel sectorquequierenpasarseaesteeditor,esporesoquemehedecididoacrearestaguadefinitivade SublimeText2. Repartidaenvarioscaptulosintentarexplicardetalladamenteypasoapaso,desdelainstalacinhasta lacreacindesnippets,paraquettambinpuedasdisfrutardelascomodidadesdeSublimeText2el mejoreditorparadesarrollowebqueheutilizado. Comencemos!)

Buscarentodoelblog
Buscar

Sgueme
Seguira@linuxera 260seguidores

Artculos
SublimeText2CheatSheet ComocreariconosWebfontcon icoMoon GuadefinitivaSublimeText2 HTML5SEO SublimeText2Snippets

falasco.org/guia-definitiva-sublime-text-2

1/9

28/10/12

Gua definitiva Sublime Text 2

DescargarSublimeText2
SublimeText2estdisponibleparaWindows,OSXyLinuxylopuedesdescargardeformagratuitaen supginaoficialyutilizarloeltiempoquedesees. Sidespusdeleerestaguateheconvencidoparautilizarestefantsticoeditoryquierescolaborarcon susdesarrolladores,puedesadquirirunalicenciaporslo59$,lacualtedarderechoalainstalacin deSublimeenmltiplesordenadoresyaactualizacionesilimitadas.

Caractersticasbsicas
SublimeText2sepuedepersonalizarcompletamente,disponedemultituddepluginsgratuitosque puedesdescargaryutilizar.Nadamsabrirelprogramaversunainterfazminimalista,enelcentrose encuentraelcdigo,alaizquierdaunabarralateraldondepodrsverlosarchivosabiertos,entreotras cosasqueexplicarmsadelanteyalaizquierdaunabarralateralllamadaminimapadondepondrs vertcdigo,ynavegarconfacilidadporl,desplazndotealpuntoexactodondequieresirsin necesidaddeutilizarelscroll.

SublimeText2Primerospasos
Labarralateraldelaizquierda,llamadaSideBar(paraocultarlaomostrarlasimplementepulsaCtrl+K+B enWindows/LinuxoCmd+K+BenMac)tepermitevisualizarlosarchivosabiertosactualmente,pero puedesextendersuusoaunexploradordearchivosinstalandoelpluginSideBarEnhancementsdel cualhablarmsadelante. UnadelasopcionesindispensablesylaquedebesaprendertenadamsinstalarSublimeText2es "GotoAnything",quetepermitirlocalizarlosarchivosrpidamente,pruebapulsandoCtrl+Pen Windows/LinuxoCmd+PenMac.Alempezaraescribirunoscuantoscaracteresempezarnafiltrarse aquellosarchivosquecoincidenenparteconelnombrequehasescrito.Siquieresvisualizarsu contenidoniquieratienesqueentrardentrodelarchivoconquetedesplacesconlasflechasdelteclado, obtendrsunavistapreviaeneleditor,cuandoestssegurodequeeseeselarchivoquequieresabrir simplementeclickaopulsa[Enter]sobrel. AdemsGotoAnythingnoslotepermitirlocalizararchivosfcilyrpidamentesinoquetambin podrsdesplazartehastaunalineaalescribir:[Numero],sienlugardelosdospuntosintroduces@ verslosmtodosutilizadosanteriormenteycon#podrsbuscarenelinteriordelfichero. Acontinuacintedejounpardeejemplos,paraqueteseamsfcilrecordarloquehemosaprendido hastaahoradeGotoAnything Ctrl+P,Cmd+P:AbrirGotoAnything

falasco.org/guia-definitiva-sublime-text-2

2/9

28/10/12

Gua definitiva Sublime Text 2

Ctrl+P,Cmd+Pyescribir'#search'Buscardentrodelarchivolapalabra'search"

Ctrl+P,Cmd+Pyescribir'@print'Iralmtodo'print'

Trabajarconproyectos
ParatrabajaranmejorconproyectosenSublimeText2,haydosmaneras: File>Open(Ctrl+P,Cmd+O),deestaformaSublimeText2seiniciarconlacarpetaelegidacomobase paratutrabajo.Deformaquetodasloscomandosejecutadoscomo"GotoAnything"o"Bsqueda Avanzada"serealizarnenbasealacarpetaabierta. Proyectos:existelaposibilidaddecombinarlascarpetasyarchivosenproyectos.Seleccionauna carpetay/oarchivosyseleccionaenelmensuperiorProject>SaveProjectAs... PuedescreartantosproyectoscomonecesitesyparaalternarentreunoyotroslohasdeiraProject>

falasco.org/guia-definitiva-sublime-text-2

3/9

28/10/12
SwitchProjectinWindows...

Gua definitiva Sublime Text 2

Amedidaqueaadas,mscarpetasoarchivosnuevosalproyectoseguardarnautomticamente, inclusolaposicindelcursor.

Gestindeetiquetas
OtrodelospuntosfuertesdeSublimeText2essubuiltin ,unmotordeautocompletadopara etiquetasHTML,CSS,...entreotroslenguajes,quetepermitirdesarrollarsitioswebsms cmodamente.Yaquedisponedeautocerradoyautocompletadodeetiquetas. Porejemplosicreasundocumentonuevodehtmlycomienzasaescribirtextypulsastabulador,el editortecompletarycerrarlaetiqueta.Asmismosiescribes:div.contentypulsastabulador,eleditor escribirporti:<divclass="content"></div>ylomismopasaconlosidentificadores,siescribesdiv#main ypulsastabuladoreleditorescribirporti:<divid="main"></div> Otracaractersticainteresanteesquesinocierraslasetiquetaselautocerradolopuedesrealizarcon Alt+.(Cmd+Alt+.) EnelcasodeCSSesalgoparecido,bastaconempezaraescribirunospocoscaracteresparaqueel editorlosreconozca.Pordefectoyatraealgunospredefinidoscomomtytabuladorparacrearmargin top,ptytabuladorcrearpaddingtop,etc.

PersonalizarSublimeText2
Comoyahaspodidoleerenestagua,SublimeText2eslaherramientaperfectadedesarrollo,nada msinstalarladisponesdemuchasayudasalahoradeprogramar,autocompletado,etc,etc,perosi anasquierespersonalizardetallescomocolores,skins,teclasrpidas...tambinpuedeshacerlo.

CambiarelskinenSublimeText2
PordefectonadamsinstalaryabrirelprogramasemostrarconelskinMonokai,quetienefondo negroconletrasclaras.Siquierescambiardeskinslotienesqueaccedera:Preferences>Color Scheme>yseleccionarunskinhastaencontrarunoqueteguste,yoprefieroutilizarel"MacClassic".S hasprobadotodosyningunoteconvencesiemprepuedesdescargrtemsesquemasdecolorobien crearunopropio(ensiguientescaptulosveremoscomocrearunskinpersonalizado)

PackageControl
UnodelospluginsfundamentalesquehasdeinstalarnadamsabrirSublimeText2esPackage Control. PackageControl,talycomosunombreindicaesungestordepaquetesquetepermiteinstalar fcilmentecientosdeplugins.Adadeelrepositoriodisponedemsde500plugins.Suinstalacines muysencilla,simplementehasdeiralapginadeinstalacindePackageControlcopiarelcomando queapareceremarcadoconfondogris,pegarloenlaconsoladeSublimetext2ypulsarEnter,puedes accederalaConsoladeSublimeTextutilizandoelatajodetecladoCtrl+`oCmd+`siestsenMac,silo prefierespuedesirdirectamentedesdeelmenView>ShowConsole. Unavezcompletadalainstalacin,puedesaccederalPackageControlpulsandoCtrl+Shift+Po Cmd+Shift+P.SiescribesPackagepodrsvertodaslasopcionesdisponiblesdelPackageControl.Para instalarunnuevopaquetedebersseleccionar"InstallaPackage",puedequetardeunossegundos,a continuacintemostrarunalistadetodoslospluginsdisponiblesainstalar(siunodelospluginsyase encuentrainstaladosnotelomostrarenlalistadeinstalacin).Sideseaseliminarunpluginlonico quehasdehaceresseleccionarRemovepackage.

falasco.org/guia-definitiva-sublime-text-2

4/9

28/10/12

Gua definitiva Sublime Text 2

OtropluginindispensableesSideBarEnhancements,quetransformalabarralateral(elSideBarque comentamosanteriormente)enungestordearchivos.Tepermitirrenombrararchivos,duplicarlos, borrarlos,oinclusoabrirlosenotraaplicacin.Suutilizacinesmuysencilla,unavezinstaladoslohas dehacerclickderechosobreunarchivoyescogerlaaccinaaplicar.

SinavegasporlawebdePackageControl,encontrarslalistadepluginsdisponibles.Explicarcadauno deellosaqudaraparacrearunlibrodeSublimeText2,asquecomentaralgunosinteresantesque yotambinutilizo,ysilodeseaspuedesdejaruncomentariosugiriendotemasquetegustaraque trataseenfuturosartculos.

PluginsdeSublimeText2recomendadosparadesarrolloweb
jQuery

falasco.org/guia-definitiva-sublime-text-2

5/9

28/10/12
HTML5 Linter Prefix LESS Git

Gua definitiva Sublime Text 2

Cambiarlaconfiguracingeneralylosatajosdeteclado
EnmianteriorartculorelacionadoconSublimeText2comentabalosatajosdetecladosmsutilizadosy dabalaposibilidaddedescargarunPDF.Esonosignificaquenosepuedanmodificaryadaptaratu gusto.Siporejemploestsacostumbradoautilizarcualquierotroeditordondeparabuscarenvezde Ctrl+FesCtrl+B,puedeseditarcmodamentelosatajosdetecladoyponerlosatugusto,nohaynada queSublimeText2notepermitarealizary/omodificar. Paramodificarunatajodetecladoobienaadirunonuevolonicoquehasdehaceresseleccionarel mensuperior:Preferences>KeyBindingsDefaultoKeyBindingsUser. TerecomiendoquemodifiquesKeyBindingsUser,puedescopiarelcontenidoquequierasmodificar delKeyBindingsDefaultypegarloenKeyBindingsUser,msquenadaporquesiescribeseldel UsuarioyluegonoteconvencesiemprepuedesvolveraldeporDefecto.

Lomismoocurreconlaconfiguracingeneraldelprograma,enSettingsUsersyenSettingsDefault tienesdisponiblelaconfiguracindelprograma.Talycomoterecomendabaanteriormentees convenientequelasmodificacioneslasrealicessobreSettingsUsers.Paralocalizarlaconfiguracin puedesaccederatravsdelmensuperiorenPreferences>SettingsDefaultoSettingsUsers.

Snippets
LlegamosalapartemsinteresantedeSublimeText2losSnippets.

falasco.org/guia-definitiva-sublime-text-2

6/9

28/10/12

Gua definitiva Sublime Text 2

Lossnippetssonpequeosfragmentosdecdigosguardadosenarchivosindividualesquetepermitirn insertardeformafcilyrpidapartesdecdigosimplementeescribiendounapalabraypulsando tabulador,obienasignndoleunacombinacindeteclas. Pordefectoelprogramayacuentaconunoscuantossnippetspordefectoporejemplo"lorem"pruebaa abrirunnuevodocumento(Ctrl+NoCmd+N)yescribirloremyluegotabuladorsencilloverdad?) Lossnippetsademstepermitendefinirlaposicindelcursorcuandoseinsertan,ademsde desplazarteporlasdiferentespartesdefragmentoinsertado,pulsandotabulador. Crearsnippetspuedeserrelativamentesencillotododependedeloquequierasquerealicen.Las posibilidadessoninfinitasyelnicolmiteestuimaginacin.

EnsiguientesartculoshablarsobrelacreacindesnippetsenSublimeText2,aunquetodo dependedelaaceptacinquehayatenidoestagua.Cualquiersugerencia,comentario,...ser bienvenida:)

Twittalo

Megusta

A22personaslesgustaesto.Selprimerodetusamigos.

12

13comments
Leaveamessage...

3Stars

Discussion

Community

AlekseiVillegas 3monthsago

Muybuenaguaseguimosesperandolossnippets,saludos
1

Reply

Share

Selene 2hoursago

Excelenteartculo
0

Reply

Share

LuisGuillermoTrejo 4daysago

Excelente!!!!!!!!
0

Reply

Share

salva 11daysago

Muchasgracias,perotengounaduda...comosepuedeimprimirensublime?. Milgraciasdenuevo.
0

Reply

Share

Suki 12daysago

Muybuenaaportacin,tefelicitoyesperoansiosotunuevoPost,queseguroyateloests picando...Heempezadoconeste"Sublime"prog.acambiodeaparcarDream...Fuecomoun"nosequ",a primeravista...)


0

Reply

Share

AlejandroSanz 15daysago

Enhorabuena,grantrabajo!
0

Reply

Share

Julio 16daysago

falasco.org/guia-definitiva-sublime-text-2

7/9

28/10/12
Julio 16daysago

Gua definitiva Sublime Text 2


Soynovelenelusodesublimetextyyaloempiezoaamarmeencantotuguamuchasgracias
0

Reply

Share

ArturoAgudelo amonthago

MehaparecidounmuybueneditorahoraquetrabajoconHTML5,graciasporlaguia)
0

Reply

Share

Randy amonthago

Megustomucholaguia!!!
0

Reply

Share

JhonnyGil 3monthsago

Graciasporlagua!todomuyclaro!.MemudaSublimeText2hacedosdasyestoy maravillado...
0

Reply

Share

lluispeiro 3monthsago

Muybuenaguaymuchasgracias.
0

Reply

Share

jacobo 3monthsago

Muymuyinteresante,siiiseorita!!sobretodoporuqesepuededecirqueescasilaprimeraguade sublimetextenespaolexplicadacomodiosmanda!!Ymipequeasugerencia...siexplicascomotrabajar enremotoconelplugin"sftp"seragenial!!porqueyoyalointentutilizarperonoloheconseguidoponer enfuncionamientoytodoloqueveporinternetesteningls:(


0

Reply

Share

Gerardo 3monthsago

estamuybuenatuguiayaleinstalealgunospluginsamieditorymevamuybien,solounaduda, sabesalgoacercadelaopcionbuildsystems,leebuscadoynoencuentronadaquemeayude,sequecon estopuedesporejemplocompilarjavayhacercorrerperonoscomoconfigurarloparaesto. Saludos


0

Reply

Share

ArtculosrelacionadosconGuadefinitivaSublimeText2

SublimeText2CheatSheet

falasco.org/guia-definitiva-sublime-text-2

8/9

28/10/12

Gua definitiva Sublime Text 2

2012RoxanaFalasco

falasco.org/guia-definitiva-sublime-text-2

9/9

Você também pode gostar