SublimeLinter è un plugin per il controllo della sintassi. Permette di ridurre al minimo il numero di errori controllando al volo il codice scritto. Hai solo bisogno di installare pacchetti richiesti ad esempio: SublimeLinter-html-tidy, SublimeLinter-csslint, SublimeLinter-jshint e SublimeLinter-php.

CSScomb è un plugin che ti aiuta a posizionare i selettori CSS nell'ordine corretto per facilitarne la lettura e la modifica in futuro.

Per quanto riguarda gli svantaggi di Sublime Text, questi includono il suo costo ($70), e anche il fatto che la configurazione viene effettuata non tramite la GUI, ma modificando le configurazioni json.

WebStorm (Windows, Linux, Mac)

WebStorm non è solo un editor, ma un ambiente di sviluppo integrato (IDE) scritto in Java. Ma poiché la differenza tra IDE ed editor con un gran numero plugin potrebbero essere insignificanti, abbiamo deciso di includerlo anche in questo elenco.

WebStorm presenta i seguenti vantaggi:

1. Lavora in modo efficiente con progetti di qualsiasi dimensione grazie all'integrazione dei sistemi di controllo della versione, tra cui Git, Mercurial e Subversion.
2. Aumenta la qualità del codice e aderisci ai principi Test Driven Development (TTD) utilizzando JsTestDriver di Google.
3. LiveEdit per visualizzare istantaneamente le modifiche senza ricaricare la pagina.
4. Disponibilità di funzionalità integrate per il controllo della qualità del codice: JSHint, JSLint, Google Closure Linter.
5. Supporto grande quantità tecnologie: TypeScript, CoffeeScript, Less, Sass, Stylus, Compass, EJS, Handlebars, Moustache, Web Components, Jade, Emmet e altri.

WebStorm è una manna dal cielo per coloro che hanno molto bisogno varie funzionalità e chi è disposto a pagarla: il costo di una licenza individuale per il primo anno è di 59 dollari, il costo di una licenza aziendale per il primo anno è di 129 dollari. Se hai bisogno di qualcosa di più semplice, dai un'occhiata ad altri editor.

Atom (Windows, Linux, Mac)

A differenza dei due editor precedenti, Atom è un prodotto gratuito e open source. codice sorgente. È assemblato da 50 moduli e scritto in C++, JavaScript, CSS e HTML. È possibile aggiungere i propri moduli al repository pubblico in modo che altri possano utilizzarli. Ha tutte le stesse funzionalità di base di Sublime Text, come ricerca rapida corrispondenze fuzzy in progetti e file, presenza di una mini mappa e utilizzo di snippet. Supporta Emmet, Autoprefixer, già menzionato, autoformattazione del codice con atom-beautify, Livereload.

Vantaggi di Atom rispetto al Sublime Text a pagamento:

1. Impostazioni della GUI anziché file JSON.
2. Per installare i plugin, non è necessario installare Package Control; tutto viene fatto dall'interfaccia visiva.

Parentesi (Windows, Linux, Mac)

Questo è un editor di testo per sviluppatori web di Adobe. Ha codice open source e funzionalità semplici ma necessarie presenti negli editor già citati:

1. Visualizzazione istantanea delle modifiche nel browser ().
2. Selezione e modifica multipla.

Bonus Brackets è un'API ben documentata per creare i tuoi plugin, oltre a una funzione Extract for Brackets (Anteprima) che accelera il processo di estrazione dei dati di colore, carattere e dimensione da PSD.

Lo svantaggio di Brackets è la bassa velocità di funzionamento se sono installati molti plugin.

Coda (Mac OS e iOS)

TextMate e Coda sono gli editor di testo web più popolari per Mac. Riteniamo che Coda sia ancora più adatto agli sviluppatori web rispetto a TextMate, che doveva essere un prodotto universale. Coda è editor leggero con tutti funzioni necessarie(come la compressione dei blocchi di codice, la ricerca e sostituzione rapida, le funzioni di completamento automatico del progetto, il supporto Git e Subversion), ma ha anche le sue caratteristiche:

1. La possibilità di modificare file in remoto tramite FTP, SFTP, WebDAV o su server Amazon S3.
2. Ricerca semplificata utilizzando espressioni regolari grazie ai pulsanti jolly.
3. Anteprima WebKit e AirPreview. Quest'ultimo ti consente di utilizzare un iPad o iPhone con la versione iOS di Coda per visualizzare in anteprima le pagine mentre le crei sul tuo computer desktop.
4. Terminale integrato ed editor MySQL.

Anche Coda ha i propri plugin, ma, ovviamente, non ce ne sono tanti quanto gli editor open source. Molte persone elogiano il plugin PHP & Web Toolkit, che include:

1. Controllo automatico della sintassi PHP con passaggio all'errore successivo e salvataggio automatico.
2. Organizzazione e riformattazione del codice scritto in HTML, CSS, JavaScript o PHP.
3. Validazione di HTML, CSS e JavaScript.
4. Minimizzazione di JavaScript e CSS.

Una licenza Coda per utente singolo costa $ 99.

Come puoi vedere, la funzionalità degli editor moderni è piuttosto ampia, quindi la scelta dipende dalla piattaforma utilizzata e dalle capacità finanziarie. Quale editor per lo sviluppo web preferisci?

Lo staff dello studio segue sempre le ultime tendenze nel web design e sviluppo. Scegliendoci come partner, puoi essere certo che il tuo sito web soddisferà i moderni standard di web design e sviluppo.

Non tutte le attività e non tutti i progetti richiedono un IDE completo, quindi per molti lo strumento principale è ancora l'editor di testo preferito. E sembra che la scelta sia semplice: Sublime Text potente, estensibile, ma semplice, classici viventi sotto forma di emacs e vim, nonché preferiti a piattaforma singola: Notepad++ per Windows, TextMate per OS X e Geany per Linux. Ma quasi ogni giorno compaiono nuovi redattori: ha senso per te cambiare le tue abitudini? Vediamo cosa sta succedendo.

Atomo

Nell'agosto 2011, il co-fondatore di GitHub Chris "defunkt" Wanstrath si era posto un obiettivo ambizioso: creare un editor che fosse veramente aperto e offrisse capacità di hacking illimitate, senza trasformarsi in un altro Vim o Emacs (che, come sapete, può fare quasi tutto, ma solo se hai un cervello come Jeff Dean). E ora, tre anni e più di quindicimila commit dopo, è iniziato il beta testing pubblico. Nel marzo di quest'anno, Atom è diventato disponibile per il download a tutti. In che modo la famosa azienda rivoluzionerà il nostro approccio alla programmazione?

La prima cosa che attira la tua attenzione quando lanci la nuova idea di GitHub è la sua interfaccia incredibilmente simile a Sublime Text. Questo di per sé non è un aspetto negativo. È risaputo che l'interfaccia di Sublime è stata ispirata niente meno che da un'altra editore popolare codice per OS X TextMate. La storia attuale con Atom e Sublime enfatizza solo le soluzioni GUI di successo di quest'ultimo.

La seconda cosa di Atom è che è essenzialmente un'applicazione web racchiusa in Chromium. No, ovviamente l'editor ha la propria icona nel dock, normale menu di sistema e supporto per i tasti di scelta rapida nativi. È solo che il core Atom è scritto principalmente in CoffeeScript, funziona su Node.js e l'interfaccia dell'editor stessa è una pagina HTML con markup abbastanza normale. Puoi verificarlo selezionando Sviluppatore -> Strumenti per sviluppatori Toogle dal menu Visualizza.

Terzo caratteristica interessante Atom: la sua modularità. Nella migliore tradizione dell'ecosistema Node.js, è scritto utilizzando quantità massima moduli aperti (più di cinquanta). Ciò significa che se non ti piacciono alcune funzionalità standard, secondo gli sviluppatori, puoi facilmente trovarne un sostituto tra più di 70mila pacchetti nel registro npm o scrivere il tuo plugin. Considerando che JavaScript è stato in realtà il linguaggio più popolare su GitHub per molto tempo, e CoffeeScript è solo leggermente dietro Perl, questo ci dà fiducia nel futuro di Atom.

E le caratteristiche killer? Qui non tutto è così roseo. Che si tratti della giovinezza del progetto o di qualcos'altro, Atom, a parte il grande nome dei creatori e le grandi speranze, non fornisce nulla di fuori dagli schemi che possa farti giocare per ore. Ciò che viene presentato dagli sviluppatori come vantaggi (ad esempio completamento automatico, schede, collasso del codice, snippet) non può che portare un sorriso condiscendente sui volti degli aderenti a Sublime. Sì, certo, Atom ha già un proprio gestore di pacchetti, ma non ho trovato nulla nei suoi repository che non possa essere implementato utilizzando i plugin per Sublime.

Tavolo luminoso

Lo sviluppo di Light Table è iniziato nel 2011, quando il programmatore americano Chris Granger ha deciso che il processo di lavoro con il codice nei moderni editor di testo non si adattava abbastanza bene al flusso di lavoro moderno. In breve, il compito del Light Table è quello di rendere il processo di sviluppo veramente interattivo e visivo, fornendo allo sviluppatore un feedback immediato su qualsiasi azione, aiutandolo così a navigare rapidamente in un codice di grandi dimensioni. È con questa idea che Chris si è rivolto a Kickstarter e in breve tempo ha raccolto 316.720 dollari per lo sviluppo del progetto, con un obiettivo dichiarato di 200mila. Perché esattamente ai fornai le idee di Chris sono piaciute così tanto?

Una delle funzionalità più interessanti di Light Table è la capacità di lavorare con la documentazione mentre scrivi il codice. Per vedere la descrizione di una funzione, passa semplicemente il mouse sopra di essa. L'editor troverà e visualizzerà immediatamente la documentazione per la funzione o il parametro richiesto (nel caso di metodi integrati) o mostrerà una descrizione anteposta della funzione lasciata direttamente nel codice. Questo ricorda in qualche modo il completamento automatico, utilizzato nell'ambiente di sviluppo Visual Studio di Microsoft, ma è molto più profondo e potente.

La seconda caratteristica killer può essere chiamata esecuzione istantanea di funzioni durante la scrittura del codice. Ciò ti consente di provare diverse condizioni di input in modalità debug e vedere non solo il risultato, ma anche il modo in cui le variabili scorrono attraverso l'intero codice. Anche questa è una cosa abbastanza utile, soprattutto quando non sei sicuro del risultato dell'esecuzione di qualsiasi parte di codice.

La terza caratteristica di Light Table è la sua capacità unica di organizzare il codice nelle cosiddette tabelle. Sono blocchi di codice logicamente completi attraverso i quali è possibile visualizzare l'interazione delle singole funzioni del programma. Utilizzando questa funzionalità, è molto comodo dividere il file in diversi blocchi funzione indipendenti e lavorare con essi, costruendo una sorta di vera dashboard dal codice. Un'altra caratteristica interessante è l'evidenziazione intelligente dei blocchi: in questo caso, le possibilità di confondersi in un flusso di lavoro già chiaro tendono a zero.

Nonostante la sua filosofia piuttosto insolita, Light Table è senza dubbio un editor di nuova generazione. Il suo trucco non sta nel fatto che sia scritto in tecnologie alla moda, ma nel cambiare l'approccio stesso al processo di sviluppo di software complesso. Probabilmente non sentirai la vera potenza di Light Table quando lavori con semplici script JS, ma per progetti leggermente più complessi diventerà uno strumento indispensabile. Devi solo abituarti. Ma questo non sarà facile.

Lime

Tutto Lime può essere descritto da un'unica ma nota frase di Bobuk: la genialità e la povertà dell'open source. Il progetto, avviato l'anno scorso da Fredrik "quarnster" Ehnbom, risolve un unico, ma chiaro compito: creare un costruttore open source a immagine di Sublime Text. La ragione di questo desiderio è chiara: l'autore, un ardente fan di Sublime, era insoddisfatto dello sviluppo lento del progetto e della mancanza di banali correzioni di bug per le versioni precedenti. L'idea si è rivelata vicina a diverse dozzine di persone che la pensano allo stesso modo e presto è stata rilasciata la prima versione di Lime.

La prima cosa che ti spegne quando conosci questo editor è l'assenza di almeno una parvenza di pacchetti binari. In generale, la logica di questa decisione è chiara: Lime non è una singola applicazione, ma un insieme di backend separato in Go e un paio di frontend tra cui scegliere. Tuttavia, questo non rende le cose più facili: cercare di far funzionare rapidamente Lime si trasforma in un emozionante armeggiare con le dipendenze, le configurazioni e le altre gioie della vita di Go.

Per quanto riguarda lavorare in questo editore, al momento è francamente scomodo e, in effetti, non c'è nulla di unico da scrivere qui. Lime non può ancora vantare nemmeno quelle funzionalità che altri editor di testo danno per scontate. Sembra che gli sviluppatori prestino ancora molta più attenzione all'architettura dell'applicazione e alla pulizia del codice che alla funzionalità. In una certa misura, la situazione viene salvata dalla compatibilità parziale con l'API Sublime (e alcune parti di TextMate, rispettivamente), ma nonostante ciò, Lime ha ancora grossi problemi di usabilità.

In generale, oggi Lime lascia un'impressione mista. Deve essere fantastico quando il tuo strumento di lavoro è completamente open source e così flessibile. Ma siamo onesti con noi stessi: quanti di noi penserebbero mai di riscrivere il front-end del nostro editor di testo? Quanti di noi penserebbero addirittura di sviluppare un editor di testo per conto proprio a causa di qualche inconveniente, invece di utilizzare questo strumento per lo scopo previsto, ovvero scriverci i propri programmi? Per la maggior parte degli sviluppatori (specialmente quelli che non soffrono della malattia cerebrale di Stallman), la funzionalità di Sublime Text e il suo sistema di plugin sono sufficienti per risolvere i problemi quotidiani. E, a dire il vero, in diversi anni di lavoro quotidiano in Sublime, non ho riscontrato alcun bug estremamente critico per il quale non sono riuscito a trovare una soluzione alternativa. Presto in questa fase Lime è davvero adatto solo ai fan sfegatati dell'open source con un'enorme quantità di tempo libero e il desiderio di rendere questo mondo un po' migliore.

Staffe Adobe

Brackets è un progetto abbastanza giovane (lo sviluppo è in corso dal 2011), ma interessante di Adobe. Il suo obiettivo è semplice: creare un ambiente di sviluppo minimalista e confortevole che richieda il minimo sforzo da parte dello sviluppatore. Nella mia memoria c'è già stato un numero considerevole di progetti con obiettivi simili. Vediamo se Adobe, con l'aiuto della community, è riuscita a fare qualcosa di interessante in questo campo.

Sorprendentemente, le parentesi si sono rivelate piuttosto buone. Tutto ciò di cui hai bisogno funziona fuori dagli schemi (dopo Lime, anche questo diventa un vantaggio in un certo senso). Il progetto risolve davvero il suo problema compito principale- semplifica la scrittura del codice, sebbene lo faccia praticamente senza approcci fondamentalmente nuovi. E comunque, non c'è niente di sbagliato in questo.

Le parentesi sono scritte in HTML/JS (grazie non Flash o Adobe AIR :)), strettamente integrate con Node.js. Esteriormente, fuori dagli schemi fa un'impressione molto favorevole (anche se non senza un tocco di giocattolosità). Ciò che mi ha affascinato fin dalla prima pressione di un tasto è stato lo straordinario completamento automatico per HTML/CSS/JS/jQuery. È davvero intelligente e contiene anche molte piccole cose carine (ad esempio, un selettore di colori integrato o uno strumento per selezionare le transizioni nei CSS).

Ma la caratteristica principale per me è stata la modifica in linea delle relative sezioni di codice. Questa è un'opportunità per visualizzare e modificare, ad esempio, un insieme di proprietà CSS in base alla sua classe o ID direttamente dal file di layout HTML in un'area separata. Parentesi analizza la struttura del tuo progetto in tempo reale, crea un albero delle dipendenze e ti consente di scrivere sezioni di codice interdipendenti senza abbandonare il contesto principale del file. Lo ammetto, ho creato esattamente questo tipo di funzionalità un paio di anni fa nel mio semplice editor di testo (sono sicuro di non essere l'unico). Quindi una funzionalità del genere è una buona notizia. Altre funzionalità includono un rapido accesso alla documentazione (anche se non così dettagliato come Light Table), JSLint pronto all'uso e un simpatico gestore di plugin. Anche se, ovviamente, Brackets non può ancora vantare una tale abbondanza di pacchetti come Sublime.

Nel complesso, sebbene supporti un certo grado di supporto, ad esempio, per Ruby o Python, Brackets si rivolge principalmente agli sviluppatori front-end. Soddisferà perfettamente le esigenze dei progettisti di layout, lasciando in qualche modo dietro di sé anche gli IDE specializzati. Non troverai nulla di nuovo e rivoluzionario, ad eccezione della modifica del codice in linea. Tuttavia, ciò che c'è è fatto coscienziosamente e con anima. Se progetti o scrivi principalmente codice client su uno stack non troppo complicato, è del tutto possibile che Brackets sarà di tuo gradimento.

Zed

Zed è un editor di testo piuttosto hipster che cerca anche di reimmaginare il moderno processo di sviluppo del software. Se Light Table sta cercando di cambiare il principio stesso dello sviluppo, Zed si limita principalmente agli esperimenti con l'interfaccia. Lo sviluppo è iniziato nel 2011 e oggi Zed è disponibile sul sito ufficiale sotto forma di file binari per le principali piattaforme, nonché come applicazione per il Chrome Web Store.

La prima cosa che attira la tua attenzione quando conosci Zed è l'assenza di elementi familiari dell'interfaccia come l'albero del progetto o le schede. Un passaggio piuttosto controverso, durante lo sviluppo spesso è molto più semplice orientarsi nella struttura del progetto utilizzando il legno. Ma in assenza di schede c'è una certa grana razionale: di solito quando si lavora con progetti di grandi dimensioni il numero schede aperte crescono in modo esponenziale, e dopo solo mezz'ora di lavoro devi percorrerli costantemente, chiudendo ciò su cui al momento non stai lavorando. In Zed la navigazione nel progetto avviene saltando direttamente a il file richiesto nel progetto con il suo nome (Ctr/Cmd + E) attraverso la piccola console nella parte superiore dell'applicazione.

La seconda caratteristica memorabile di Zed è la sua enfasi su un'interfaccia a più colonne. L'editor supporta diverse opzioni fisse per la suddivisione dell'area di lavoro: 50/50%, 25/75% e così via. Vale la pena notare che la seconda (o anche la terza) colonna è destinata non solo alla modifica simultanea di più file, ma anche all'anteprima istantanea del codice in linguaggi che richiedono elaborazione (come Markdown o CoffeeScript).

Quando lavori con Zed, puoi davvero sentire la sua attenzione all'editing remoto. Quindi, immediatamente ha un ottimo supporto per la modifica di file da Dropbox o direttamente su server remoto e supporta le sessioni. Ma proprio come redattore Zed è molto povero. Il completamento automatico integrato si basa su un dizionario, non dispone di strumenti utili per lavorare con le estensioni e non ti consente di personalizzare l'interfaccia utente come desideri. Anche se probabilmente non è di questo che parla Zed.

A proposito, va notato che Zed è molto premuroso. A volte l'applicazione si blocca per un periodo piuttosto lungo e perde ogni reattività, il che, ovviamente, non aggiunge comodità a un'esperienza già piuttosto insolita.

Nel complesso, Zed è strano e sicuramente non per tutti. Se non ti preoccupi della personalizzazione infinita interfaccia utente, ti interessa la portabilità, la possibilità di modificare stabilmente i file su un server remoto e sei pronto per provare qualcosa di insolito, puoi giocare. Ma Zed chiaramente non è adatto alla codifica quotidiana.