Mis 9 extensiones de Atom favoritas

Read this article in English

Atom es un editor de código desarrollado por el equipo detrás de GitHub. Y además de ser gratuito, es open-source, motivo por el cual es el preferido por muchos desarrolladores, ya que da la posibilidad de poder personalizarlo prácticamente a nuestro gusto.

Atom tuvo su primera versión estable a mediados del 2015, y desde esa fecha, su comunidad ha crecido exponencialmente. Una muestra de ello es que en la actualidad, en su versión 1.12.7, cuenta con más de 5400 Atom packages disponibles en su web oficial, entre extensiones y temas para modificar las apariencia del programa. En este artículo, nos gustaría mostraros mis dos extensiones favoritas, y porque no decirlo, esenciales, con el que mi flujo de trabajo diario no sería el mismo.

Emmet

Básica. Esencial. Si has instalado Atom, lo siguiente que debes hacer es buscar Emmet dentro del catálogo de extensiones. La curva de trabajo al principio puede ser dura, pero una vez acostumbrado a la sintaxis de Emmet, el ahorro de escritura (y de tiempo de trabajo) es brutal. Es compatible con HTML, CSS, Sass y Less.

Por ejemplo, si escribimos:

html:5

A continuación, pulsaremos la tecla tabulador para obtener:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>

</body>
</html>

O si escribrimos esto:

div>(header>h1.logo+li*5>a{list})+footer>p

De nuevo, al pulsar el tabulador, tendremos:

<div>
  <header>
    <h1 class="logo"></h1>
      <li><a href="">list</a></li>
      <li><a href="">list</a></li>
      <li><a href="">list</a></li>
      <li><a href="">list</a></li>
      <li><a href="">list</a></li>
  </header>
  <footer>
    <p></p>
  </footer>
</div>

Ejemplo de uso de Emmet en Atom

Atom-beautify

Con Atom Beautify se acabó eso de estar arreglando código, y tabulando cientos de líneas para dejarlas a nuestro gusto y haciéndolo más legible. Muy útil para cuando trabajamos con archivos de terceros, o queremos mostrar correctamente los archivos HTML / CSS si trabajamos con Jade / SCSS. También es compatible con diferentes lenguajes, como JavaScript, PHP, Python, Ruby, Java, C, C++, C#, TypeScript y SQL.

Extension Beautify para Atom

File-icons

File Icons añade, a cada uno de los tipos de archivo del panel de navegacion de Atom, un icono para que nos resulte mucho más fácil reconocerlos. Del mismo modo, nos dejará elegir entre diferentes iconos, por si estamos usando un tema oscuro o claro.

Extensión File Icons en Atom

Minimap

Minimap permite tener a la vista una columna, a izquierda o derecha del editor, una vista previa de código fuente del archivo abierto. Bastante útil para tenerlo todo visible, poder desplazarse con más facilidad y verificar el código de forma rápida. También podemos potenciar esta extensión con otra llamada Minimap Highlight Selected, que nos resaltará en el minimapa las partes seleccionadas en nuestro código

Color-picker

Con Color Picker, la selección de colores será más sencilla que nunca. Mediante el atajo de teclado CMD-SHIFT-C (en Mac) o CTRL-ALT-C (en Windows) se abrirá una pequeña ventana con un selector de colores en formatos HEX / HSL / HSV / VEC. Por otro lado, tambien nos permite convertir cualquier código de color a otro formato, por ejemplo, de RGB a HEX.

Selección de color en Atom con Color Picker

Pigments

Al principio, Pigments puede parecer simplemente un bonito resaltador de colores dentro de nuestro código, pero va mucho más allá. Pigments busca dentro de tu proyecto y crea un directorio con todos los colores usados.

atom-pigments01
Además, hace uso de la función de autocompletar de Atom, por lo que nos dará sugerencias de los colores que ya hemos usado en nuestro proyecto cuando empecemos a escribir el código de color.

Paleta de colores Pigments en Atom

Highlight-selected

Gracias a Highlight Selected, podemos resaltar una sola palabra en todo el archivo, da igual sea el número de veces que haya sido usada. Esta extensión está basada en una función que será reconocible para los que usen Sublime Text.

atom-highlight

Livestyle

Con LiveStyle veremos los cambios que hagamos en nuestro código en tiempo real en nuestro navegador. Para ello, tendremos que instalar también en Google Chrome (único navegador soportado por ahora) la extensión LiveStyle

Jade-autocompile / Sass-autocompile

Para todos aquellos que usen Jade/Pug y/o Sass, está extensión está pensada para ellos. Nos ahorraremos el tener que instalar otro software en nuestro equipo para compilar el código. Simplemente añadiremos una línea al principio de nuestro código fuente con la dirección de la carpeta donde queremos guardar nuestro archivo HTML o CSS.

Compilar Jade en Atom

¿Que os ha parecido nuestra selección? Si conoceis alguna extensión interesante, nos la podeis dejar escrita en los comentarios!

Escrito por 

Apasionado del diseño gráfico 2D y 3D, y recién llegado al mundo del diseño web. Y como buen noob, descubriendo y aprendiendo cosas nuevas día a día. Actualmente, soy el eslabón perdido entre las dos grandes partes de SiloCreativo.

4 Comentarios en “Mis 9 extensiones de Atom favoritas

  1. Ana Parra

    Atom-beautify es pragmáticamente la extensión que no puede faltar, especialmente cuando trabajar con bootstrap u otros frameworks, ayuda bastante a encontrar bloques código mas rápido.

  2. Hector Ortega

    Hola buen día, alguien que pueda decir como se llama el plugin o la forma de poner la línea que va antes de cada línea de texto. La que se pone al dar un espacio o un Tab. que sirve para ver donde empieza y termina una etiqueta.

    Gracias.

    1. Alfonso Serrano

      Hola Hector!

      Esa línea se puede añadir desde la propia configuración de Atom, no hace falta instalar ningún plugin. Dentro de los Settings del programa, te vas al apartado de Editor y activas la opción de “Show Indent Guide”. Con esto ya tendrás los guiones verticales antes de cada línea.

      Un saludo!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *