Éditeurs de code ou IDE complet ?

Simples éditeurs de code ou véritables IDE ?

De nos jours développer pour le web, qu’il s’agisse de simples sites web ou d’applications en ligne, il est nécessaire de travailler en employant plusieurs langages et divers outils de programmation.

De manière classique, et plus générale, nous avons besoin de HTML pour gérer la structure, de CSS pour prendre en compte l’aspect mise en page et gestion du visuel, de JavaScript afin d’apporter l’interactivité qu’elle soit liée aux interactions de l’utilisateur ou purement applicatives, de PHP pour administrer le coté serveur des appications, ou des sites, de SQL pour distribuer et trier l’information au sein des bases de données, de librairies ou frameworks pour optimiser le travail et nous pourrions continuer ainsi la liste des langages qui pourrait également nous être utiles et l’étendre à Ruby, Python, C#, Shell, etc.. etc…

Le point commun de tout ces lanages est que tous utilisent du texte pour être définis et composés. Donc un éditeur de texte brut, c’est à dire sans mise en forme, peut être largement suffisant. Et c’est bien soiurvent le cas.

À y regarder de plus prêt, lors de la mise en place du site, et surtout des fichiers qui vont le constituer, nous avons également besoin de transversalité pour lier les fichiers entre eux, de transfert de fichier pour les placer en ligne et éventuellement de les comparer avec l’existant pour en suivre les modifications, et leurs mises à jour. Nous avons également besoin d’une plateforme de débugage pour simplifier l’écriture et les mises en place de fonctionnalités, d’environnementsde tests… bref tout une panoplie d’outils complémentaires qui viendront encadrer l’éditeur de texte initial. Nous parlons alors là de véritable envrionnement de développement, ou encore d’IDE.

Donc de quoi avons nous besoin en fin de compte ?

Tout va dépendre de la manière de travailler, s’il s’agit d’un choix personnel ou de celui qui est imposé par l’équipe de travail. Quoiqu’il en soit tous ces outils peuvent aussi être utilisés transversalement, et de pair, du fait que tous ne font au final que produire des fichiers dans des formats standards, à savoir .html, .css, .js, .json, .php, .sql, etc…

Bien que chaque choix puisse être personel, et subjectif, voici quelques critères qui peuvent aider à sélectionner le type d’outil qui réponde le mieux à nos attentes.

Environnement et interface utilisateur

Passer plusieurs heures par jour à écrire du code, à travailler sur divers projets il est important que l’interface utilisateur et l’environnement visuel de travail soit suffisament ergonomiques et puissent répondre à nos attentes en terme d’utilisabilité.

L’organisation en menus, palettes, boites de dialogue peut varier d’un outil à l’autre, et il est important que tout puisse rester configurable à souhaits.

Attention, en fonction de votre plateforme, certains outils n’existent que sous Mac, ou que sous Windows… d’autres sont accessibles et utilisables en ligne depuis un navigateur. Certains proposent d’utiliser des langages de préprocessing ou de marquage comme le markdown.

Gestion de projets, ou de sites

Il est fréquent que nous soyons amené à travailler sur plusieurs projets en simultané. Si tel est le cas, il est primordial que l’outil utilisé puisse mémoriser l’ensemble des informations propres à chaque projets, telle que les chemins d’accès aux répertoires principaux, l’arborescence des fichiers, les paramètres de formatages du code, les comptes FTP, ou GIT, employés, et tout un ensemble de paramètres propre à chaque travaux etc..

De cette façon simplement en basculant d’un projet à un autre, l’ensemble des informations principales se recaleront en fonction des besoins propres à chaque projets (FTP, arborescence, chemin d’accès…) et assouplissent ainsi le travail conojoint entre clients.

Coloration et formatage du code

Chaque langage présente ses particularités, par exemple le HTML s’appuie sur des balises qui contiennent elles même d’une part le contenu qu’elles encapsulent, mais aussi des attributs qui les qualifient. Il existe diverses familles de balises comme celle relatant le Texte (h1, h2…, p, q, blocquote, strong, em…), les Formulaires (form, input, select, textarea…), la découpe Structurelle du contenu (header, section, article, aside, div, span…), les médias et multimédia (img, audio, video, picture, object…), les données (table, head, meta, etc…).

De son coté le JavaScript va se composer de multiples facettes entre les parties de description commentaires, variables, constantes, données, mais aussi avec les déroulements d’algorythmes au travers de directives comme les boucles, les tests de conditions, les initalisations et autres compositions…

Les CSS eux aussi vont au travers des diverses règles et descriptions associer propriétés et valeurs, mais si on s’appuie également sur un langage de préprocessing tel que SASS, nous allons encore utiliser des directives et autres types de manipulations de chaines, qui vont encore venir enrichir les possibilités de croisement qu’offre le langage.

Bref, comme nous pouvons le constater cela donne un grand nombre d’élément de description qui vont nécessairement rendre le code verbeux et parfois complexe à lire et à parcourir. En ce sens la coloration et le formatage du code vont pouvoir nous aider largement à assouplir les manipulations de code, qu’il s’agisse d’écriture directe, de mise à jour ou de complétion. Certains préfereront un environnement clair (light) ou obscur (dark), avec des typos de types serif classiques, comme Courier, ou au contraire des typos sans serif comme Inconsolata ou Source Sans Pro.

Ensemble d’outils intégrés

Le travail de développement d’interface web ne se résume pas à devoir écrire du code, il y existe bien plus tâches que nous devrons accomplir au quotidien. Voici une liste non exhaustive de certaines d’entre elles qui parfois peuvent aussi nécessiter l’emploi d’outil externe et indépendant, ou au contraire être directement intégré à l’outil de développement:

• En premier lieu, le client FTP/SFTP, qui permet le transfert de fichiers entre les différents serveurs locaux ou distants. Cet outils doit également répondre à un certain nombre de critères qui vont assouplir cette gestion comme le cryptage, les synchronisations, la gestion des codages, les inversions de priorités, etc…
• Bien qu’il existe des solutions externes et indépendantes, une gestion de versionning comme GIT est un véritable plus. Cela permet depuis la même interface utilisateur de pouvoir s’assurer des évolutions du projet et de garantir une rétroactivité/sauvegarde de l’ensemble des fichiers.
• Une interface permettant de pouvoir rapidement travailler transversallement sur l’ensemble des fichiers en relation. Par exemple un fichier source écrit en HTML, ou PHP, peut nécéssier un ensemble de fichiers en relation comme d’autres insertion HTML/PHP, des styles CSS, des scripts JavaScript… et pouvoir atteindre simplement, et rapidement, tous ces fichiers relatifs est une souplesse et un confort de travail garantie.
• Permettre un rendu en temps réel tout en continuant de développer permet de mettre en place une ergonomie de travail incontournable. De plus le web se devant d’être responsive, une pluri distribution des contenus tout en s’assurant de leur bonne portabilité en terme de design et d’affichage et ce quelque soit le périphérique de sortie offre également une grande souplesse de travail.
• Sans véritable plateforme, ou environnement, de débugage il est complexe d’améliorer et faire évoluer les fonctionnalités d’un site ou d’une application. Au fur et à mesure que le projet prend de l’ampleur il devient alors rapidement compliqué de tracer les erreurs, ou les mal fonctions, éventuelles. Une console de débugage est alors nécessaire et se doit d’être intégrée à notre processus de travail.
• Un outil de rechercher/remplacer doit permettre de travailler aussi bien sur une portion de texte (code ou contenu) que sur l’ensemble des fichiers composant le projet. L’appui sur les expressions régulières ne doit pas être une simple option, mais bien au contraire faire partie intégrante du processus. L’ensemble des résultats de recherche doit pouvoir d’une part être sauvegardé mais aussi doit permettre d’atteindre rapidement les emplacements correspondants.
• La comparaison entre des portions de codes, ou entre des fichiers doit pouvoir également être opérée et ce aussi bien sur de simples sélection que sur un ensemble de fichiers présents dans des dossiers.

Possibilité d’ajout d’extensions

L’outil parfait et complet n’existe pas, et quand bien même, il pourrait devenir rapidement obsolète, ou se serait orienté dans une mauvaise direction stratégique. Donc un véritable et juste compromis reste encore que l’outil ouvre ses portes vers une architecture permettant à des éditeurs externes et tierces d’en étendre les possibilités au travers de modules externes, ou d’extensions (plug-ins).

Un exemple frappant reste le Package Control, qui est un gestionnaire de d’extensions dédié à l’éditeur de code Subime Text. Le catalogue est impressionnant en proposant tout aussi bien des thèmes visuels, ou des améliorations d’environnement pour l’éditeur lui même que des prise en comptes de fonctionnalités et de langages complémentaires.

Un autre éditeur qui mérite d’être mentionné est Visual Studio Code (VSC), qui a su s’imposer comme un favori parmi les développeurs. Tout comme Sublime Text, VSC adopte une approche modulaire grâce à son vaste écosystème d’extensions. Grâce à son Marketplace, les utilisateurs peuvent enrichir leur expérience de codage avec des milliers d’extensions qui offrent des fonctionnalités variées, allant de l’intégration de langages supplémentaires à des outils de débogage avancés.

De plus, la communauté active autour de VSC contribue à un flux constant d’améliorations et de nouvelles fonctionnalités, garantissant ainsi que l’éditeur reste à la pointe des besoins des développeurs. Son interface utilisateur conviviale, combinée à une riche fonctionnalité de personnalisation, en fait un choix idéal pour ceux qui cherchent un éditeur puissant et adhoc. Pour en savoir plus et participer, vous pouvez visiter la page GitHub de Visual Studio Code, qui sert de plateforme pour le développement collaboratif et le partage d’idées. D’autres ressources utiles incluent le site officiel de Visual Studio Code pour la documentation et les tutoriels, ainsi que le Marketplace des extensions pour explorer des outils supplémentaires créés par la communauté.

De quels outils disposons nous?

N’ayant pas trouvé de tableaux récapitulatif sur l’ensemble de éditeurs de code et/ou d’IDE à disposition, il a fallu le créer et le compléter. Voici donc un tableau récapitulatif représentant un grand nombre d’outils disponibles et à disposition.

Éditeurs de code et IDE

Éditeurs		Type	Plateforme	Dist.	Description
Aptana		IDE	All	Free	Aptana Studio 3. The professional, open source development tool for the open web. It's ready. It's time. Develop and test your entire web application using a single environment. With support for the latest browser technology specs such as HTML5, CSS3, JavaScript, Ruby, Rails, PHP and Python. We've got you covered!
Atom		Editor	All	Free	Atom is a text editor that's modern, approachable, yet hackable to the core—a tool you can customize to do anything but also use productively without ever touching a config file.
BB Edit		Editor	Mac	Premium	BBEdit is the leading professional HTML and text editor for the Macintosh. Specifically crafted in response to the needs of Web authors and software developers, this award-winning product provides an abundance of high-performance features for editing, searching, and manipulation of text. An intelligent interface provides easy access to BBEdit’s best-of-class features, including grep pattern matching, search and replace across multiple files, project definition tools, function navigation and syntax coloring for numerous source code languages, code folding, FTP and SFTP open and save, AppleScript, macOS Unix scripting support, text and code completion, and of course a complete set of robust HTML markup tools.
Bluefish		IDE	All	Free	Bluefish is a powerful editor targeted towards programmers and webdevelopers, with many options to write websites, scripts and programming code. Bluefish supports many programming and markup languages. See features for an extensive overview, take a look at the screenshots, or download it right away. Bluefish is an open source development project, released under the GNU GPL licence. Bluefish is a multi-platform application that runs on most desktop operating systems including Linux, FreeBSD, MacOS-X, Windows, OpenBSD and Solaris.
Brackets		Editor	All	Free	A modern, open source text editor that understands web design. With focused visual tools and preprocessor support, Brackets is a modern text editor that makes it easy to design in the browser. It's crafted from the ground up for web designers and front-end developers.
Coda		IDE	Mac	Premium	You code for the web. You demand a fast, clean, and powerful text editor. Pixel-perfect preview. A built-in way to open and manage your local and remote files. And maybe a dash of SSH. Say hello, Coda.
Code Runner		Editor	Mac	Premium	An advanced, highly flexible, and easy-to-use programming editor for your Mac. CodeRunner supports a large number of languages, and delivers big IDE features while remaining lightweight and clutter-free.
Coffee Cup		Editor	Windows, Mac	Premium	CoffeeCup HTML Editor is an HTML editor. Originally created by Nicholas Longo and Kevin Jurica, it was first released to the public in August 1996. Until version 12.5 released in 2012, it was capable of WYSIWYG editing. According to the authors the editor was the first to support Javascript (version 3.5 Sep. 1996), split-screen editing (version 4.0, March 1997) and built-in FTP upload (version 5.2, February 1998). It was voted Best Windows HTML Editor in the About.com Readers' Choice Awards two years in a row in 2011 and 2012.
Dilinger		Editor	Online	Free	Dillinger is a cloud-enabled, mobile-ready, offline-storage, AngularJS powered HTML5 Markdown editor.
Dreamweaver		IDE	Windows, Mac	Premium	Adobe Dreamweaver is a proprietary web development tool developed by Adobe Systems. Dreamweaver was created by Macromedia in 1997, and was maintained by them until Macromedia was acquired by Adobe Systems in 2005. Adobe Dreamweaver is available for macOS and for Windows. Following Adobe's acquisition of the Macromedia product suite, releases of Dreamweaver subsequent to version 8.0 have been more compliant with W3C standards. Recent versions have improved support for Web technologies such as CSS, JavaScript, and various server-side scripting languages and frameworks including ASP (ASP JavaScript, ASP VBScript, ASP.NET C#, ASP.NET VB), ColdFusion, Scriptlet, and PHP
Eclipse		IDE	All	Free	Eclipse is an integrated development environment (IDE) used in computer programming, and is the most widely used Java IDE. It contains a base workspace and an extensible plug-in system for customizing the environment. Eclipse is written mostly in Java and its primary use is for developing Java applications, but it may also be used to develop applications in other programming languages via plug-ins, including Ada, ABAP, C, C++, C#, COBOL, D, Fortran, Haskell, JavaScript, Julia, Lasso, Lua, NATURAL, Perl, PHP, Prolog, Python, R, Ruby (including Ruby on Rails framework), Rust, Scala, Clojure, Groovy, Scheme, and Erlang. It can also be used to develop documents with LaTeX (via a TeXlipse plug-in) and packages for the software Mathematica. Development environments include the Eclipse Java development tools (JDT) for Java and Scala, Eclipse CDT for C/C++, and Eclipse PDT for PHP, among others.
Emacs		Editor	All	Free	Emacs is a family of text editors that are characterized by their extensibility. The manual for the most widely used variant, GNU Emacs, describes it as 'the extensible, customizable, self-documenting, real-time display editor'. Development of the first Emacs began in the mid-1970s, and work on its direct descendant, GNU Emacs, continues actively as of 2017. Emacs has over 10,000 built-in commands and its user interface allows the user to combine these commands into macros to automate work. Additionally, implementations of Emacs typically feature a dialect of the Lisp programming language that provides a deep extension capability, allowing users and developers to write new commands and applications for the editor. Extensions have been written to manage email, files, outlines, and RSS feeds, as well as clones of ELIZA, Pong, Conway's Life, Snake and Tetris.
ICEcoder		Editor	All	Free	ICEcoder is a browser based code editor, which provides a modern approach to building websites. By allowing you to code directly within the web browser, online or offline, it means you only need one program (your browser) to develop sites, plus can test on actual web servers. After development, you can also maintain the website easily, all of which make for speedy and smart development. Because it can be web based you can use it from any internet enabled computer with a modern browser and because it's built with commom web languages, you can customise it to your liking, integrating with online services. If you'd like to use it as a desktop code editor, no problems, you only need PHP 5.0+ (though 5.3+ is recommeded), so you can use on Linux and on PC via WAMP or XAMPP and Mac via MAMP (or another PHP installation).
jEdit		Editor	All	Free	jEdit is a mature programmer's text editor with hundreds (counting the time developing plugins) of person-years of development behind it. To download, install, and set up jEdit as quickly and painlessly as possible, go to the Quick Start page. While jEdit beats many expensive development tools for features and ease of use, it is released as free software with full source code, provided under the terms of the GPL 2.0. The jEdit core, together with a large collection of plugins is maintained by a world-wide developer team.
Komodo Edit, Komodo IDE		Editor, IDE	All	Free, Premium	Komodo Edit is a great editor if you're looking for something powerful, yet simple. If you need more professional functionality such as debugging, unit testing, code refactoring, code profiling, plus integrations with other technologies (version control systems, Gulp, Grunt, PhoneGap, Docker, Vagrant, etc.), Komodo IDE is the solution for you.
Mou		Editor	Mac	Premium	Mou is a Markdown editor for developers, on Mac OS X. Features live preview, sync scroll, auto save, powerful actions, auto pair, custom themes and CSS, HTML and PDF export, enhanced CJK support and more.
Nano		Editor	Linux	Free	GNU nano - an enhanced clone of the Pico text editor. The nano project was started because of a few 'problems' with the wonderfully easy-to-use and friendly Pico text editor. First and foremost is its license: the Pine suite does not use the GPL or a GPL-friendly license, and has unclear restrictions on redistribution. Because of this, Pine and Pico are not included with many GNU/Linux distributions. Also, other features (like goto line number or search and replace) were unavailable until recently or require a command line flag. Yuck. nano aims to solve these problems by emulating the functionality of Pico as closely as possible while addressing the problems above and perhaps providing other extra functionality.
Net Beams		IDE	All	Free	NetBeans IDE lets you quickly and easily develop Java desktop, mobile, and web applications, as well as HTML5 applications with HTML, JavaScript, and CSS. The IDE also provides a great set of tools for PHP and C/C++ developers. It is free and open source and has a large community of users and developers around the world.
Note Pad++		Editor	Windows	Free	Notepad++ is a free (as in 'free speech' and also as in 'free beer') source code editor and Notepad replacement that supports several languages. Running in the MS Windows environment, its use is governed by GPL License. Based on the powerful editing component Scintilla, Notepad++ is written in C++ and uses pure Win32 API and STL which ensures a higher execution speed and smaller program size. By optimizing as many routines as possible without losing user friendliness, Notepad++ is trying to reduce the world carbon dioxide emissions. When using less CPU power, the PC can throttle down and reduce power consumption, resulting in a greener environment.
PHP Storm		IDE	All	Premium	JetBrains PhpStorm is a commercial, cross-platform IDE for PHP built on JetBrains' IntelliJ IDEA platform. PhpStorm provides an editor for PHP, HTML and JavaScript with on-the-fly code analysis, error prevention and automated refactorings for PHP and JavaScript code. PhpStorm's code completion supports PHP 5.3, 5.4, 5.5, 5.6 & 7.0 (modern and legacy projects), including generators, coroutines, the finally keyword, list in foreach, namespaces, closures, traits and short array syntax. It includes a full-fledged SQL editor with editable query results. PhpStorm is built on IntelliJ IDEA, which is written in Java. Users can extend the IDE by installing plugins created for the IntelliJ Platform or write their own plugins. All features available in WebStorm are included in PhpStorm, which adds support for PHP and databases. WebStorm ships with pre-installed JavaScript plugins (such as for Node.js).
Pinegrow		IDE	All	Premium	Build websites faster with the new Pinegrow 4. A desktop web editor that lets you build responsive websites faster with live multi-page editing, CSS & SASS styling and smart components for Bootstrap, Foundation and WordPress.
Programmer Notepad		Editor	Windows	Free	Programmer's Notepad (PN1) is an open-source text editor targeted at users who work with source code. It was released in 1998 by Echo Software (a trading name for Simon Steele). PN1's successor, Programmer's Notepad 2 (PN2), was released in 2002 and is now based on Scintilla. PN2 adds to Scintilla's features by supporting multi-line regular expressions for search and replace actions.
RJ TextEd		Editor	Windows, Linux	Free	RJ TextEd is a full featured text and source editor with Unicode support. It is also a very powerful web (PHP, ASP, JavaScript, HTML and CSS) development editor. The functionality extends beyond text files and includes support for CSS/HTML editing with integrated CSS/HTML preview, spell checking, auto completion, HTML validation, templates and more. The program also has a dual pane file commander, as well as a (S)FTP client to upload your files. Below is a small list of features available. For a full list check out the features section. RJ TextEd is released as FREEWARE. However, if you find the program useful I would appreciate a small donation.
Slick Edit		Editor	All	Premium	A true cross-platform, multi-language code editor, with support for over 60 languages on 9 platforms. SlickEdit Standard: Great for single file oriented operations and one-off scripts. Loading very large files is quick and painless. SlickEdit Pro: Build and debug large or complex projects. Stay in sync with version control integration and powerful file differencing tools. All your project's symbols are tagged for quick and easy lookup, analysis, and navigation.
Stack Edit		Editor	Online	Free	Full-featured, open-source Markdown editor based on PageDown, the Markdown library used by Stack Overflow and the other Stack Exchange sites.
Sublime Text		Editor	All	Free, Premium	Sublime Text is a proprietary cross-platform source code editor with a Python application programming interface (API). It natively supports many programming languages and markup languages, and functions can be added by users with plugins, typically community-built and maintained under free-software licenses.
Text Mate		Editor	Mac	Premium	TextMate brings Apple's approach to operating systems into the world of text editors. By bridging UNIX underpinnings and GUI, TextMate cherry-picks the best of both worlds to the benefit of expert scripters and novice users alike.
Texts		Editor	Windows, Mac	Free	Markdown editor for Mac and Windows. Tables, images, footnotes, math and more. Export to PDF, HTML, Word, ePub.
Ultra Edit		IDE	All	Premium	UltraEdit is a commercial text editor for Microsoft Windows, Linux and OS X created in 1994 by the founder of IDM Computer Solutions Inc., Ian D. Mead. The editor contains tools for programmers, including macros, configurable syntax highlighting, code folding, file type conversions, project management, regular expressions for search-and-replace, a column-edit mode, remote editing of files via FTP, interfaces for APIs or command lines of choice, and more. Files can be browsed and edited in tabs, and it also supports Unicode and hex editing mode.
Vim		Editor	All	Free	Vim is a highly configurable text editor built to make creating and changing any kind of text very efficient. It is included as 'vi' with most UNIX systems and with Apple OS X.
Visual Studio Code		Editor	All	Free	Visual Studio Code is a source code editor developed by Microsoft for Windows, Linux and macOS. It includes support for debugging, embedded Git control, syntax highlighting, intelligent code completion, snippets, and code refactoring. It is also customizable, so users can change the editor's theme, keyboard shortcuts, and preferences. It is free and open-source, although the official download is under a proprietary license. Visual Studio Code is based on Electron, a framework which is used to deploy Node.js applications for the desktop running on the Blink layout engine. Although it uses the Electron framework, the software does not use Atom and instead employs the same editor component (codenamed 'Monaco') used in Visual Studio Team Services (formerly called Visual Studio Online).
Wappler		IDE	All	Premium	Wappler is standing for Web App Builder. We give you the opportunity to create single page applications and mobile apps without any skills! And following DMXzone's main principle: just add creativity. In a nutshell: Wappler you will be able to fully visually create web sites and apps by combining many ready to go components and defining fully visually your application flow and functioning.
Web Storm		IDE	All	Premium	WebStorm is a cross-platform IDE primarily for web, JavaScript and TypeScript development. Many of JetBrain's other IDEs include the feature set of WebStorm via plugins.
Webflow		IDE	All	Premium	Design and develop at the same time. Webflow gives designers and developers the power to design, build, and launch responsive websites visually, while writing clean, semantic code for you.