Revisión: Los 6 mejores IDE de JavaScript

Hoy en día, JavaScript se utiliza para muchos tipos diferentes de aplicaciones. Muy a menudo, JavaScript funciona con HTML5 y CSS para crear interfaces web. Pero JavaScript también ayuda a crear aplicaciones móviles y ha encontrado un lugar importante en el back-end en forma de servidores Node.js. Afortunadamente, las herramientas de desarrollo de JavaScript, tanto editores como IDE, están aumentando para hacer frente a los nuevos desafíos.

¿Por qué utilizar un IDE en lugar de un editor? La razón principal es que un IDE puede depurar y, a veces, perfilar su código. Los IDE también tienen soporte para sistemas ALM, integrándose con Git, GitHub, Mercurial, Subversion y Perforce para el control de versiones. Pero a medida que más editores agregan ganchos a estos sistemas, el soporte de ALM se está volviendo menos diferenciador.

Eclipse 2018 con herramientas de desarrollo JavaScript

En la antigüedad, cuando Java Swing era nuevo y emocionante, disfruté usando Eclipse para el desarrollo de Java, pero pronto pasé a otros IDE de Java. Hace más de cinco años, cuando realicé un desarrollo de Android con Eclipse, encontré que la experiencia estaba bien, pero era escasa. Cuando intenté usar Eclipse Luna con JSDT para el desarrollo de JavaScript en 2014, constantemente mostraba errores falsos positivos para el código válido que pasaba JSHint.

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.

Afortunadamente, varios proveedores y proyectos de código abierto han avanzado desde entonces. Eclipse 2018 con herramientas de desarrollo de JavaScript tiene un editor de JavaScript decente y un depurador basado en Chrome, pero no conoce TypeScript, que es utilizado por Angular, o sobre los archivos ES6 y JSX, que son utilizados por React.

Eclipse siempre ha disfrutado de un enorme mercado de complementos. Para TypeScript, considere el complemento gratuito TypeScript 1.0.0. Para Angular, TypeScript y ES6, considere el IDE comercial Angular (de CodeMix, anteriormente Webclipse), y para proyectos React con archivos JSX, pruebe el IDE de código abierto TypeScript. Si agrega más de uno, deberá resolver su disputa sobre cuál debe editar los archivos TypeScript, pero eso no es gran cosa.

Las herramientas de CodeMix se facturan como la adición de la inteligencia de Visual Studio Code a Eclipse. A diferencia de la mayoría de los complementos de Eclipse, Angular IDE de CodeMix no es gratuito, pero tiene una prueba gratuita de 45 días. Dado que Visual Studio Code es gratuito, lo consideraría antes de pagar por Angular IDE.

Gratis; IDE angular de CodeMix, $ 29 (personal) o $ 48 (comercial) por año. Plataforma: Windows, MacOS y Linux.

ActiveState Komodo IDE

He sido usuario y fanático de Komodo IDE desde que se introdujo por primera vez en 2001. Aunque los productos más nuevos como Visual Studio Code y WebStorm lo han superado en algunas áreas, sigue siendo un buen editor e IDE.

Komodo IDE proporciona edición avanzada de JavaScript, resaltado de sintaxis, navegación y depuración, pero no incluye verificación de código JavaScript. Para eso, siempre puede ejecutar JSHint en un shell.

Komodo admite docenas de lenguajes de programación y marcado. Con su amplia gama de compatibilidad con lenguajes de programación y marcado, que incluyen refactorización, depuración y creación de perfiles, Komodo IDE es una muy buena opción para el desarrollo de un extremo a otro en lenguajes de código abierto.

Komodo tiene un módulo de refactorización de código para todos los lenguajes para los que proporciona inteligencia de código: PHP, Perl, Python, Ruby, Tcl, JavaScript y Node.js. Desafortunadamente, la naturaleza del "mínimo común denominador" de este enfoque limita las capacidades para cambiar el nombre de variables y miembros de clase, y para extraer código en un método. Sin embargo, estos son algunos de los casos más útiles.

Komodo IDE tiene edición de columnas y múltiples selecciones. Esto proporciona casi paridad con Sublime Text y TextMate en lo que respecta a las ediciones masivas. Mientras hagamos la comparación, Komodo es más un IDE, mientras que Sublime Text es mucho más rápido. Y mientras hablamos del rendimiento, la velocidad de Komodo ha mejorado notablemente en comparación con las versiones anteriores, en el dibujo de la pantalla, la búsqueda y la verificación de sintaxis.

Komodo IDE tiene varias características de las que carecen la mayoría de los productos de la competencia. Uno es su Inspector HTTP, que es excelente para depurar devoluciones de llamada Ajax. Otro es su kit de herramientas Rx (expresión regular o regex), que es una excelente manera de crear y probar expresiones regulares para JavaScript, Perl, PHP, Python y Ruby.

La colaboración es otro diferenciador del IDE de Komodo; considérelo como Google Docs para el código. Puede crear sesiones para grupos de archivos, agregar contactos a sesiones como colaboradores y luego trabajar juntos en los mismos archivos al mismo tiempo, con sincronización casi en tiempo real.

La colaboración no reemplaza el control del código fuente, pero es un complemento útil. Komodo IDE integra control de código fuente mediante CVS, Subversion, Perforce, Git, Mercurial y Bazaar. Solo se admiten las operaciones básicas de control de versiones. Las operaciones avanzadas, como la ramificación, deben realizarse utilizando un cliente de control de código fuente independiente.

Aunque Komodo no tiene su propio formateador de documentos JavaScript, aprovecha el mejor código abierto gratuito para este propósito. Fuera de la caja, el formateador predeterminado para archivos JavaScript es JS Beautifier, pero hay otras nueve opciones disponibles a través de un menú desplegable.

Komodo IDE admite la depuración de JavaScript del lado del cliente en Chrome, y puede depurar Node.js tanto de forma local como remota. También depura Perl, Python, PHP, Ruby, Tcl y XSLT.

Komodo IDE tiene un visor DOM que le permite ver documentos XML y HTML como árboles colapsables. También le permite realizar búsquedas XPath para filtrar el árbol.

Los módulos de creación de perfiles de código y pruebas unitarias de Komodo no son compatibles con JavaScript. Sin embargo, JavaScript y Node.js son compatibles con el módulo Code Intelligence de Komodo, que implementa la exploración de código, el autocompletado y las sugerencias de llamadas.

Komodo IDE puede publicar grupos de archivos a través de FTP, SFTP, FTPS o SCP. Komodo también puede sincronizar archivos y detectar posibles conflictos de publicación que podrían hacer que sobrescriba los cambios de otras personas.

En general, Komodo es un IDE de JavaScript bueno, pero no excelente, y un editor de JavaScript bueno, pero no excelente. Sin embargo, puede satisfacer sus necesidades, especialmente si también trabaja con Perl, Python, PHP, Ruby, Tcl o XSLT.

Costo: $ 295, más $ 87 por año para actualizaciones y soporte. Plataforma: Windows (7 o superior), MacOS (10.9 o superior), Linux.

Apache NetBeans

NetBeans tiene muy buen soporte para JavaScript, HTML5 y CSS3 en proyectos web, y es compatible con el marco Cordova / PhoneGap para crear aplicaciones móviles basadas en JavaScript. NetBeans no es el IDE más rápido del bloque, pero es uno de los más completos. Y, por supuesto, el precio es correcto: NetBeans está disponible gratis bajo una licencia de código abierto.

El editor de JavaScript de NetBeans proporciona resaltado de sintaxis, autocompletado y plegado de código, más o menos como cabría esperar. Las funciones de edición de JavaScript también funcionan para el código JavaScript incrustado en archivos PHP, JSP y HTML. El soporte de jQuery está integrado en el editor. NetBeans 8.2 tiene soporte nuevo o mejorado para Node.js y Express, Gulp, Grunt, AngularJS, Knockout.js, Jade, Mocha y Selenium.

El análisis de código se ejecuta en segundo plano a medida que edita, proporcionando advertencias y sugerencias. La depuración funciona en el navegador WebKit integrado y en Chrome con NetBeans Connector instalado. El depurador puede establecer DOM, línea, evento y puntos de interrupción XMLHttpRequest, y mostrará variables, relojes y la pila de llamadas. Una ventana de registro del navegador integrada muestra las excepciones, los errores y las advertencias del navegador.

NetBeans puede configurar y realizar pruebas unitarias con JsTestDriver, un archivo JAR (archivo Java) que puede descargar de forma gratuita. La depuración de las pruebas unitarias se habilita automáticamente si especifica Chrome con NetBeans Connector como uno de los navegadores JsTestDriver cuando configura JsTestDriver en la ventana Servicios.

Cuando depura una aplicación web en Chrome con NetBeans Connector y edita CSS desde Chrome Developer Tools, NetBeans capturará los cambios y los guardará en los archivos CSS. Sin embargo, si sus archivos CSS se generaron a partir de hojas de estilo Less o Sass, tendrá que actualizar manualmente la hoja de origen porque los archivos CSS son simplemente una salida compilada.

En el navegador WebKit integrado y en Chrome con NetBeans Connector instalado, puede usar el monitor de red NetBeans para ver los encabezados de las solicitudes, las respuestas y las pilas de llamadas para las comunicaciones REST. Para las comunicaciones WebSocket, se muestran tanto los encabezados como los marcos de texto. En general, NetBeans proporciona una experiencia de depuración ligeramente mejor con Chrome que en Firefox con Firebug.

NetBeans integra el control del código fuente con Git, Subversion, Mercurial y CVS. El soporte de Git se ve reforzado por un visor gráfico Diff y por un sistema de estanterías dentro del IDE. NetBeans codifica con colores el estado de los archivos en Git, le permite ver el historial de revisión de cada archivo y le muestra información de revisión y autor para cada línea de archivos controlados por versión. NetBeans tiene integraciones similares con Subversion, Mercurial y CVS, pero solo probé Git.

NetBeans integra el seguimiento de problemas con Jira y Bugzilla. En la ventana de tareas de NetBeans, puede buscar tareas, guardar búsquedas, actualizar tareas y resolver tareas en su repositorio de tareas registrado. NetBeans también tiene integración de servidor de equipo para sitios que usan la infraestructura de Kenai.

Por lo que puedo determinar, NetBeans carece de perfiles de JavaScript, aunque puede perfilar aplicaciones Java y módulos EJB. Y aunque NetBeans puede refactorizar Java y PHP, no puede refactorizar JavaScript.

En general, NetBeans es un competidor decente para el desarrollo de JavaScript, HTML5 y CSS3 del lado del cliente, especialmente si también está desarrollando Java, PHP o C ++ en el servidor. Si no tiene el presupuesto para WebStorm y no le gusta Microsoft, encontrará que NetBeans hace el trabajo, siempre y cuando no tenga mucha prisa.

Gratis. Plataforma: Windows, Solaris, MacOS, Linux. 

Microsoft Visual Studio 2017

En mi revisión completa de Visual Studio 2017, hablé del producto en su conjunto, con solo algunas referencias a JavaScript. Invertiré el énfasis aquí.

En general, Visual Studio 2017 funciona muy bien como un IDE de JavaScript, aunque es un IDE de .Net mejor y no es tan bueno como WebStorm para JavaScript. Si bien también funciona muy bien como editor de JavaScript, es un mejor editor de C # y no es tan bueno ni tan rápido como Sublime Text para JavaScript.

Como puede ver en la captura de pantalla a continuación, Visual Studio 2017 hace un buen trabajo con la coloración de la sintaxis de JavaScript y el plegado de código. También hace un buen trabajo con la navegación por código JavaScript: haga clic con el botón derecho en una función o nombre de miembro y podrá saltar fácilmente a la definición o encontrar todas las referencias. Cuando haya terminado de ver la definición, puede presionar la flecha hacia atrás en la parte superior de la interfaz para volver a donde estaba.

Puede insertar fácilmente fragmentos y rodear su selección con el código apropiado, como codificación HTML o URL de variables de cadena. Además de JavaScript, HTML y CSS, puede editar archivos Markdown y ver el Markdown renderizado, y puede trabajar con TypeScript.

Además, por supuesto, puede codificar en cualquier lenguaje .Net, en C ++ y en Python. Y como ha sido el caso de Visual Studio durante mucho tiempo, puede trabajar con bases de datos directamente desde el IDE. Visual Studio es especialmente fuerte cuando se trabaja con bases de datos de SQL Server. Puede salirse con la suya usando Visual Studio en lugar de SQL Server Management Studio para la mayoría de las operaciones de base de datos que le gustaría hacer como desarrollador.

Visual Studio 2017 admite la depuración en prácticamente cualquier navegador que desee lanzar, incluidos los navegadores en dispositivos móviles y emuladores. También tiene dos navegadores propios: el navegador web interno simple, que es (¡sorpresa!) Una versión de Internet Explorer, y el Inspector de página, que muestra la página renderizada junto con todas las fuentes y estilos. Aunque el inspector de página realiza muchas tareas de ingeniería inversa que pueden consumir mucho tiempo para configurarse para una página, una vez que está en él, puede permanecer allí sin tener que hacer malabares con Visual Studio, el navegador y las herramientas de desarrollo del navegador. .

El rendimiento de Visual Studio 2017 suele ser bastante bueno si le da suficiente memoria y potencia de CPU, pero tiende a requerir recursos importantes. Visual Studio 2017 tiene excelentes diagnósticos de rendimiento para las aplicaciones, pero en general no son tan útiles para el código JavaScript normal, que normalmente se ejecuta en las profundidades de un navegador. Visual Studio tiene funciones específicas de sincronización de funciones de JavaScript, capacidad de respuesta de la interfaz de usuario de HTML y herramientas de memoria de JavaScript, pero solo se aplican a proyectos de la Plataforma universal de Windows basados ​​en JavaScript, no a proyectos web que usen JavaScript.

Visual Studio 2017 incluye una excelente edición de aplicaciones Node.js, IntelliSense, creación de perfiles, integración NPM, compatibilidad con TypeScript, depuración local y remota (Windows, MacOS, Linux) y depuración en Azure Web Apps y Azure Cloud Services. También tiene soporte para CSS, HTML, JavaScript, TypeScript, CoffeeScript y Less. Esto incluye ejecutar JSHint mientras escribe, lo que le permite minimizar los archivos JavaScript desde un menú contextual y compilar automáticamente los archivos CoffeeScript al guardar, mostrando una vista previa en paralelo del JavaScript generado.