Los mejores IDE y editores de texto para el desarrollador front-end

Hace una docena o dos años, los sitios web se creaban con las manos y un editor de texto normal. Escriba sus propias etiquetas html, un poco de magia usando estilos en línea en CSS, aderezado con animaciones entretenidas, y el sitio estará listo para usar. Hoy en día, crear y desarrollar un sitio web o una aplicación es un proceso estructurado. Puedes crear un sitio web usando el creador de sitios web en un minuto, o puedes agonizar por ello durante varios meses. A medida que cambia el desarrollo web, surgen nuevos marcos, complementos y aplicaciones para optimizar la codificación. Las herramientas adicionales simplifican su entorno de trabajo y aumentan la productividad. Utilizamos sistemas de control de versiones para la gestión colaborativa de proyectos de código abierto y bibliotecas como jQuery. El entorno de desarrollo juega un papel muy importante en el proceso de creación de un sitio web. Elegir el procesador de textos ideal puede ser una tarea desafiante pero factible que requiere la aplicación de investigación empírica. ¿Cómo no perderse en este océano de herramientas, aplicaciones y complementos? ¿Qué editor de texto debería elegir para el trabajo diario y cuál para sus proyectos favoritos? Hemos compilado una breve lista de las herramientas más populares para desarrolladores frontend principiantes. ¿Olvidamos mencionar a tu editor favorito en el artículo? ¡Dejar comentarios!

Bloc de notas++

Lanzamiento: 24 de noviembre de 2003. El editor de texto más sencillo con resaltado de sintaxis y pestañas. Admite muchos lenguajes y tecnologías de programación. Perfecto para un principiante que acaba de pisar la pendiente resbaladiza del desarrollo web. Posibilidades:

• crear marcadores;
• copia y guardado automático de archivos creados;
• soporte y conversión de codificaciones de texto estándar;
• los usuarios pueden establecer reglas de forma independiente para el resaltado de sintaxis;
• instalación de varios complementos útiles;
• configurar y redefinir teclas de acceso rápido;
• revisión ortográfica y cifrado de texto;
• jugar Tetris (en caso de que estés cansado de codificar);
• puede gestionar grandes volúmenes de datos.

Una "característica" adicional de este editor es el "huevo de Pascua", que muestra citas del Padre Oscuro, Darth Vader, y del padre de la "carpeta del odio", Bill Gates. La mosca en el ungüento: una interfaz demasiado simplificada que no cumple con los estándares de desarrollo actuales. Se puede comparar con la luz de una linterna durante el día. Resaltado de sintaxis: + Detección automática de etiquetas: + Compatibilidad con sistemas operativos: Windows, ReactOS. Versión gratuita: sí. Enlace: https://notepad-plus-plus.org/download/v7.5.1.html

Soportes

Lanzamiento: 4 de noviembre de 2014. Adobe tiene muchos productos interesantes que adoran los desarrolladores y diseñadores de Frontend. Y Brackets es uno de ellos. Este editor gratuito, de código abierto y multiplataforma está basado en JavaScript, HTML5 y CSS3, por lo que su trabajo se centra específicamente en ellos. Si tiene conocimientos básicos de JavaScript, este es el editor con el que debería empezar a trabajar. Porque es él quien proporcionará todas las herramientas necesarias para la expansión. El editor necesita algunas mejoras, pero en general se está desarrollando de forma bastante activa y es popular entre los desarrolladores. Además, cada usuario puede realizar sus propios cambios y crear extensiones adicionales. Posibilidades:

• consejos para editar archivos JS, CSS y HTML;
• soporte para ver código en un navegador en tiempo real (Vista previa en vivo);
• sincronización con el servidor FTP;
• soporte y compilación automática de CSS en menos archivos;
• proporciona una selección de fuentes (con la posibilidad de agregarlas) que puede usar cuando trabaja con texto;
• trabajando con el sistema de control de versiones – Git.

La nueva versión de 2017 introdujo la capacidad de buscar en el historial, enviar y recibir archivos con diferentes codificaciones, navegar por el historial de edición mediante teclas de acceso rápido, habilitar y deshabilitar extensiones y un menú nativo para Linux. Resaltado de sintaxis: + Detección automática de etiquetas: + Compatibilidad con sistemas operativos: macOS, Windows y Linux. Versión gratuita: sí. Enlace: http://brackets.io

Sublime

Lanzamiento: 18 de enero de 2008. Editor de código multiplataforma y entorno de desarrollo integrado (IDE). Nos encantó este editor por su velocidad y facilidad de uso, mientras que Coda y TextMate se quedaron en el camino y decepcionaron a la principal base de usuarios con actualizaciones muy inconvenientes. Posibilidades:

• navegación rápida a través de archivos, símbolos y determinadas secciones de código (por eso a muchos usuarios les encanta);
• La función de verificación de sintaxis funciona inmediatamente cuando ingresa caracteres;
• optimización y repetición de acciones recientes mediante macros;
• guardado automático del código, lo que evita su pérdida;
• soporte para varios temas visuales y lenguajes de programación;
• guardar palabras clave y fragmentos de código de uso frecuente;
• un conjunto de complementos listos para usar en Python;

Resaltado de sintaxis: + Detección automática de etiquetas: + Compatibilidad con sistemas operativos: Windows, Mac OS, GNU/Linux. Versión gratuita: sí (sin limitaciones funcionales), pero después de revisar la aplicación, es necesario adquirir una licencia. Enlace: http://www.sublimetext.com/3

Tormenta web

Lanzamiento: 2015. Este no es un editor de texto ordinario, sino también un entorno de desarrollo integrado para JavaScript, CSS y HTML. Sus autores son JetBrains, la misma empresa que creó el entorno IntelliJ IDEA, amado por los estudiantes de JavaRush. WebStorm es uno de los editores más inteligentes y populares. Admite los marcos principales: AngularJS, React y Meteor y se utiliza para crear una aplicación en Node.js. WebStorm es un entorno bastante complejo, pero al mismo tiempo es ideal para quienes necesitan muchas extensiones y funciones. Posibilidades:

• Trabaja eficazmente con proyectos de diferentes tamaños gracias a la integración con sistemas de control de versiones Git, GitHub, Mercurial. Esto le permite "confirmar" archivos, revisar cambios y resolver conflictos directamente dentro del IDE;
• LiveEdit: muestra cambios preliminares sin recargar la página (funciona con el navegador Google Chrome);
• análisis de código durante la edición;
• refactorización y depuración de código para aplicaciones Javascript y Node.js;
• soporte para lenguajes ECMAScript, TypeScript, CoffeeScript y Dart;
• crear aplicaciones utilizando la plantilla Node.js Express;
• Lanzamiento y depuración con frameworks como Mocha, Karma y Protractor. Puede probarlo en el propio editor o en un cómodo menú de árbol, desde el que puede volver rápidamente al texto;
• Los preprocesadores LESS, Sass, SCSS y Stylus son totalmente compatibles;
• búsqueda rápida en la ventana del terminal;
• estructurar proyectos que involucran múltiples bibliotecas Javascript;
• soporte para JQuery, YUI, Prototype, DoJo, MooTools, Qooxdoo y Bindows;
• soporte inicial y trabajo con Angular 2.

Resaltado de sintaxis: + Detección automática de etiquetas: + Compatibilidad con sistemas operativos: Windows, Mac OS, GNU/Linux. Versión gratuita: Hay una versión de prueba por 30 días, luego debes comprar una licencia. Enlace: http://www.jetbrains.com/webstorm/

Átomo

Lanzamiento: 26 de febrero de 2014. Software gratuito de código abierto creado por los autores del Github favorito de todos . Está construido sobre 50 módulos y escrito en Node JS, CoffeeScript, CSS, HTML y C++. También puede desarrollar sus propios módulos y publicarlos en un repositorio de acceso abierto. Este entorno de desarrollo es bastante fácil de usar y los complementos adicionales ayudan a ampliar las posibilidades de trabajar con él. Posibilidades:

• utiliza GUI para la configuración en lugar de archivos json;
• ver un minimapa del código y sus fragmentos;
• búsqueda rápida por proyectos y archivos;
• conveniente barra lateral y árbol de archivos;
• una gran cantidad de paquetes de extensión disponibles en Github;
• Emmet, Autoprefixer, soporte Livereload;
• ver un archivo a través del árbol de la barra lateral;
• la capacidad de personalizar el editor según las preferencias individuales del usuario;
• presencia de un administrador de archivos incorporado;
• no es necesario instalar un paquete de control con complementos, basta con utilizar la interfaz gráfica de usuario;
• soporte para complementos escritos en Node.js;
• vista previa de imágenes PNG, JPEG directamente en el editor;
• ofrece trabajo con el sistema de control de versiones Git.

El inconveniente puede ser que requiere mucha memoria y no es capaz de manejar archivos de datos de gran tamaño. Resaltado de sintaxis: + Detección automática de etiquetas: + Compatibilidad con sistemas operativos: Windows 7, 8, Mac OS 10.8, Linux. Versión gratuita: sí. Enlace: https://atom.io

Empuje

Lanzamiento: 2 de noviembre de 1991. Quizás se pregunte: ¿qué olvidó el viejo Vim en esta lista de editores modernos? De hecho, Vim es un editor de texto completamente moderno y potente, creado sobre la base del antiguo vi, disponible en sistemas operativos UNIX. Y está en constante evolución. Los desarrolladores realizan cambios casi todos los años, agregando nuevos complementos y complementos. La última vez que esto sucedió fue en 2016, y la cantidad de extensiones y la velocidad es realmente asombrosa y vale la pena echarle un vistazo. Vim es un editor multimodo. Puedes trabajar en varios a la vez: comando, inserción o visual. Sin embargo, vale la pena considerar que esto es bastante complejo para un desarrollador novato. Aunque especialistas con muchos años de experiencia desconocen muchas de sus funciones. Posibilidades:

• soporte para codificaciones de texto estándar;
• puedes trabajar con varios archivos al mismo tiempo;
• reconocimiento y conversión automática de archivos;
• compatibilidad con lenguajes de programación Perl, Tcl, Python y Ruby;
• crear ambientes cómodos para las necesidades de cada usuario;
• grabar e implementar macros;
• el modo visual puede realizar muchas funciones útiles (por ejemplo, resaltar bloques de texto);
• soporte para idiomas no estándar escritos de derecha a izquierda (como árabe o hebreo);
• configuraciones convenientes para palabras de búsqueda e historial de comandos;
• Admite el uso completo del teclado sin mouse;
• demuestra un rendimiento sorprendente cuando se trabaja con archivos grandes.

Resaltado de sintaxis: + Detección automática de etiquetas: + Compatibilidad con sistemas operativos: Windows, DOS, Linux, BSD y Mac OS, iOS, Android, AmigaOS, Atari MiNT, BeOS, NextStep, OS/2, OSF, RISC OS, SGI, VMS. Versión gratuita: sí. Enlace: https://vim.sourceforge.io/download.php

netbeans

Lanzado: 1997. IDE gratuito y de código abierto, patrocinado por Oracle y respaldado por desarrolladores entusiastas. Se desarrolla y complementa constantemente con varias extensiones para mayor comodidad y mejora de la velocidad. Posibilidades:

• gestión de ventanas y almacenamiento;
• cambios de interfaz y diseño (incluidos menús y ventanas emergentes);
• configurar una conexión con un servidor remoto;
• Refactorización de código disponible;
• hay complementos, plantillas y generadores de código;
• admite muchos lenguajes de programación;
• verificación y corrección automática de sintaxis;
• personalizar el editor para adaptarlo a las necesidades del usuario;
• iniciar y depurar aplicaciones JavaScript y Node.JS;
• soporte para frameworks PHP (Symfony, Zend y Yii).

Vuela en el ungüento: consume mucha memoria. Resaltado de sintaxis: + Detección automática de etiquetas: + Compatibilidad con sistemas operativos: Microsoft Windows, Linux, FreeBSD, Mac OS X, OpenSolaris y Solaris. Versión gratuita: sí. Sólo que es gratis. Enlace: https://netbeans.org

Bonificación incondicional: Bloc de notas, también conocido como "Bloc de notas"

Lanzamiento: 1985, junto con Windows 1.0. Sí, sí, el mismo Bloc de Notas que viene instalado por defecto en todos tus ordenadores con Windows. "¿Qué es lo que esta antigüedad ha olvidado aquí? ¿Qué tiene ESTO que ver con el desarrollo?", te preguntas. De hecho, entendemos que es poco probable que hoy en día alguien cree algo serio en el Bloc de notas clásico. Sin embargo, es en este programa donde muchos desarrolladores novatos han pasado los últimos 15 a 20 años “creando” sus primeros sitios web y escribiendo sus primeros programas. Lo que queremos decir es que si quieres aprender, nada debería detenerte. Para un verdadero desarrollador (y alguien que quiera convertirse en uno), el Bloc de notas no es un obstáculo. Características: sólo texto negro, sólo duro. Vuela en el ungüento: no hay mosca en el ungüento: ¡“Bloc de notas” es perfecto en su minimalismo! Resaltado de sintaxis: no. ¡Entrena tu memoria! Detección automática de etiquetas: ¡ guau! Versión gratuita: el Bloc de notas es tan gratuito como su Windows.