Transcription
Tutorial completode instalación y configuración deSublime Text 3
Índice decontenidos1IntroducciónPágina 35InstalaciónPágina 92¿Qué es Sublime Text 3?Página 56Utilidades y atajosPágina 113CaracterísticasPágina 77PluginsPágina 13
1 IntroducciónEn este tutorial hablaremosde uno de los editores máscompletos y utilizados delmercado ahora mismo por losque se dedican al desarrollo,sobre todo al desarrollo web.Hablamos de Sublime Text 3.Repararemos en sus características, veremos comoinstalarlo en diferentes entornos de trabajo así comosus múltiples posibilidades para trabajar con él endistintos ámbitos. También repasamos unos comandosbásicos que nos ayudarán a trabajar de forma más ágilcon este magnífico editor de texto.Página 3
Tutorial completode instalación y configuración dede Sublime Text 3
2 ¿Qué esSublime Text 3?Sublime Text 3 es un editor detexto multiplataforma escrito enC y basado en el clásico Vim.Aunque es gratuito y totalmentefuncional, no se trata de unsoftware de código abierto, sinoque te proporciona una licenciaperpetua para usarlo sin fin.Está preparado para editar archivos de infinidad delenguajes, desde Go a Java pasando por Python, C,etc Aunque es comúnmente utilizado para desarrolloweb, es decir, para la edición de ficheros HTML, CSS yJavascript.Página 5
Tutorial completode instalación y configuración dede Sublime Text 3
3 CaracterísticasLas principales características que convierten en taninteresante a este editor de texto son las siguientes: Soporta nativamente una gran cantidad de lenguajes(hasta 43) así como el texto plano. Posee una funcionalidad de búsqueda dinámica con laque se pueden llevar a cabo búsquedas por expresionesregulares dentro de los archivos y proyectos. Tiene autocompletado de palabras y expresiones asícomo marcado de llaves, lo que permite abrir bloquesde una manera muy ágil y sencilla. Instalación de plugins para ampliar su funcionalidad. Soporte de pestañas. Se pueden abrir tantosdocumentos como se necesite en varias pestañas. Minimapa que permite previsualizar de forma generalel código escrito.Página 7
Tutorial completode instalación y configuración dede Sublime Text 3
4 InstalaciónEn este punto vamos a mostrar que tenemos que hacerpara instalar Sublime Text 3 en nuestro ordenador deforma sencilla.Solo tenemos que irnos a la página oficial del programa:http://www.sublimetext.com/En el menú de la parte superior tenemos la opciónDownload. Pinchamos ahí.Una vez en la pagina de descargar, solo tenemos queelegir la opción que queramos, Windows o Mac.Una vez instalado abrimos un terminal y ejecutamos elsiguiente comando:subl --versionSi está instalado correctamente debería salirnos algoparecido a lo siguiente:subl --versionSublime Text Build 3476En ambos casos se descargargará un archivo ejecutableque tendremos que abrir y llevar a cabo la instalación.En el caso de Linux, la instalación hay que llevarla acabo por consola. La opción más común es usando apt.En ese caso, solo tendremos que ejecutar los siguientescomandos.Sublimewget -qO - https://download.sublimetext.com/sublimehq-pub.gpg sudo apt-key addsudo apt-get install apt-transport-httpsecho “deb https://download.sublimetext.com/ apt/stable/” sudo tee/etc/apt/sources.list.d/sublime-text.listsudo apt-get updatesudo apt-get install sublime-textPágina 9
Tutorial completode instalación y configuración dede Sublime Text 3
5 Utilidadesy atajosUna de las principales cualidades de Sublime Text 3 esque te permite trabajar de una manera muy cómoda conlos llamados workspaces o entornos de trabajo. Cuandoestamos trabajando en un proyecto nos gusta tenertodo accesible fácil y rápidamente y eso no compatiblecon tener que estar yendo al sistema de archivos cadavez que queremos abrir uno diferente. Por eso Sublimete permite abrir carpetas,en este caso donde tengas elproyecto para trabajar con ello.Para ello simplemente hay que irse al menú superior,en la parte izquierda ala apartado File (o Archivo) yseleccionar la opción Open Folder (o Abrir Carpeta).Una vez seleccionemos la carpeta de nuestro proyectotendremos las subcarpetas y archivos accesibles en formade árbol en la parte izquierda de la pantalla facilitandonosel trabajo.Otra cosa que nos hace la vida más fácil a la hora detrabajar con una herramienta son sus atajos de teclado.Estos son los más interesantes que Sublime proporciona.(Para Mac, Ctrl )Pestañas y ventanasCambio entre pestañas: Ctrl 1,2,3 o Ctrl TabNueva pestaña: Ctrl NNueva ventana: Ctrl Shift NProyectosAbrir archivo: Ctrl PPaleta de comandos: Ctrl Shift PVer u ocultar barra lateral: Ctrl KBSalto de líneas: Ctrl Shift EnterDividir el código en pestañas diferentes: Alt Shift 1,2,3 SelecciónSeleccionar palabras: Ctrl DSeleccionar línea: Ctrl LSeleccionar todo: Ctrl ASeleccionar contenido dentro de dos llaves: Ctrl Shift MSelección múltiple para tener varios punteros en variossitios a la vez: Ctrl clickBúsquedasBúsqueda simple: Ctrl FBúsqueda avanzada: Ctrl Shift FBúsqueda de funciones en nuestro código: Ctrl Shift RManipulación de textoTexto en mayúsculas: Ctrl KUTexto en minúsculas: Ctrl KLReemplazar texto: Ctrl Shift FIndentaciónIndentación múltiple: TabIndentación múltiple con retroceso: Ctrl TabPágina 11
Tutorial completode instalación y configuración dede Sublime Text 3
6 PluginsPara acabar con esta guía hablaremos de las posibilidadesque existen para ampliar la funcionalidad de SublimeText a través de plugins. Los plugin nos ayudan a añadirfunciones extra para poder cubrir nuestras necesidades.Para poder hacerlo, primero debemos instalar PackageControl. Para ello debemos seguir los siguientes pasos:1. Vamos a la pagina oficial (https://packagecontrol.io/installation), seleccionamos nuestra versión de Sublime(en este caso la 3) y copiamos el código.2. Abrimos Sublime, pulsamos en View Show console3. Pegamos el código. Una vez hecho esto comenzará lainstalación.Ahora para finalizar enumeraremos unos cuantos pluginsque son bastante útiles para desarrolladores: Sidebar Enhancements: Amplía las opciones de gestiónde archivos de la barra lateral. Color Highlighter: Permite ver los colores que elijamosen las etiquetas CSS. Bracket Highlighter: Resalta las etiquetas de apertura ycierre para mejorar la lectura de código. SFTP: Actualiza los archivos en el servidor simplementecon guardar el archivo. LiveReload: Actualiza los cambios del archivo en elnavegador al guardarlo.Una vez instalado el package control podremos instalarplugins siguiendo los siguientes pasos: DocBlockr: Permite insertar fácilmente comentariospara documentación con soporte para Php, Java, etc.1. Hacemos click en Preferences Package Controlo pulsar Control Shift P jQuery: Nos da sugerencias de métodos al escribircódigo jQuery.2. Escribimos install y seleccionamos la opción installpackage. SublimeCodeIntel: Autocompleta el código y reconocelas funciones de nuestro proyecto.3. En el recuadro escribimos el nombre del plugin ainstalar y a los pocos segundo estará listo. Alignment: Alinea y organiza todas las variablesseleccionando y presionando Ctrl Alt a4. Reiniciamos Sublime Text para que los cambiosfuncionen correctamente.Página 13
¿Quieres convertirte enFrontend Developer Profesional?Aprende ahora con los mejores expertosCARRERAFRONTEND DEVELOPER WEBCOMENZAR CARRERA AHORA¡Si te ha resultado útil,comparte en redes sociales!Más en openwebinars.net
3.En el recuadro escribimos el nombre del plugin a instalar y a los pocos segundo estará listo. 4.Reiniciamos Sublime Text para que los cambios funcionen correctamente. Ahora para finalizar enumeraremos unos cuantos plugins que son bastante útiles para desarrollador
