Apenas comienzas a desarrollar un sitio, la primera herramienta que usarás es un editor de texto, ya sea tan simple como un bloc de notas o un IDE completo.
En este episodio, Addy y Matt miran su colección de complementos para Sublime Text y analizan cómo cada uno de ellos ayuda con su flujo de trabajo.
Control de paquetes
Para obtener los paquetes (o complementos) a los que se hace referencia en el episodio, debes instalar el Control de paquetes; es conveniente y sencillo de instalar, y puedes encontrar instrucciones para hacerlo aquí.
JSHint
JSHint es un linter de JavaScript que examina tu código JavaScript y destaca cualquier posible error o mala práctica.
Por ejemplo, si escribiste mal un nombre de variable por error, como
a continuación, JSHint indicará que nunca se definió fo y que causará un error.
var foo = { bar: 'Hello, World.' };
var msg = fo.bar;
El complemento de JSHint muestra un cuadro amarillo alrededor del texto correspondiente. Si colocas el cursor en ese fragmento de código, aparecerá un mensaje de error en la parte inferior izquierda de Sublime.
Otros problemas que puedes detectar son los siguientes:
- Variables que están definidas, pero que nunca se usan
- Cómo evitar crear funciones dentro de bucles
- Cómo usar los métodos de comparación correctos
Para instalar el paquete SublimeLinter-JSHint, también tendrás que instalar el paquete SublimeLinter y seguir las instrucciones de instalación que se indican en la página del paquete de SublimeLinter-JSHint.
Para algunos desarrolladores, puede ser útil incluir el complemento JSHint Gutter. Coloca un punto pequeño en el margen de cualquier línea con un problema de JSHint.
JSCS
JSCS destacará cualquier lugar en el que tu JavaScript no siga un estilo de codificación específico.
Por ejemplo, se puede usar JSCS para definir si se deben usar espacios después de palabras clave, como “if”, o para definir si las llaves deben estar en la misma línea o en una nueva línea de un método.
El paquete SublimeLinter-JSCS destaca cualquier problema intercalado en un estilo similar al de JSHint, lo que facilita la corrección.
Esto es extremadamente útil cuando se trata de trabajar en un equipo, ya que todos pueden seguir la misma guía de estilo y mantener la coherencia de tu código.
La mejor parte es que, con el paquete JSCS-Formatter, puedes corregir automáticamente cualquier problema en la página presionando ctrl + shift + p, escribiendo “JSCS Formatter: Format this file” y presionando Intro. Obtén más información en la entrada de blog de Addy.
Resaltador de color
El resaltador de color agregará un color al fondo de cualquier definición de color en tu CSS o Sass.
Puedes definir si se mostrará como subrayado con un fondo completo cuando colocas el cursor sobre ella o si siempre se mostrará un color en el fondo de definición. Para ver la configuración inicial y modificar la configuración, ve a "Configuración del paquete" > "Marcador de color" > "Configuración: Predeterminado" y modifícala en "Configuración - Usuario".
Para destacar todo el fondo, agrega lo siguiente al archivo “Settings - User”:
{
"ha_style": "filled"
}
Color del medianil
El color del margen es una alternativa al resaltador de color, ya que en lugar de mostrar el color sobre la variable de color, coloca el color en el margen de esa línea.
Selector de color
Si necesitas una manera rápida y fácil de seleccionar un color de la pantalla, el paquete del selector de colores puede ser ideal para ti.
Presiona ctrl + shift + c y listo, obtendrás un selector de color.
AutoFileName
AutoFileName es un complemento pequeño y simple que te brinda una lista de posibles archivos a medida que escribes. Esto es muy útil si intentas escribir el nombre de una imagen o agregar un archivo CSS o JS, ya que te ahorra tiempo y, lo que es más importante, reduce el riesgo de errores tipográficos.
Asignación automática de prefijos
Todos tuvimos ese momento de darnos cuenta en que nos olvidamos de agregar una propiedad de CSS con prefijo. Con Autoprefixer, puedes ejecutarlo en tu CSS y agregará todos los prefijos que necesitas.
Significa que vamos de esto...
.container-thingy {
display: flex;
flex-direction: column;
align-items: flex-start;
}
...a lo siguiente, solo presionando ctrl + shift + p, escribiendo “Autoprefix CSS” y presionando Intro.
.container-thingy {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
También puedes definir qué navegadores y versiones de navegadores quieres admitir en la configuración del paquete. Consulta la página de Control de paquetes para obtener más información.
Más…
Existen muchísimos complementos para Sublime Text, así que asegúrate de explorar el Control de paquetes.
Para obtener más consejos y sugerencias, consulta la excelente presentación de diapositivas de WesBos sobre combinaciones de teclas y otros complementos de Sublime Text.
WesBos también ha escrito un libro titulado "Sublime Text for the Power User", que también puede interesarte :)