Apenas comiences 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 una o IDE.
En este episodio, Addy & Matt analiza su colección de complementos sobre Sublime Text y analizaremos cómo cada uno 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 hacer lo siguiente: instala Package Control, es agradable y sencillo para instalar y puedes encontrar aquí encontrarás instrucciones para hacerlo.
JSHint
JSHint es un linter de JavaScript que examina tu JavaScript. y destaca los posibles errores o las prácticas no recomendadas en tu código.
Por ejemplo, si accidentalmente escribiste mal el nombre de una variable, como
a continuación, JSHint indicará que fo nunca se definió y es
causará un error.
var foo = { bar: 'Hello, World.' };
var msg = fo.bar;
El complemento JSHint señala los problemas con un recuadro amarillo alrededor del nombre de y colocar el cursor en esa parte del código generará un error que aparece en la esquina inferior izquierda de Sublime.
Otros problemas que detectará son los siguientes:
- Variables que se definen, pero nunca se usan
- Evita crear funciones dentro de bucles
- Usa los métodos de comparación correctos
Para instalar el paquete SublimeLinter-JSHint También deberás instalar el paquete SublimeLinter y seguir los pasos instrucciones en la página del paquete SublimeLinter-JSHint.
A algunos desarrolladores podría resultarles útil incluir Medianil de JSHint complemento. Coloca un pequeño punto en el margen de cualquier línea con un problema de JSHint.
JSCS
JSCS destacará los lugares en los que tu JavaScript no sigue un estilo de codificación específico.
Por ejemplo, JSCS se puede usar para definir si los espacios usarse después de las palabras clave, como “if”, o definir si las llaves debe estar en la misma línea o en una línea nueva de un método.
El paquete SublimeLinter-JSCS destaca cualquier problema intercalado con un estilo similar al de JSHint lo que facilita la corrección de cualquier problema.
Esto es muy útil cuando se trata de trabajar en un ya que todos pueden seguir la misma guía de estilo y para mantener la coherencia de tu código.
Lo mejor es que, con el paquete JSCS-Formatter, puedes corregir automáticamente cualquier problema en la página.
Para ello, presiona ctrl + shift + p y escribe “JSCS Formatter: Format this file”
y presionamos Enter. Obtén más información en la entrada de blog de Addy.
Resaltador de color
Destacador de colores agregarás color al fondo de cualquier definición de color en tu CSS o Sass.
Puedes definir si se muestra subrayado con una el fondo completo cuando pasas el cursor sobre él o siempre muestra el color en el fondo de definición. Simplemente ve a Configuración de paquetes > Resaltador de color > Configuración: predeterminada Para ver la configuración inicial, y modifica tu configuración en "Configuración: Usuario".
Para resaltar el fondo por completo agrega lo siguiente a “Configuración: Usuario” archivo:
{
"ha_style": "filled"
}
Color del medianil
Color de canaleta es una alternativa al resaltador de color, en lugar de mostrar el color sobre la variable de color, se 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 y, luego, el Color Picker Package puede ser para ti.
Presiona ctrl + shift + c y listo. Ya tienes un selector de color.
AutoFileName
AutoFileName es un pequeño complemento sencillo que ofrece una lista de posibles archivos a medida que escribes. Esto es super útil si estás tratando de escribir el nombre de una imagen o agregar un archivo CSS o JS para ahorrar tiempo y, lo que es más importante, reduce el riesgo de errores tipográficos.
Prefijo automático
Todos hemos vivido ese momento de darnos cuenta en el que nos olvidamos de agregar una propiedad CSS con prefijo. Con Autoprefixer puedes ejecutarlo en tu CSS agrega todos los prefijos que necesites.
Significa que pasamos de esto...
.container-thingy {
display: flex;
flex-direction: column;
align-items: flex-start;
}
... a lo siguiente, con solo presionar ctrl + shift + p y escribir
"Prefijo automático de CSS" y presionamos 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 los navegadores y las versiones de navegador que deseas. para admitir en la configuración del paquete. Consulta la página Control de paquetes para obtener más información.
Más…
Existen muchísimos complementos más para Asegúrate de explorar el control de paquetes de Sublime Text.
Para obtener más consejos y sugerencias, consulta la gran presentación de WesBos sobre combinaciones de teclas y otros complementos para Sublime Text.
WesBos también escribió un libro titulado. “Sublime Text for the Power User” que también puede interesarles a ustedes, maravillosas :)