Plugins que todo desarrollador web debe tener en SublimeText.
Sublime Text es uno de los editores más populares dentro
de los desarrolladores, ya que podemos instalar plugins que nos facilitan la
escritura de código y esto es a través del módulo Package Control, por ejemplo con una simple línea y utilizando la
tecla de tabular podemos generar un gran bloque de código.
Con esta simple línea de código generamos nuestra
estructura principal para una plantilla de HTML5 utilizando Emmet. https://emmet.io
El resultado seria el siguiente.
Al igual que este podemos instalar
muchos mas, como colores, identar código, limites de llaves, clases de bootstrap,
entre otros mas…
Si aun no tienen SublimeText
instalado, lo pueden descargar desde este sitio.
Una vez que tengamos instalado el
editor ahora si veamos como instalar estos plugins.
Lo primero que tenemos que hacer es
instalar Package Control, vamos a este sitio https://packagecontrol.io/installation
Una vez estando aquí vamos a copiar
el código dependiendo
de nuestra versión de SublimeText, en este caso yo tengo la versión 3 doy clic en la
pestaña que dice
SUBLIME TEXT 3 y copio este código.
Teniendo copiado este código vamos al editor
lo tendremos que pegar en la terminar, para esto vamos en View>Show Console
En esta parte pegamos el código y damos un ENTER
Con esto ya tendremos instalado
Package Control y así mismo ya podemos instalar los demás plugins.
Emmet: automatiza la
creación de bloques de etiquetas HTML utilizando
abreviaciones.
Dentro del editor precionamos las teclas [cmd +
shift + p] en mac o [ctrl + shift + p] en Windows se nos abrirá
una ventana y ahí tecleamos install package, lo
elegimos con las teclas de desplazamiento [arriba o abajo] y damos un enter.
Una vez seleccionado install package saldrá
otra ventana donde tecleamos la Emmet y a ligual que el anterior solo damos un
enter para elegir pueden ver el progreso de la instalación
en la parte inferior del editor, y así mismo podemos instalar muchos
mas plugin.
Les dejo una lista de los plugins que deberíamos
tener dentro de nuestro editor:
HTML-CSS-JS Prettify: Package que se encarga de identar nuestro código. Soporta
HTML, CSS y JavaScript.
Color Highlighter: Este package permite ver los colores que hemos elegido en las CSS.
ColorPicker: También podemos obtener una paleta de colores con las teclas de [cmd + shift + c] en mac o [ctrl + shit + c] en windows.
BracketHighlighter: Se encarga de destacar los límites de cada pareja de llaves.
Terminal: Permite abrir una ventana de terminal en la misma carpeta en donde se encuentra el fichero con el que estás trabajando.
Bootstrap 4 Snippets: Este es para completar código para bootstrap y así ahorrar el escribir el código todo por nosotros.
LiveReload: para ver los cambios automáticamente dentro de nuestro navegador. Para esto debemos de instalar una extensión que se llama LiveReload y asi sincronizar nuestro proyecto con el navegador.
Color Highlighter: Este package permite ver los colores que hemos elegido en las CSS.
ColorPicker: También podemos obtener una paleta de colores con las teclas de [cmd + shift + c] en mac o [ctrl + shit + c] en windows.
BracketHighlighter: Se encarga de destacar los límites de cada pareja de llaves.
Terminal: Permite abrir una ventana de terminal en la misma carpeta en donde se encuentra el fichero con el que estás trabajando.
Bootstrap 4 Snippets: Este es para completar código para bootstrap y así ahorrar el escribir el código todo por nosotros.
LiveReload: para ver los cambios automáticamente dentro de nuestro navegador. Para esto debemos de instalar una extensión que se llama LiveReload y asi sincronizar nuestro proyecto con el navegador.
LiveReload Firefox: aquí
LiveReliad Chrome: aquí
Nota: Para poder utilizar los plugins que hemos
instalado tendremos que reiniciar nuestro editor.
Fuente: aqui
Comentarios
Publicar un comentario