10 paquetes de texto sublime para desarrolladores web

Cada desarrollador web tiene un editor de código favorito. Algunas personas juran en un entorno de desarrollo integrado (IDE), mientras que otras solo quieren simplicidad. Si prefiere este último, puede apreciar los paquetes de texto sublime. Uno de los aspectos más atractivos del texto sublime es que es extremadamente modular. Si eres un purista, puedes usar el editor tal como está. Sin embargo, diferentes paquetes pueden hacer que su desarrollo funcione mucho más fácilmente al expandir su funcionalidad. ¡En este artículo, presentaremos diez de nuestros favoritos! Una introducción a los paquetes de texto sublime y cómo instalar sus paquetes son textos sublime con módulos o complementos de WordPress. Hay suplementos que puede configurar para expandir la funcionalidad principal de la plataforma y facilitar su trabajo.
El concepto de paquetes de editor de código no es nuevo. Las plataformas más populares, como Atom, también ofrecen muchas extensiones. Sin embargo, el texto sublime sigue siendo una excelente opción si desea un editor de código fácil, con una amplia selección de programas de finalización. Con respecto a cómo instalar paquetes de texto sublime, el proceso es muy simple. Para comenzar, acceda al almacén para la extensión deseada y descárguela:

Una vez que tengas. Zip, navegue por los paquetes de director de texto sublime y extiéndelo. Si no lo encuentra, el Director debe estar bajo el nombre de usuario / AppData / Roaming / Sublime Text / Packages. La mayoría de las extensiones estarán listas para usar en texto sublime tan pronto como extraiga la carpeta sin tener que reiniciar el editor.
Si desea un proceso más racionalizado, también puede usar el control oficial del paquete de texto sublime. En resumen, esta herramienta le permite navegar por un almacén de paquetes públicos e instalarlos utilizando comandos simples. Para configurar el control de paquete de texto sublime, explore los instrumentos> Instale el control del paquete: una vez que el paquete de control está configurado, puede usarlo a través de la consola de texto sublime. Presione CTRL + ~ para abrirlo, luego escriba el control del paquete: para ver una lista completa de pedidos que puede usar:

Para instalar un nuevo paquete, escriba el control del paquete: la instalación y la herramienta del paquete abrirán una lista de todos los paquetes públicos en su almacén:

Puede navegar por la lista con la consola. Sin embargo, antes de instalar algo, probablemente desee aprender más sobre los paquetes disponibles para que pueda elegir lo mejor para su flujo de trabajo. 10 paquetes de texto sublime para desarrolladores web Hay cientos de paquetes de texto sublime para elegir, por lo que no es una tarea fácil limpiar una lista de selección superior. Dado esto, decidimos centrarnos en aquellos que pueden ayudarlo a simplificar su flujo de trabajo tanto como sea posible. La mayoría de las opciones en esta lista son un lenguaje agnóstico, por lo que puede obtener mucho kilometraje de ellas, sin importar qué tipo de desarrollo se concentre.

1. La alineación de la alineación es un paquete simple que toma su código y alinea los caracteres para los que lo configura. Su funcionalidad es simple, pero hace que la lectura por código sea mucho más agradable. Una vez que instale el paquete, deberá configurar qué caracteres deben alinearse. Puede hacer esto abriendo la configuración del paquete: archivo de usuario: cuando el archivo abre, copie y pegue el siguiente código en: {
“Alineación_Chars”: [

“(“, “:”
] }
Este fragmento le dice al paquete que alinee a los personajes ‘(‘ y ‘:’ de cualquier código al que aplique. Para darle un ejemplo, aquí está el PHP que usaría para exprimir estilos para un niño temático en WordPress:
Está bastante organizado. Sin embargo, si lo resalta y presiona Ctrl + Alt + A Lighing aplicará la nueva configuración, lo que resulta en:
¿Qué personajes desea alinear con usted afortunadamente, solo se necesitan unos pocos botones después de configurar el paquete para ponerlo en funcionamiento? 2. Emmet Si eres un desarrollador frontal o pasa mucho tiempo trabajando con HTML y CSS, entonces Emmet es un elemento obligatorio del conjunto de herramientas. Este paquete le permite escribir expresiones CSS dinámicas o “abreviaturas” y expandirlas en un código completamente funcional.

Supongamos que desea incluir una lista sin clasificar los elementos en cualquier página utilizando HTML. Ese código podría verse así:

ítem 1
ítem 2
ítem 3
La escritura manual de marcas repetitivas puede ser bastante aburrida. Con Emmet, puede generar el código requerido utilizando la siguiente abreviatura y extendiéndola presionando un botón:
#page> div.logo+ul#navegación> li*3> a {elemento $} Si observa la sintaxis, notará que las abreviaturas siguen modelos muy lógicos. Más allá de la generación de código, Emmet también le permite navegar en los fragmentos resultantes, seleccionar piezas importantes, incorporar nuevas etiquetas y más. Desde la caja, Emmet incluye tantas abreviaturas que definitivamente tendrá que consultar la documentación antes de comenzar. 3. SFTP justo al lado del murciélago, el nombre de este paquete debería darle una idea de qué esperar. Usando SFTP, puede asignar una carpeta local en una remota o puede editar directamente archivos desde un servidor de texto sublime.
Acceder a un servidor remoto a través del SFTP es simple. Navegue al archivo> SFTP / FTP> Configuración del servidor. Aquí puede configurar la configuración de conexión FTP / SFTP:
Una vez que haya establecido las credenciales, puede hacer clic en los archivos en la barra lateral para asignarlos a su servidor remoto o conectarse directamente a él. 4. Jshint Si trabaja con JavaScript, un verificador de sintaxis de calidad facilitará enormemente la resolución de problemas. Con Jshint, puede obtener una presentación rápida de cualquier error en su código, y la consola de paquetes le permite moverse de una columna a otra.
Después de instalar Jshint, puede activarlo presionando Control + J o Alt + J, que mostrará la consola para el archivo en el que está trabajando:
Tenga en cuenta que necesita Node.js para que Jshint funcione en su computadora. De lo contrario, el paquete puede devolver un error al intentar solucionar problemas de un archivo. 5. AutofileName AutofileName es uno de los paquetes de texto sublime más simples que encontrará. Sin embargo, una vez que comienzas a usarlo, puede ser difícil para ti regresar. Con AutoFileName instalado si intenta conectarse a un archivo utilizando una etiqueta HREF, puede presionar el control + espacio y mostrará automáticamente una lista de archivos y directorios al mismo nivel que el padre. Puede navegar fácilmente usando el cursor o el teclado y puede seleccionar cualquier archivo que desee. El paquete agregará automáticamente su ruta. Más que eso, si usa los nombres automáticos para insertar rutas de imagen, el paquete también identificará sus dimensiones y completará los atributos de altura y ancho. Si desea hacer que el proceso sea más eficiente, puede configurar AutoFileName para activar sin tener que presionar el control + espacio. Para esto, abra el archivo de configuración del usuario y agregue el siguiente código: “Auto_complete_triggers”:

[
{


“Personajes”: “<",
"Selector": "Text.html"
},
{
"Caracteres": "/",
"Selector": "String.QED.DOUBRA
}
] Una vez que guarde este código, AutoFileName se activará cada vez que escriba una barra directa, guardándole alguna tecla. 6. Livereload Si no desea actualizar su navegador cada vez que cambia un archivo local para ver los resultados, Livereload puede ser el paquete perfecto para usted. Le permite sincronizar los archivos locales con su navegador favorito para que al hacer cambios y guardar y guardar ellos, se mostrarán instantáneamente. Para que LiverElad funcione, debe hacer dos cosas: agregue el script de LiverLoad al archivo HTML que trabaja presionando CTRL + Shift + P y seleccionando el script hivereload.js (presentado a continuación) opción.
Instale la extensión apropiada para el software que utiliza.
Aquí hay una vista rápida de lo que debe ver cuando agrega el script necesario en el archivo local:
Después de tener el script, debe configurar una extensión si usa Safari, Chrome o Firefox. Después de la configuración, podrá agregar el script a cualquier archivo y verá los cambios en vivo cuando los abra a través del navegador. 7. Archediffs A veces necesita caminar a través de largos estiramientos de bacalao para encontrar cambios o cambios recientes realizados por otra persona. La búsqueda a simple vista puede ser ineficiente. Si tiene una versión anterior o separada de un archivo en particular, puede usar Archediffs para mostrar sus inconsistencias. Una vez que configure Archediffs, puede hacer clic en cualquier lugar del título de un proyecto o archivo para acceder a su menú:
El paquete le brinda muchas opciones para comparar el archivo actual. Por ejemplo, puede seleccionar un archivo en otra pestaña o contenido de portapapeles. Después de elegir, Filediffs generará un nuevo archivo, que incluye las diferencias resaltadas: en la captura de pantalla anterior, puede ver las diferencias resaltadas entre dos fragmentos de código corto. Cuanto más complejos sean los archivos, más tiempo podrá guardarlo. 8. Minifier Minimization puede ser una excelente práctica si intenta mejorar el rendimiento de un sitio web. Por lo general, use herramientas de tercera parte para minimizar su código, pero con el paquete correcto, puede hacerlo en el texto sublime. Minifier le permite procesar los archivos JavaScript y CSS. Todo lo que tiene que hacer es configurar el paquete y usar una de estas dos combinaciones de botones:
CTRL + ALT + M: minimiza directamente el archivo abierto actual.
Ctrl + Alt + Shift + M: minimiza el archivo abierto actual y guarda la salida en una nueva.
En este ejemplo, tomé uno. Archivo CSS que inicialmente ocupaba más de una docena de líneas y lo minimizó:

El proceso debería durar solo unos segundos, ahorrando un tiempo significativo durante la optimización del rendimiento. 9. TODOREVIEW Si tiende a dejar un recordatorio a lo largo del código de tarea en el que necesita trabajar o devolver, le gustaría ToDoreview. En resumen, el paquete compila listas de comentarios que se encuentran en sus proyectos y las muestran en un nuevo archivo, de la siguiente manera:

La configuración implícita del paquete solo reconoce los comentarios de TODO. Sin embargo, puede agregar fácilmente nuevos modelos cambiando el archivo de configuración del paquete: “Patrones”: {“TODO”: “TODO [\ S*?: [\ S*(? P .*) $”,

“Urgente”: “urgente [\ s*?: [\ S*(? P .*) $”,
}
En este ejemplo, creamos un nuevo tipo de modelo para ser reconocido en el paquete (¡urgente!). Puede configurar todo lo que desee. 10. Todas las terminaciones automáticas de forma predeterminada, Sublime Text intentará completar automáticamente el código del archivo en el que está trabajando. Este es un buen comienzo, pero ¿qué sucede si trabaja en un proyecto de múltiples archivos? Todas las terminaciones automáticas extienden la funcionalidad de la finalización automática básica del texto sublime y lo ayudan a encontrar coincidencias en todos los archivos abiertos. Es una diferencia pequeña pero significativa, que puede acelerar su flujo de desarrollo. Si desea ajustar la configuración del paquete o deshabilitarla para ciertos tipos de archivos, puede cambiar fácilmente su configuración utilizando el siguiente código: “excluir_from_complement”: [
“CSS”,

] ,,

“Min_word_size”: 5, // No muestre completas para palabras con Fer This Many Chars Chard