9 I migliori editor di codice online per applicazioni Web

Qual è la prossima cosa migliore per la codifica? L’editor del codice, ovviamente!


Gli editor di codice sono il secondo motivo più significativo per le guerre di fiamma del programmatore (il primo è la formattazione del codice).

Per alcuni, Vim è l’unico editore sensato mai creato, mentre per altri tutto ciò che non si adatta al mondo di Emacs che fa girare la testa a spirale come Inception è adatto solo per il ridicolo. Se stai cercando una cattiva attenzione, tutto ciò che devi fare è andare in una comunità di programmatori e iniziare un thread come “Perché penso che X (scegli qualsiasi editor di codice popolare) fa schifo / è il migliore”, prendi un po ‘di birra e rilassati.

Argomenti, controargomentazioni e insulti continueranno a riversarsi dentro e fuori dalla discussione per tutta la notte e ci vorranno molti mesi prima che il veleno nel filo si raffreddi.

La domanda è: perché?

Certo, gli esseri umani riescono a fare molto di tutto, ma penso che gli editor di codice siano particolari quando si tratta di programmatori. Un programmatore tipico trascorre quasi tutto il suo tempo (oltre il 98%, se dovessi scommettere) sull’editor di codice preferito. Conoscono il modo per aggirare l’editor: i suoi punti di forza, debolezza, limiti, stranezze e gemme nascoste.

Niente è più frustrante che dover lottare con l’editor quando scrivi un codice (pensa a quanto è fastidioso quando devi sparare a una lunga e urgente email su una nuova tastiera!). Gli editor di codice riducono l’attrito mentale e consentono di essere più produttivi, motivo per cui sono così importanti e attirano così tanta attenzione.

Quindi, qual è il miglior editor di codice?

Onestamente, non oserò nemmeno andarci! �� ��

Tuttavia, se sei interessato allo sviluppo Web, c’è un’alternativa a cui voglio che tu pensi: gli editor di codice online!

In breve, si tratta di editor che risiedono interamente su un server remoto e sono accessibili tramite il browser.

Sembra strano, giusto?

Lo sentivo anche quando mi sono imbattuto in loro 3-4 anni fa. Perché diavolo qualcuno dovrebbe voler consegnare tutto a uno stupido browser?

Può persino competere con un editor di codice installato in modo nativo?

Nella maggior parte dei casi, soprattutto per lo sviluppo Web, la risposta è sì. Ora, mentre non ho adottato gli editor online come mezzo principale, mi ritrovo a usarli sempre più in scenari specifici.

Prima di approfondire quali editor di codice sono disponibili per essere utilizzati, facciamo una pausa e pensiamo a quando gli editor di codice online possono avere senso.

Impostazione zero

Non so te, ma configurare il mio editor preferito a mio piacimento su un nuovo sistema non è qualcosa che non vedo l’ora. Plugin, temi, caratteri, scorciatoie, frammenti, impostazioni. . . C’è un elenco infinito di cose che devono essere bilanciate prima che l’intera cosa diventi utilizzabile. È facile trascurare qualcosa, solo per infastidirsi in seguito quando il flusso di lavoro viene interrotto.

Al contrario, non c’è nulla a che fare con un editor online una volta terminata la prima installazione. Build ufficiali, aggiornamenti, build notturni, piattaforme supportate, architettura di sistema, sincronizzazione FTP, pipeline CI / CD: nulla di tutto ciò è importante finché si dispone di un browser!

Collaborazione

Più spesso, è necessario collaborare con altri sviluppatori quando si risolvono problemi o si esegue il debug di qualcosa.

L’editor di codice tradizionale non è stato creato per questo: non c’è spazio per la modifica, il commento o l’evidenziazione simultanea del codice ed è difficile aggiungere supporto per questo.

Sicurezza dei dati

Ora, è un dato di fatto che nessun progetto oggi è senza controllo della versione, il che significa che una copia del codice esiste sempre nel repository. Detto questo, ci sono momenti in cui il controllo della versione non è sufficiente:

  • Ti dimentichi di spingere gli impegni appena creati e il tuo laptop prende fuoco.
  • Esistono altri file e dump di dati importanti con cui il codice interagisce, sebbene questi non facciano parte dell’applicazione live. Cosa succede loro se il tuo laptop prende fuoco?

(Okay, sembra che io sia ossessionato dai taccuini che prendono fuoco, ma hai capito bene, vero ?!)

Applicazione della disciplina

Questo potrebbe anche essere discusso contro il tribunale dei diritti degli sviluppatori (se esiste una cosa del genere), ma la verità è che gli sviluppatori raramente sacrificano i loro capricci per il bene comune.

Ad esempio, un appassionato appassionato di Sublime Text abbraccerà mai completamente tutti gli eccellenti editor di JetBrains e troverà tutte le opportunità per indicare la sua natura affamata di memoria e prestazioni più lente.

Lo stesso vale per le schede rispetto agli spazi (o anche alle schede a due spazi rispetto alle schede a quattro spazi): sei ingenuo se pensi che i programmatori della tua squadra non blocchino i clacson.

In questi casi, un editor online è un vantaggio: decidi tu le impostazioni per i progetti (anche come il codice deve essere formattato) e semplicemente rifiuterà di accettare il lavoro fino a quando non aderirà a tutti gli standard. Duro sull’individuo, forse, ma ottimo per il progetto!

Ormai sto esaurendo i casi d’uso, quindi passiamo all’opzione che abbiamo quando si tratta di editor di codice online, in particolare per lo sviluppo Web.

JSFiddle

Mentre JSFiddle non può sostituire un editor di testo a tutti gli effetti, fa un ottimo lavoro nel gestire script di frontend unici.

È così popolare che Q&Siti come StackOverflow supportano già l’incorporamento di collegamenti JSFiddle direttamente nella loro piattaforma.

Per iniziare rapidamente, JSFiddle offre alcune piastre di caldaia all’inizio; il che significa che se vuoi ottenere una demo di, diciamo, React, avviata, tutto ciò che devi fare è fare clic sul relativo pulsante e iniziare a scrivere il codice. Una volta premuto Salva, il “violino” viene salvato si ottiene un URL permanente (Dai un’occhiata a questo stupido violino che ho creato: https://jsfiddle.net/tuqd76c4/ e nota che puoi apportare le modifiche e premi Salva per crearne uno nuovo versione di questo URL).

Ecco cosa rende JSFiddle una piattaforma praticabile per lo sviluppo web front-end:

  • Gratuito (nessuna tassa nascosta o funzionalità freemium). JSFiddle si supporta tramite annunci (almeno al momento della scrittura) e puoi vedere un annuncio Adobe nella parte inferiore sinistra dello screenshot sopra.
  • Funzionalità di collaborazione in codice – ideali per creare concetti insieme, interviste, ecc.
  • Layout multipli, dimensioni dei caratteri, temi chiari / scuri, ecc.
  • Formattazione del codice (riordino), supporto imminente per linters (CSS e JS) e altro ancora.

E ora, singhiozzo, singhiozzo, per le cose cattive:

  • JSFiddle è un editor puramente front-end. Non c’è modo di codificare ed eseguire la tua lingua di backend preferita.
  • Non esiste un concetto di file e cartelle qui (o caricamenti, del resto). Tutto quello che hai è un unico spazio per il codice, non importa quanto di esso ci sia.
  • JSFiddle non può essere usato per ospitare codice sul tuo server. Il codice deve essere su JSFiddle ed è sempre pubblico.
  • Non c’è modo di costruire una pipeline CI / CD, usare Git, ecc.

Detto questo, JSFiddle ha il suo punto debole e brilla quando è necessario preparare prove concettuali e collaborare alla velocità della luce. È e rimarrà una delle maggiori identità tra i redattori online.

CodeSandbox

CodeSandbox può essere considerato come una versione molto più potente e completa di JSFiddle. Fedele al suo nome, CodeSandbox offre un’esperienza di editor di codice completa e un ambiente sandbox per lo sviluppo front-end.

CodeSandbox è una vera potenza e un prodotto dolce e dolce. Sarei a corto di carta se provassi a elencare tutti i suoi vantaggi, ma qui ci sono alcune caratteristiche killer:

  • Supporto per Npm: Sì, puoi aggiungere praticamente qualsiasi pacchetto disponibile su npm.
  • File, cartelle, moduli: Puoi dividere il codice in più file, aggiungere / rimuovere immagini dalla cartella pubblica e creare / importare i moduli come meglio credi. Il flusso di lavoro rispecchia quello di un moderno bundler di moduli, quindi non è necessario impostare (quasi) nulla.
  • Supporto per TypeScript, ricarica a caldo, esportazione GitHub, hosting di file statici, ecc.
  • È costruito su Redattore di Monaco, la stessa bestia che alimenta il favorito VSCode editore. Questo porta potenti funzionalità come “Vai a”, “Trova riferimenti” e il refactoring necessario a portata di mano!
  • Supporto di frammenti per Emmet
  • DevTools integrato, linting, sovrapposizioni di errori, framework di test (Jest), combinazioni di tasti e altro.
  • Cli potente per importare direttamente progetti locali in CodeSandbox.

Mentre la versione gratuita di CodeSandbox non supporta il codice privato, puoi ottenere quella funzione (e aumentare i limiti di dimensione in generale) aiutandoli a Patreon per un minimo di $ 5 al mese (paga quello che vuoi, fino a $ 50 al mese).

CodeAnywhere

Un problema con la maggior parte degli editor di codice in questo elenco (almeno finora) è che si aspettano che tu mantenga il codice sui loro server in qualsiasi momento o che richiedano di sincronizzare il codice tramite la riga di comando regolarmente.

Non così con CodeAnywhere.

Al suo massimo, CodeAnywhere ha due caratteristiche che si distinguono per me:

  • Immagini di container predefinite per oltre 72 linguaggi e framework di programmazione. Ciò significa che puoi eseguire il provisioning di un nuovo ambiente di sviluppo direttamente dall’editor! Naturalmente, il codice viene automaticamente ospitato sul contenitore appena creato e i file vengono serviti direttamente da lì.
  • Connettiti a qualsiasi cosa. Sì, letteralmente qualsiasi cosa. Non sei obbligato a memorizzare il tuo codice sui server di CodeAnywhere. Sia che il tuo codice risieda su FTP, piattaforme di condivisione file come Dropbox, Amazon S3 o su sofisticate piattaforme di controllo versione come GitHub, puoi facilmente impostare CodeAnywhere per leggere e scrivere su quella fonte, usando l’editor di codice esclusivamente per. . . Bene, modifica del codice. ��

Un’altra cosa che vorrei sottolineare: se non ti senti a tuo agio con Git quando si tratta di visualizzare la storia e le differenze, CodeAnywhere potrebbe sentirsi un sospiro di sollievo. L’editor utilizza il suo sistema diff per confrontare i file, che consente di confrontare due file tra due revisioni (una revisione viene creata ogni volta che si salva un file).

Tuttavia, le revisioni presentano una leggera differenza: la versione gratuita consente di mantenere solo una revisione, mentre il piano a pagamento più piccolo consente al massimo 20 revisioni. In generale, non è un problema in quanto raramente si desidera guardare oltre l’ultima 20a revisione, ma poiché la maggior parte dei programmatori ha l’abitudine di premere Salva alcune volte al minuto, può diventare doloroso.

Detto questo, CodeAnywhere è un’offerta solida e piacevole per coloro che vogliono trasferirsi nel Cloud e rimanere lì. �� Dal momento che i suoi poteri vanno oltre il codice front-end, a mio avviso, è altamente raccomandato!

StackBlitz

Se sei principalmente nel front-end e non riesci ad allontanarti dall’interfaccia VSCode, StackBlitz è stato creato solo per te.

Non vedi niente di speciale? Non l’ho fatto fino a quando non ho fatto scorrere un po ‘verso il basso e ho fatto clic sul pulsante Angolare. Boom!

Indovina, non è stato creato deliberatamente per assomigliare a VSCode – è costruito sull’editor VSCode! Tanto che puoi installare estensioni, cercare tra le cartelle e organizzare i file come ti aspetteresti da una normale istanza VSCode.

Ma aspetta, c’è di più!

Potresti o meno aver notato che:

  • Tutte le applicazioni create su StackBlitz vengono inoltre distribuite automaticamente sui loro server! Quindi, questa app giocattolo angolare che ho appena creato è ospitata automaticamente su https://angular-yvyi2j.stackblitz.io/. Molto probabilmente, l’URL funziona ancora (si caricherà lentamente, tuttavia, come ci si aspetterebbe se ospitato gratuitamente)!
  • È possibile fork e condividere il progetto. Durante la condivisione, ottieni un controllo più preciso su ciò che gli altri possono fare.
  • È possibile connettersi a un repository GitHub e anche lasciare che il codice venga estratto / spinto direttamente da lì. Oppure puoi semplicemente scaricare il progetto come file zip nel modo giusto.

Ma aspetta, c’è di più!

Sul serio! ��

Ecco l’elenco delle funzionalità ufficiali offerte da StackBlitz:

  • Supporto nativo per Firebase (che è qualcosa che non uso personalmente, ma ehi, è un vantaggio per coloro che non vogliono immergersi nelle oscure profondità del backend)
  • Intellisense, Ricerca progetti
  • Ricarica a caldo durante la digitazione
  • Importa pacchetti npm
  • Modifica offline quando non connesso!

StackBlitz è pieno di (belle) sorprese quando si tratta di rimuovere gli ostacoli dallo sviluppo e dalla distribuzione del Web. Incorporare VSCode nel tuo sito web non è più roba da sogni!

AWS Cloud9

Cloud9 è stato senza dubbio il primo IDE basato su browser che ha offerto funzionalità serie e ha preso l’idea del mainstream del browser come editor. Non c’è da stupirsi che Amazon lo abbia acquistato in seguito, e oggi, Nuvola 9 fa parte delle offerte AWS.

Se sei anche collegato in remoto (o sei interessato) alla piattaforma AWS, Cloud9 è il punto in cui termina la tua ricerca di un editor perfetto (okay, quasi perfetto). Vediamo perché:

  • Non ci sono costi aggiuntivi per l’utilizzo di Cloud9. Puoi connettere Cloud9 a un’istanza di calcolo AWS nuova / esistente e paghi solo per quell’istanza. È anche possibile connettersi a un server di terze parti tramite SSH, esattamente senza costi! ��
  • Supporto di prima classe per applicazioni AWS Serverless (debug, ecc.)
  • L’accesso diretto al terminale ad AWS dall’interno dell’editor (onestamente, un terminale a schede in-editor decente è ciò che ancora mi manca in VSCode)
  • Oltre 40 linguaggi di programmazione supportati (Go, C ++, Ruby, Node, Python, PHP, Java … scegli tu)

Le funzionalità di collaborazione in Cloud9 sono anche desiderabili, consentendo di effettuare revisioni / interviste senza soluzione di continuità.

Un’altra caratteristica killer è una riproduzione in stile video delle modifiche apportate a un file, rendendo il processo di revisione una gioia:

Il mio consiglio?

Se ti piace AWS, non aspettare e prendi Cloud9 proprio ora. E se non sei ancora sul cloud ma stai pensando di fare una mossa, abbraccia AWS e integra Cloud9 nel tuo flusso di lavoro. Non puoi prendere una decisione migliore in entrambi i casi!

CodeEnvy

CodeEnvy è un potente editor di cloud che utilizza i contenitori Docker per consentire l’esecuzione di ambienti di sviluppo preconfigurati e isolati. È basato sull’IDE cloud Eclipse Che open source e offre moltissime opzioni di scalabilità e DevOps.

Al momento della scrittura, CodeEnvy è stata acquisita da RedHat (che, in modo divertente, è stata acquisita da Oracle!).

Gitpod

Gitpod è una versione rinfrescante degli editor di codice cloud (o IDE, se lo desideri) che mira a mantenere il codice sempre testato e aggiornato. In altre parole, è profondamente integrato con GitHub e ogni volta che aggiungi codice, esegue i tuoi test e pipeline CI / CD per assicurarti che il codice sia sempre integro al 100%.

Vale la pena dare un’occhiata se ami l’esperienza VSCode e desideri qualcosa che supporti tutti i principali linguaggi e framework back-end / front-end (Django, Rails, Revel, lo chiami).

Theia

Se sei un fan sfegatato di SOLID e un architetto di software che lavora alla grande, il Theia IDE solleticherà il tuo osso di separazione delle preoccupazioni. È un codice IDE codificato in TypeScript (cinque punti per lo stile immediatamente!) Con front-end e backend perfettamente separati. Il front-end viene eseguito in un browser, mentre il back-end può essere ovunque: macchina locale o cloud!

Ma non è tutto: il front-end può essere eseguito come un’app Electron con un ambiente browser completamente funzionale e isolato, offrendoti l’aspetto di un’app desktop nativa nel caso in cui la desideri.

Programmatore

Anche se il loro sito web non lo dice in modo chiaro, Programmatore è un ambiente VSCode in bundle in un server che può essere eseguito localmente o nel cloud. La configurazione consigliata è eseguire l’IDE come server nel cloud e accedervi localmente tramite il browser. Esistono immagini Docker predefinite per configurazioni senza problemi e un piano aziendale in caso di necessità di supporto o esigenze diverse.

Conclusione

Questo riguarda più o meno tutti gli IDE e gli editor di codice disponibili al momento della scrittura. Ho escluso due tipi di offerte in questo elenco: quelle che sono focalizzate esclusivamente sulle interviste e non hanno ambienti completi (tranne il nostro amato classico JSFiddle, ovviamente), e quelli che non sembrano offrire qualcosa sostanziale e aveva poco più di un’elegante home page.

Se pensi che qualcosa meriti di essere qui, fammelo sapere e sarò grato! ��

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map