Cómo configurar Atom para el desarrollo de JavaScript

Atom es un popular editor de código gratuito creado por los desarrolladores de GitHub para programadores. Se encuentra en constante desarrollo y cuenta con cientos de complementos, lo que lo hace fácilmente personalizable según tus necesidades.
Atom está construido sobre la tecnología Electron, lo que significa que funciona en Windows, Linux y macOS. Algunas de las características básicas del editor, disponibles después de la instalación, son:
  • Resaltado de sintaxis para varios lenguajes populares y formatos de archivo.
  • Navegación conveniente.
  • Vista previa integrada de Markdown.
  • Autocompletado inteligente.
  • Gestor de paquetes integrado.
El gestor de paquetes es necesario para instalar y desinstalar paquetes de extensión (complementos). Para facilitar el desarrollo de JavaScript tanto en el backend como en el frontend, es necesario instalar algunos paquetes.
Para instalar un nuevo paquete, ve a la configuración, selecciona la pestaña "Install", ingresa el nombre del paquete en la barra de búsqueda y haz clic en "Install".
Estándares de codificación
Eslint es una utilidad que verifica los estándares de codificación en JavaScript. Es el estándar de facto en el mundo de JS.
Primero, debes instalar eslint en tu sistema y luego instalar la extensión de Atom que utilizará el linter instalado. Hay diferentes formas de integrar el linter con la extensión. Vamos a ver cómo instalar el linter globalmente en el sistema.
  • 1
    Instala Node.js utilizando el gestor de paquetes de tu sistema operativo.
  • 2
    Instala eslint ejecutando el comando npm install -g eslint. Es posible que necesites usar sudo.
  • 3
    Instala los complementos que configuran eslint. Sin ellos (por defecto), eslint no realizará ninguna verificación.

    npm install -g eslint-config-airbnb-base eslint-plugin-import
  • 4
    eslint requiere un archivo de configuración. Crea un archivo .eslintrc.yml en la raíz de tu proyecto con el siguiente contenido:

    extends:
    - 'airbnb-base'
    env:
    node: true
    browser: true
  • 5
    Instala la extensión "linter-eslint" en Atom.
  • 6
    Marca la casilla Use Global Eslint en la configuración de la extensión (Settings -> Packages -> Linter Eslint).
Autocompletado automático
El autocompletado integrado en el editor funciona mediante un análisis básico del contenido de los archivos. Con la ayuda de la utilidad externa "tern", puedes lograr un comportamiento más avanzado. "tern" puede:
  • Sugerir argumentos de función.
  • Determinar el tipo de expresión.
  • Encontrar la definición de algo.
  • Realizar refactorización automática.
La extensión de Atom atom-ternjs no requiere la instalación de nada más y funciona por sí misma.
Autocompletado de archivos y módulos
La útil extensión autocomplete-modules completa automáticamente los nombres de archivos y módulos al importarlos.
Ir a la definición
js-hyperclick te permite ir rápidamente a la definición de una función o variable haciendo clic.
Leer otros artículos de Guías
Lea otros artículos relevantes del mundo de la tecnología y el espíritu empresarial.