Revisión: los 10 mejores editores de JavaScript

Los programadores de JavaScript tienen muchas buenas herramientas para elegir, casi demasiadas para realizar un seguimiento. En este artículo, analizo 10 editores de texto con buen soporte para desarrollar con JavaScript, HTML5 y CSS, y para documentar con Markdown. ¿Por qué utilizar un editor para la programación de JavaScript en lugar de un IDE? En una palabra: velocidad.

La diferencia esencial entre editores e IDE es que los IDE pueden depurar y, a veces, perfilar su código, y los IDE son compatibles con los sistemas de gestión del ciclo de vida de las aplicaciones (ALM). Muchos de los editores que analizamos aquí admiten al menos un sistema de control de versiones, a menudo Git, por lo que ese criterio es menos diferenciador entre IDE y editores de lo que solía ser.

Sublime Text y Visual Studio Code son los mejores entre los editores de JavaScript: Sublime Text tanto por su velocidad como por sus convenientes funciones de edición, y Visual Studio Code para características aún mejores y una velocidad casi igual de buena. Los corchetes ocupa el tercer lugar. Si bien TextMate ocupó un lugar destacado en mi lista hace unos años, sus capacidades realmente no se han mantenido al día con los nuevos desarrollos.

Lo más probable es que encuentre el editor de JavaScript de su elección en Sublime Text, Visual Studio Code o Brackets. Pero varias otras herramientas (Atom, BBEdit, Komodo Edit, Notepad ++, Emacs y Vim) tienen algo que recomendarlas. Dependiendo de la tarea en cuestión, es posible que le resulte útil tener a mano alguno de ellos.

Vídeo relacionado: ¿Qué es JavaScript? El creador Brendan Eich explica

Brendan Eich, creador del lenguaje de programación JavaScript, explica cómo se usa el lenguaje y por qué sigue siendo uno de los favoritos entre los programadores por su facilidad de uso.

Repasemos las opciones y compárelas al final.

Texto sublime

Si desea un editor de texto de programación flexible, potente y extensible que sea increíblemente rápido y no le importa cambiar a otras ventanas para verificar, depurar e implementar el código, entonces no busque más allá de Sublime Text.

Además de la velocidad, las muchas fortalezas notables de Sublime Text cubren el soporte para más de 70 tipos de archivos, entre ellos JavaScript, HTML y CSS; navegación casi instantánea y cambio de proyecto instantáneo; múltiples selecciones (hacer varios cambios a la vez), incluidas las selecciones de columnas (seleccionar un área rectangular del archivo) múltiples ventanas (use todos sus monitores) y ventanas divididas (aproveche el espacio de su pantalla); personalización completa con archivos JSON simples; una API de complemento basada en Python; y una paleta de comandos unificada con capacidad de búsqueda.

Para los programadores que vienen de otros editores, Sublime Text admite paquetes TextMate (excluyendo comandos) y emulación Vi / Vim. La documentación no oficial de Sublime Text hace comentarios despectivos (e incorrectos) sobre los usuarios de Emacs ( moi , por ejemplo), pero los pasaré por alto. ¿Por qué existe la documentación no oficial de Sublime Text? Bueno, por un lado, la documentación oficial está menos que completa, mucho menos.

Cuando dije "navegación casi instantánea" antes, lo decía en serio. Por ejemplo, para saltar de la ubicación actual en la pantalla a la definición de getResponseHeaderen ajax.js, puedo escribir Command-P en una Mac o Ctrl-P en una PC, luego ajabrir una vista transitoria en ajax.js, luego @grhy Enter para abrir una pestaña con getResponseHeaderseleccionado. Sublime Text es capaz de seguir el ritmo de mi escritura. Se siente tan receptivo como algunos de los mejores editores de DOS antiguos, como Brief y Kedit.

Una vez que haya seleccionado  getResponseHeader, puedo encontrar todos los usos de la función en contexto escribiendo Shift-Command-F en una Mac, o Shift-Ctrl-F en una PC, luego Enter. Una nueva pestaña me mostrará los resultados de la búsqueda con el término de búsqueda encuadrado en cada fragmento de cinco líneas. Al hacer doble clic en el texto del recuadro, aparece el contexto completo del archivo en una nueva pestaña.

Al hacer clic en el nombre de un archivo en la barra lateral de Carpetas de la izquierda, aparece una pestaña transitoria que muestra el contenido del archivo. Hacer clic en un archivo diferente reemplaza esa pestaña. De nuevo, Sublime Text es capaz de seguir el ritmo de mi escritura y clic. De manera similar, la navegación de tamaño reducido en la parte superior derecha de la página me permite moverme dentro de un archivo casi instantáneamente, sin la sobrecarga del desplazamiento. Ojalá Microsoft Word fuera tan receptivo.

Varias selecciones y selecciones de columnas agilizan los tipos de ediciones molestas que solían requerir expresiones regulares. ¿Necesita convertir una lista de palabras en una estructura JSON donde cada palabra está rodeada por comillas dobles y cada palabra entre comillas está separada de la siguiente por una coma? Se necesitan aproximadamente ocho pulsaciones de teclas en Sublime Text, sin importar cuántas palabras tenga en la lista.

En mi caja de desarrollo de Windows, utilizo dos monitores anchos. En mi MacBook, uso la pantalla Retina más una pantalla Thunderbolt. A menos que esté editando en una pantalla y depurando en la otra, normalmente quiero ver muchos archivos fuente diferentes y vistas diferentes en archivos fuente simultáneamente. Sublime Text admite múltiples ventanas, ventanas divididas, múltiples espacios de trabajo por proyecto, múltiples vistas y múltiples paneles que contienen vistas. Es bastante simple usar todo el espacio de mi pantalla cuando quiero y consolidar cuando necesito hacer espacio para depurar y probar.

Puede personalizar todo lo relacionado con Sublime Text: la combinación de colores, la fuente del texto, las combinaciones de teclas globales, las tabulaciones, las combinaciones de teclas y fragmentos específicos del archivo, e incluso las reglas de resaltado de sintaxis. Las preferencias están codificadas como archivos JSON. Las definiciones específicas del idioma son archivos de preferencias XML. Existe una comunidad activa en torno a Sublime Text que crea y mantiene paquetes y complementos de Sublime Text. Muchas características de las que inicialmente pensé que Sublime Text carecía, incluidas las interfaces JSLint y JSHint, JsFormat, JsMinify, PrettyJSON y Git, resultan estar disponibles a través de la comunidad mediante el instalador de paquetes.

Una de las razones del gran rendimiento de Sublime Text es que está codificado de forma estricta. Otra razón es que Sublime Text no es un IDE y no necesita los gastos generales de contabilidad de un IDE.

Desde el punto de vista de un desarrollador, esta es una compensación complicada. Si se encuentra en un ciclo de desarrollo estricto impulsado por pruebas de "rojo, verde, refactorización", entonces un IDE que esté configurado para editar, probar, refactorizar y rastrear la cobertura del código lo ayudará más. Si está haciendo revisiones de código o ediciones importantes, por otro lado, querrá el editor más rápido y eficiente que pueda encontrar. Ese editor bien podría ser Sublime Text.

Costo: prueba gratuita ilimitada; $ 70 por usuario para licencia comercial o personal. Plataformas: Windows, MacOS y Linux.

Código de Visual Studio

Visual Studio Code es un IDE y editor ligero gratuito de Microsoft. Tiene componentes de Visual Studio, mezclados con el shell Atom Electron de código abierto, proporcionando un excelente soporte para el desarrollo ASP.Net Core con C # y para el desarrollo Node.js con TypeScript y JavaScript. Rompiendo con el patrón histórico de Microsoft de solo admitir Visual Studio en Windows, Visual Studio Code también se ejecuta en MacOS y Linux. La siguiente captura de pantalla se tomó en MacOS.

Visual Studio Code tiene una finalización de código JavaScript sorprendentemente buena, gracias a la inclusión del compilador TypeScript y el motor Salsa. Visual Studio Code envía su código JavaScript al compilador de TypeScript en segundo plano para inferir tipos y crear una tabla de símbolos. Puede ver los resultados en el cuadro cerca de la parte inferior de la imagen de la pantalla que muestra la información del  hasOwnProperty método.

La misma tabla de símbolos permite que IntelliSense le brinde excelentes listas de opciones emergentes para completar el código a lo largo de la escritura de una expresión. Obtiene cierre automático de paréntesis, opciones automáticas para completar palabras, listas automáticas de métodos después de escribir .y listas automáticas de parámetros dentro de un método. Puede mejorar IntelliSense agregando referencias a archivos d.ts de  DefinitelyTyped, y Visual Studio Code le ofrecerá hacerlo cuando reconozca problemas comunes, como el uso de  __dirname, que es una variable incorporada de Node.js.

El soporte de Git es muy bueno y bastante sencillo de usar. El depurador de Visual Studio Code proporciona una excelente experiencia de depuración para el desarrollo de Node.js (y el desarrollo de ASP.Net). Visual Studio Code tiene muy buenas herramientas para HTML, CSS, Less, Sass y JSON, que se basan en la misma tecnología que impulsa las herramientas de desarrollo de Internet Explorer F12. Además, tiene una integración personalizable con corredores de tareas externos como  gulp y  jake.

Visual Studio Code ha atraído un ecosistema sólido de complementos, por ejemplo, para admitir Angular y React. Ahora es el editor que recomiendo cuando escribo tutoriales sobre la creación de aplicaciones con marcos y bibliotecas JavaScript y TypeScript.

Costo: código abierto gratuito. Plataforma: Windows, MacOS y Linux.

Soportes

Brackets es un editor de código abierto gratuito, originalmente de Adobe, creado para proporcionar mejores herramientas para JavaScript, HTML y CSS, así como tecnologías web abiertas relacionadas. Brackets en sí está escrito en JavaScript, HTML y CSS, y los desarrolladores usan Brackets para crear Brackets. Además de las capacidades integradas, Brackets tiene un administrador de extensiones y hay extensiones disponibles para muchos de los lenguajes y herramientas que utilizan los desarrolladores de aplicaciones para el usuario. Brackets no es tan rápido como Sublime Text o TextMate, pero sigue siendo bastante rápido, excepto por las pausas para cargar o actualizar el contenido del programa desde la web.

Brackets tiene un buen soporte para JavaScript, CSS, HTML y Node.js. También tiene características interesantes como la edición en línea de CSS relacionada con una ID HTML (Edición rápida). Además, Brackets presenta una interfaz de usuario limpia y una vista previa en vivo de las páginas web que está editando. Es una muy buena opción para un editor de código gratuito.

El autocompletado de JavaScript entre corchetes es muy bueno, con cierre automático de paréntesis, corchetes angulares y corchetes, así como menús desplegables automáticos para palabras clave, variables y métodos, incluidos los métodos jQuery después de escribir $. Los corchetes pueden controlar el depurador de Node.js y reiniciar Node desde un elemento del menú. Es fácil agregar extensiones para funciones adicionales, como compatibilidad con TypeScript y JSX, integración con Bower e integración con Git.

Quick Edit, Quick Docs, Quick Open y Live Preview ayudan a optimizar la edición de aplicaciones web y le permiten concentrarse en lo que está codificando o diseñando. En el lado negativo, algunas extensiones de Brackets pueden ser difíciles de configurar, pero no tanto como los paquetes de Emacs o los complementos de Vim.

Costo: código abierto gratuito. Plataformas: Windows, MacOS, Linux. 

Átomo

Atom es un editor de programación gratuito, de código abierto y pirateable de GitHub para Windows, MacOS y Linux que se integra con la aplicación GitHub y tiene miles de paquetes y temas disponibles. Me las arreglo con algunos paquetes comunitarios, además de los paquetes y temas principales.

No es sorprendente, dado su origen, que la fuente de Atom esté alojada en GitHub. Está escrito en CoffeeScript e integrado con Node.js. Atom es una variante especializada de Chromium diseñada para ser un editor de texto en lugar de un navegador web; cada ventana de Atom es esencialmente una página web renderizada localmente. El equipo de Atom desarrolla Atom en Atom.

El rendimiento de Atom es bastante bueno cuando no se actualiza. Tiene todas las funciones listas para usar, un buscador difuso, búsqueda y reemplazo rápidos en todo el proyecto, múltiples cursores y selecciones, múltiples paneles, fragmentos, plegado de código y la capacidad de importar gramáticas y temas TextMate. Atom puede instalar dos utilidades de línea de comandos: Atom para iniciar el editor desde un shell y APM para administrar los paquetes de Atom, en el espíritu de NPM para Node.js. Me encuentro usando mucho Atom cuando navego por repositorios que cloné de GitHub, porque la aplicación GitHub incluye un elemento de menú contextual para hacer eso.

Costo: código abierto gratuito. Plataformas: Windows, MacOS, Linux.

Komodo Editar

Komodo Edit, la versión gratuita de funcionalidad reducida de ActiveState de Komodo IDE, es un editor multilenguaje bastante bueno. Todo lo que tenía que decir sobre Komodo IDE como editor (ver "Revisión: Los 6 mejores IDE de JavaScript") se aplica a Komodo Edit.