I migliori IDE ed editor di testo per lo sviluppatore front-end

Una dozzina o due anni fa, i siti web venivano realizzati utilizzando le mani e un normale editor di testo. Scrivi i tuoi tag html, un po' di magia usando gli stili in linea nei CSS, conditi con animazioni divertenti - e il sito è pronto per l'uso. Al giorno d'oggi, la creazione e lo sviluppo di un sito Web o di un'applicazione è un processo strutturato. Puoi creare un sito web utilizzando il costruttore di siti web in un minuto, oppure puoi tormentarti per diversi mesi. Man mano che lo sviluppo web cambia, stanno emergendo nuovi framework, plugin e applicazioni per semplificare la codifica. Strumenti aggiuntivi semplificano l'ambiente di lavoro e aumentano la produttività. Utilizziamo sistemi di controllo della versione per la gestione collaborativa di progetti open source e librerie come jQuery. L’ambiente di sviluppo gioca un ruolo molto importante nel processo di creazione di un sito web. Scegliere l'elaboratore di testi ideale può essere un compito impegnativo ma fattibile che richiede l'applicazione della ricerca empirica. Come non perdersi in questo oceano di strumenti, applicazioni e plugin? Quale editor di testo dovresti scegliere per il lavoro quotidiano e quale per i progetti domestici? Abbiamo compilato un breve elenco degli strumenti più popolari per gli sviluppatori frontend principianti. Ci siamo dimenticati di menzionare il tuo editor preferito nell'articolo? Lascia commenti!

Blocco note++

Rilascio: 24 novembre 2003. L'editor di testo più semplice con evidenziazione della sintassi e tabulazioni. Supporta molti linguaggi e tecnologie di programmazione. Perfetto per un principiante che è appena entrato nel pendio scivoloso dello sviluppo web. Possibilità:

• creazione di segnalibri;
• copia e salvataggio automatici dei file creati;
• supporto e conversione di codifiche di testo standard;
• gli utenti possono impostare in modo indipendente le regole per l'evidenziazione della sintassi;
• installazione di vari plugin utili;
• impostazione e ridefinizione dei tasti di scelta rapida;
• controllo ortografico e crittografia del testo;
• giocare a Tetris (nel caso tu sia stanco di programmare);
• può gestire grandi volumi di dati.

Un'ulteriore "caratteristica" di questo editor è considerata un "uovo di Pasqua" sotto forma di citazioni del Padre Oscuro - Darth Vader e del padre della "cartella dell'odio" - Bill Gates. L'unico neo: un'interfaccia eccessivamente semplificata che non soddisfa gli standard di sviluppo odierni. Può essere paragonato alla luce di una torcia durante il giorno. Evidenziazione della sintassi: + Rilevamento automatico dei tag: + Compatibilità del sistema operativo: Windows, ReactOS. Versione gratuita: sì. Collegamento: https://notepad-plus-plus.org/download/v7.5.1.html

Parentesi

Rilasciato: 4 novembre 2014. Adobe offre molti prodotti interessanti amati dagli sviluppatori e dai designer frontend. E Brackets è uno di questi. Questo editor multipiattaforma gratuito, open source è basato su JavaScript, HTML5 e CSS3, quindi il suo lavoro si concentra specificamente su di essi. Se hai una conoscenza di base di JavaScript, allora questo è l'editor con cui dovresti iniziare a lavorare. Perché sarà lui a fornire tutti gli strumenti necessari per l'espansione. L'editor necessita di alcuni miglioramenti, ma nel complesso viene sviluppato in modo piuttosto attivo ed è popolare tra gli sviluppatori. Inoltre, ogni utente può apportare le proprie modifiche e creare estensioni aggiuntive. Possibilità:

• suggerimenti per modificare file JS, CSS e HTML;
• supporto per la visualizzazione del codice in un browser in tempo reale (Live Preview);
• sincronizzazione con server FTP;
• supporto e compilazione automatica dei CSS in meno file;
• fornisce una selezione di caratteri (con la possibilità di aggiungerli) che puoi utilizzare quando lavori con il testo;
• lavorare con il sistema di controllo della versione – Git.

La nuova versione del 2017 ha introdotto la possibilità di effettuare ricerche nella cronologia, inviare e ricevere file con codifiche diverse, navigare nella cronologia delle modifiche utilizzando tasti di scelta rapida, abilitare e disabilitare estensioni e un menu nativo per Linux. Evidenziazione della sintassi: + Rilevamento automatico dei tag: + Compatibilità del sistema operativo: macOS, Windows e Linux. Versione gratuita: sì. Collegamento: http://brackets.io

Sublime

Rilascio: 18 gennaio 2008. Editor di codice multipiattaforma e ambiente di sviluppo integrato (IDE). Abbiamo adorato questo editor per la sua velocità e facilità d'uso, mentre Coda e TextMate sono caduti nel dimenticatoio e hanno deluso la base di utenti principale con aggiornamenti molto scomodi. Possibilità:

• navigazione veloce tra file, simboli e alcune sezioni di codice (ecco perché è amato da molti utenti);
• La funzione di controllo della sintassi funziona immediatamente quando si immettono i caratteri;
• ottimizzazione e ripetizione di azioni recenti utilizzando macro;
• salvataggio automatico del codice, che ne previene la perdita;
• supporto per vari temi visivi e linguaggi di programmazione;
• salvataggio di parole chiave e frammenti di codice utilizzati di frequente;
• una serie di plugin già pronti in Python;

Evidenziazione della sintassi: + Rilevamento automatico dei tag: + Compatibilità sistema operativo: Windows, Mac OS, GNU/Linux. Versione gratuita: sì (senza limitazioni funzionali), ma dopo aver esaminato l'applicazione è necessario acquistare una licenza. Collegamento: http://www.sublimetext.com/3

WebStorm

Versione: 2015. Questo non è un normale editor di testo, ma anche un ambiente di sviluppo integrato per JavaScript, CSS e HTML. I suoi autori sono JetBrains, la stessa azienda che ha creato l'ambiente IntelliJ IDEA, amatissimo dagli studenti JavaRush. WebStorm è uno degli editor più intelligenti e popolari. Supporta i principali framework: AngularJS, React e Meteor e viene utilizzato per creare un'applicazione su Node.js. WebStorm è un ambiente piuttosto complesso, ma allo stesso tempo è ottimo per coloro che necessitano di molte estensioni e funzionalità. Possibilità:

• Funziona efficacemente con progetti di diverse dimensioni grazie all'integrazione con i sistemi di controllo della versione Git, GitHub, Mercurial. Ciò ti consente di "impegnare" file, rivedere le modifiche e risolvere i conflitti direttamente all'interno dell'IDE;
• LiveEdit - mostra le modifiche preliminari senza ricaricare la pagina (funziona con il browser Google Chrome);
• analisi del codice durante l'editing;
• refactoring e debugging del codice per applicazioni Javascript e Node.js;
• supporto per i linguaggi ECMAScript, TypeScript, CoffeeScript e Dart;
• creazione di applicazioni utilizzando il template Node.js Express;
• avvio e debug con framework come Mocha, Karma e Goniometro. Puoi provarlo nell'editor stesso o in un comodo menu ad albero, dal quale puoi tornare velocemente al testo;
• I preprocessori LESS, Sass, SCSS, Stylus sono completamente supportati;
• ricerca rapida nella finestra del terminale;
• strutturare progetti che coinvolgono più librerie Javascript;
• supporto per JQuery, YUI, Prototype, DoJo, MooTools, Qooxdoo e Bindows;
• supporto iniziale e lavorare con Angular 2.

Evidenziazione della sintassi: + Rilevamento automatico dei tag: + Compatibilità sistema operativo: Windows, Mac OS, GNU/Linux. Versione gratuita: esiste una versione di prova per 30 giorni, quindi è necessario acquistare una licenza. Collegamento: http://www.jetbrains.com/webstorm/

Atomo

Rilascio: 26 febbraio 2014. Software open source gratuito creato dagli autori del Github preferito da tutti . È costruito su 50 moduli e scritto in Node JS, CoffeeScript, CSS, HTML e C++. Puoi anche sviluppare i tuoi moduli e pubblicarli in un repository ad accesso aperto. Questo ambiente di sviluppo è abbastanza facile da usare e plugin aggiuntivi aiutano ad espandere le possibilità di lavorarci. Possibilità:

• utilizza la GUI per la configurazione invece dei file json;
• visualizzazione di una minimappa del codice e dei suoi frammenti;
• ricerca rapida per progetti e file;
• comoda barra laterale e struttura dei file;
• un numero enorme di pacchetti di estensioni disponibili su Github;
• Emmet, prefissatore automatico, supporto Livereload;
• visualizzare un file attraverso l'albero della barra laterale;
• la possibilità di personalizzare l'editor in base alle preferenze del singolo utente;
• presenza di un file manager integrato;
• non è necessario installare un pacchetto di controllo con plugin, è sufficiente utilizzare l'interfaccia utente grafica;
• supporto per plugin scritti in Node.js;
• visualizzare in anteprima le immagini PNG e JPEG direttamente nell'editor;
• offre lavoro con il sistema di controllo della versione Git.

L'unico neo potrebbe essere che richiede molta memoria e non è in grado di gestire file di dati di grandi dimensioni. Evidenziazione della sintassi: + Rilevamento automatico dei tag: + Compatibilità sistema operativo: Windows 7, 8, Mac OS 10.8, Linux. Versione gratuita: sì. Link: https://atom.io

Vim

Uscita: 2 novembre 1991. Potresti chiederti: cosa ha dimenticato il vecchio Vim in questo elenco di editor moderni? Vim, infatti, è un editor di testo completamente moderno e potente, creato sulla base del vecchio vi, disponibile sui sistemi operativi UNIX. Ed è in continua evoluzione. Gli sviluppatori apportano modifiche quasi ogni anno, aggiungendo nuovi plugin e componenti aggiuntivi. L’ultima volta che ciò è accaduto è stato nel 2016 e il numero di estensioni e la velocità sono davvero sorprendenti e vale la pena provarlo. Vim è un editor multimodale. Puoi lavorare in più modi contemporaneamente: comando, inserimento o visivo. Tuttavia, vale la pena considerare che è piuttosto complesso per uno sviluppatore alle prime armi. Sebbene gli specialisti con molti anni di esperienza non siano consapevoli di molte delle sue funzioni. Possibilità:

• supporto per codifiche di testo standard;
• puoi lavorare con più file contemporaneamente;
• riconoscimento e conversione automatici dei file;
• compatibilità con i linguaggi di programmazione Perl, Tcl, Python e Ruby;
• creare ambienti confortevoli per le esigenze di ciascun utente;
• registrazione e implementazione delle macro;
• la modalità visiva può svolgere molte funzioni utili (ad esempio evidenziare blocchi di testo);
• supporto per lingue non standard scritte da destra a sinistra (come arabo o ebraico);
• impostazioni convenienti per le parole di ricerca e la cronologia dei comandi;
• Supporta l'uso completo della tastiera senza mouse;
• dimostra prestazioni sorprendenti quando si lavora con file di grandi dimensioni.

Evidenziazione della sintassi: + Rilevamento automatico dei tag: + Compatibilità sistema operativo: Windows, DOS, Linux, BSD e Mac OS, iOS, Android, AmigaOS, Atari MiNT, BeOS, NextStep, OS/2, OSF, RISC OS, SGI, VMS. Versione gratuita: sì. Collegamento: https://vim.sourceforge.io/download.php

NetBeans

Rilasciato: 1997. IDE gratuito e open source, sponsorizzato da Oracle e supportato da sviluppatori entusiasti. Viene costantemente sviluppato e integrato con varie estensioni per comodità e miglioramento della velocità. Possibilità:

• gestione vetrine e magazzini;
• modifiche all'interfaccia e al design (inclusi menu e pop-up);
• impostare una connessione con un server remoto;
• Refactoring del codice disponibile;
• ci sono componenti aggiuntivi, modelli e generatori di codice;
• supporta molti linguaggi di programmazione;
• controllo e correzione automatici della sintassi;
• personalizzare l'editor in base alle esigenze dell'utente;
• avvio e debug di applicazioni JavaScript e Node.JS;
• supporto per framework PHP (Symfony, Zend e Yii).

Unico neo: consuma molta memoria. Evidenziazione della sintassi: + Rilevamento automatico dei tag: + Compatibilità del sistema operativo: Microsoft Windows, Linux, FreeBSD, Mac OS X, OpenSolaris e Solaris. Versione gratuita: sì. Solo che è gratuito. Collegamento: https://netbeans.org

Bonus hardcore: Blocco note, noto anche come "Blocco note"

Rilascio: 1985, insieme a Windows 1.0. Sì, sì, lo stesso Blocco note installato per impostazione predefinita su tutti i tuoi computer Windows. "Cosa ha dimenticato qui questa antichità, cosa c'entra QUESTO con lo sviluppo?", chiedi. Capiamo infatti che difficilmente qualcuno oggi creerà qualcosa di serio nel classico Blocco note. Tuttavia, è in questo programma che molti sviluppatori alle prime armi hanno trascorso gli ultimi 15-20 anni a “mettere insieme” i loro primi siti web e a scrivere i loro primi programmi. Ciò che intendiamo è che se vuoi imparare, niente dovrebbe fermarti. Per un vero sviluppatore (e qualcuno che vuole diventarlo), Blocco note non è un ostacolo. Caratteristiche: solo testo nero, solo hardcore. Unico neo: nessun unico neo: “Blocco note” è perfetto nel suo minimalismo! Evidenziazione della sintassi: no. Allena la tua memoria! Rilevamento automatico dei tag: wow! Versione gratuita: Blocco note è gratuito quanto Windows.