Share
Un editor de código es el pan y la mantequilla de la carrera de cualquier desarrollador web. Es la única faceta de la cadena de herramientas de un codificador que se aprecia, pero también se elige con extrema pasión y decisión. Este no será un artículo sobre qué editor de código es el más popular o qué hace que uno sea mejor que el siguiente; El propósito de este artículo será para aquellos que hayan elegido a Atom como su editor de código y mostrar cómo hacerlo para el trabajo diario..
Emmet LiveStyle es la primera herramienta de edición bidireccional en tiempo real para archivos CSS, LESS y SCSS.
El paquete Atom está disponible aquí y no requiere ninguna configuración especial: simplemente inicie Atom y Google Chrome y estará listo para la edición en tiempo real.
“LiveStyle usa sus propias implementaciones de preprocesadores LESS y SCSS, escritas en JavaScript puro. A diferencia de las implementaciones oficiales de preprocesadores con sourcemaps, LiveStyle proporciona asignaciones adecuadas de origen a resultado, ámbitos de variables y de mezcla, recuperación de errores y compilación parcial ".
Una de mis características favoritas es "Vista remota" y crea una URL disponible públicamente que apunta a su sitio local. Use esta URL para obtener una vista previa de cualquier dispositivo o navegador conectado a Internet con actualizaciones instantáneas en tiempo real de Atom y DevTools.
Para dominar este paquete, le sugiero encarecidamente que revise la documentación y la guía de inicio para asegurarse de que satisfaga las necesidades de su contexto específico y, por supuesto, que se sienta cómodo antes de usarlo..
¿Alguna vez has querido usar un selector de color mientras codificabas? No tengas miedo porque Color Picker tiene tu espalda. El selector de color actualmente lee los colores HEX, HEXa, RGB, RGBa, HSL, HSLa, HSV, HSVa, VEC3 y VEC4 y puede convertir entre los formatos.
Este pequeño demonio también inspecciona las variables de color Sass y LESS como un súper detective. Simplemente abra el selector de color con el cursor en la variable de su elección y buscará la definición para usted. Puede hacer clic en la definición proporcionada e ir directamente a donde está definido.
Si el selector de color no es su taza de té, entonces quizás pruebe los Pigmentos. Pigmentos es un paquete para mostrar colores en archivos de proyectos. Pigmentos escaneará los archivos de origen en los directorios de tu proyecto en busca de colores y construirá una paleta con todos ellos (bastante pulido).
Con el movimiento cada vez más solicitado en nuestro trabajo, es bueno tener herramientas que ayuden en el proceso..
El editor de curvas de bezier es un cambiador de juegos para desarrolladores en movimiento e interactivos que buscan el combo de suavizado perfecto. Elija entre una multitud de opciones de suavizado que muestran sus resultados en vivo o cree el suyo propio arrastrando los controles del visualizador de suavizado.
¿Le gustaría ocultar los archivos de su proyecto que no necesitan comprometerse con su repositorio o mostrarse mientras trabaja? En Atom's Paquetes pestaña, busque “vista de árbol” y, bajo su configuración, marque la casilla Ocultar nombres ignorados para eliminar los archivos ignorados globalmente de su vista de árbol, o combinarlos con Ocultar archivos ignorados VCS. Estos archivos VCS particulares son los que controla tu .gitignore. Los archivos ignorados globalmente son aquellos como .DS_Store, por ejemplo.
Cuando se pueden hacer mejoras en su navegación visual, sugiero hacerlo, y es por eso que me encantan los íconos de archivos..
Este paquete le da a tus archivos un pequeño y bonito ícono con algo de color para ayudar a encontrar y, en general, hacer que las cosas luzcan deliciosas. Incluso le brinda la posibilidad de personalizar el tamaño, los tonos de color, los íconos de intercambio y asignar íconos por extensión de archivo.
¿No te gusta saltar entre la línea de comandos y tu editor para hacer confirmaciones? Este paquete de GitHub ahora se incluye con todas las versiones de Atom 1.18 y posteriores.
Disfrute de la capacidad de bifurcar, organizar, cometer, empujar, jalar, resolver conflictos e incluso ver las solicitudes de GitHub desde el interior de Atom. Para abrir esta ventana, coloque el cursor en el centro muerto de su editor en el lado derecho y busque una pestaña con una flecha. Auge!
Soy un gran fan de este porque hace que mirar archivos sea muy fácil. Dentro de Atom, usted tiene acceso a su historial de un proyecto Git rastreado; más todo es visual.
Git Time Machine hace que la búsqueda de archivos sea divertido nuevamente y menos desordenado que tratar de inspeccionar a través de la línea de comandos. Muestra un gráfico visual de las confirmaciones en el archivo actual a lo largo del tiempo y puede hacer clic en la línea de tiempo o desplazarse sobre una marca y ver todas las confirmaciones para un intervalo de tiempo específico. Usted tiene la opción de revertir archivos completos o selección de línea por línea. Es un paquete realmente fantástico para incluir en su flujo de trabajo Atom.
La búsqueda de soporte para el navegador nunca ha sido tan fácil y todo se ha hecho desde Atom gracias al paquete Can I Use.
Escriba "puedo usar" en la paleta de comandos (Cmd + Shift + P) Y comience a escribir la propiedad o el término de búsqueda que necesita para soporte en su proyecto. Una forma muy eficiente de usar este servicio en lugar de usar el navegador web.
Los paquetes no son la única opción que tiene para hacer que Atom sea más mágico que su instalación predeterminada. Hay muchas más opciones que se pueden encontrar directamente desde la configuración del núcleo para hacer que escribir el código sea una experiencia agradable..
Bajo el átomo Ajustes Ver puede especificar sus preferencias de envoltura.
los Envoltura suave La opción envolverá las líneas que son demasiado largas para que quepan en su ventana actual. Si esta opción está deshabilitada, las líneas se desangrarán del lado de la pantalla, por lo que tendrá que desplazarse por la ventana horizontalmente para ver el resto de su contenido..
La opción "Buscar y reemplazar" ha existido en los editores de código para siempre y por una buena razón. Para buscar dentro de su archivo actual puede presionar cmd + f, a continuación, escriba su cadena de búsqueda y presione entrar (o cmd + g o la Encontrar siguiente botón) varias veces para recorrer todas las coincidencias en ese archivo.
los Encontrar y reemplazar el panel también contiene botones para alternar entre mayúsculas y minúsculas, realizar coincidencias de expresiones regulares y realizar un alcance de la búsqueda a las selecciones. También puede encontrar y reemplazar todo su proyecto si invoca el panel con cmd + cambio + f.
Atom tiene el comando átomo --portable que proporciona una opción de parámetro de línea de comando para configurar el modo portátil. Personalmente, he tenido una mala suerte con esta opción y, francamente, los documentos sobre este tema todavía están muy necesitados de una reescritura..
“El modo portátil es muy útil para llevar Atom con usted, con todas sus configuraciones y paquetes personalizados, de una máquina a otra. Esto puede tomar la forma de mantener a Atom en una unidad USB o en una plataforma de almacenamiento en la nube que sincronice las carpetas con diferentes máquinas, como Dropbox ".
Mi sugerencia es vincular su ~ / .atom directorio a Dropbox (u otro servicio, ubicación, etc.) y llámelo un día. Este es el directorio que almacena todas sus configuraciones, paquetes, configuraciones y similares que hacen que Atom sea personalizado para su uso. Aún puede instalar Atom desde cualquier máquina como lo haría normalmente, excepto que está usando .átomo como un enlace simbólico referenciado a otra ubicación de su elección.
Si el modo portátil o el uso del truco del enlace simbólico no es atractivo, entonces podría considerar darle un giro a la configuración de sincronización. Este paquete de Atom sincronizará configuraciones, mapas de teclas, estilos de usuario, guión de inicio, fragmentos de código y paquetes instalados en las instancias de Atom.
Si desea aplicar un cambio de estilo personalizado sin crear un tema completo, puede agregar sus estilos personalizados a la styles.less archivo en tu ~ / .atom directorio.
Para abrir este archivo en el editor Atom seleccione Átomo> Hoja de estilo. La forma más fácil de ver qué clases están disponibles para el estilo es inspeccionar el DOM manualmente con las Herramientas del desarrollador a través de comando + opción + i De la misma manera que lo haces para Chrome..
Solo he raspado la superficie con respecto a paquetes, complementos y cosas por el estilo, pero si tiene más sugerencias, comentarios o pensamientos, lo aliento a dejar un comentario a continuación y cualquier enlace pertinente relacionado con esta discusión. Si eres grande en las listas, definitivamente echa un vistazo a este repo en GitHub llamado Awesome Atom; Una lista curada de deliciosos paquetes y recursos Atom. Como antiguo usuario de Sublime, he estado completamente satisfecho con mi elección de pasar a Atom y seguirá siendo mi editor preferido en el futuro inmediato. Feliz codificacion!
Accentsconagua