9 най-добрите онлайн редактори на кодове за уеб приложения

Кое е следващото най-добро нещо за кодиране? Кодът редактор, разбира се!


Редакторите на кодове са втората по значимост причина за пламенните войни на програмистите (първата е форматиране на код).

За някои Vim е единственият разумен редактор, създаван някога, докато за други всичко, което не отговаря на спираловидно въртящия се свят на Emacs, напомнящо начало, е подходящо само за подигравки. Ако зле търсите внимание, всичко, което трябва да направите, е да отидете в общност за програмиране и да започнете тема като „Защо мисля, че X (изберете всеки популярен редактор на код) е гадно / е най-доброто“, вземете малко бира и се отпуснете.

Аргументите, контрааргументите и обидите ще продължават да се изсипват и дискутират през цялата нощ и ще отнеме много месеци, преди отровата в темата да изстине.

Въпросът е: защо?

Разбира се, човешките същества успяват да направят голяма работа от всичко, но мисля, че редакторите на кодове са особено, що се отнася до програмистите. Типичният програмист прекарва почти цялото си време (повече от 98%, ако искам да залагам) на редактора на код по избор. Те знаят пътя си около редактора – неговите силни, слаби страни, граници, странности и скрити скъпоценни камъни.

Нищо не е по-разочароващо от това да се борите с редактора, когато пишете код (помислете колко е досадно, когато трябва да снимате дълъг и неотложен имейл на нова клавиатура!). Редакторите на кодове намаляват умственото триене и ви позволяват да бъдете по-продуктивни, поради което те са толкова важни и получават толкова много внимание.

И така, кой е най-добрият редактор на кодове?

Честно казано, дори няма да посмея да отида там! �� ��

Ако обаче се занимавате с уеб разработка, има една алтернатива, която искам да помислите – онлайн редактори на кодове!

С две думи това са редактори, които се намират изцяло на отдалечен сървър и са достъпни чрез браузъра.

Звучи странно, нали?

Почувствах се и така, когато се натъкнах на тях преди 3-4 години. Защо по дяволите някой трябва да иска да предаде всичко на глупав браузър?

Може ли дори да се конкурира с оригинално инсталиран редактор на кодове?

Оказва се, че в повечето случаи и особено за уеб разработката, отговорът е „да“. Сега, докато не съм приел онлайн редакторите като мой основен носител, все по-често ги използвам в конкретни сценарии.

Преди да се потопим в кои редактори на кодове да се използват, нека спрем и помислим кога онлайн редакторите на кодове могат да имат смисъл.

Нулева настройка

Не знам за вас, но настрояването на любимия ми редактор по моя вкус на нова система не е нещо, което очаквам с нетърпение. Приставки, теми, шрифтове, преки пътища, фрагменти, настройки. , , Има безкраен списък от неща, които трябва да бъдат балансирани, преди всичко да стане използваемо. Лесно е да пренебрегнете нещо, само да се дразните по-късно, когато работният ви процес е прекъснат.

За разлика от това, няма нищо общо с онлайн редактор, след като първата настройка приключи. Официални надстройки, актуализации, нощни надстройки, поддържани платформи, системна архитектура, FTP синхронизация, CI / CD тръбопроводи – нищо от това няма значение, докато имате браузър!

Сътрудничество

По-често, отколкото не, трябва да си сътрудничите с други разработчици, когато разработвате проблеми или отстранявате грешки в нещо.

Традиционният редактор на кодове не е създаден за това – няма възможност за едновременно редактиране, коментиране или подчертаване на кода и е предизвикателство да се добави поддръжка за него.

Безопасност на данните

Сега е дадено, че нито един проект днес не е без контрол на версиите, което означава, че копие на кода съществува в хранилището по всяко време. Това каза, има моменти, когато контролът на версиите не е достатъчен:

  • Забравяте да натиснете новосъздадените ангажименти и вашият лаптоп се запалва.
  • Имате и други важни файлове и сметища за данни, с които вашият код взаимодейства, въпреки че те не са част от приложението на живо. Какво се случва с тях, ако вашият лаптоп се запали?

(Добре, изглежда, че съм обсебен от преносимите компютри, които се запалват, но разбирате, нали ?!)

Засилване на дисциплината

Това може също да се спори в съда за правата на предприемачи (ако такова нещо съществува), но истината на въпроса е, че разработчиците рядко жертват капризите си за общото благо.

Например, хардкорният ентусиаст на Sublime Text винаги ще прегърне някой от отличните редактори на JetBrains и ще намери всяка възможност да се ориентира към гладния му от природата характер и по-бавното изпълнение.

Същото важи и за раздели срещу интервали (или дори раздели с две интервали срещу четири раздела) – вие сте наивен, ако мислите, че програмистите от вашия екип няма да заключат клаксони.

В такива случаи онлайн редакторът е благодат – вие решавате настройките за проекти (дори как да форматирате кода) и той просто ще откаже да приеме работа, докато се придържа към всички стандарти. Сурово за отделния човек, може би, но чудесно за проекта!

Към настоящия момент изчерпвам случаите на използване, така че нека разгледаме каква опция имаме, когато става въпрос за онлайн редактори на кодове, особено за уеб разработка.

JSFiddle

Докато JSFiddle не може да замени пълноправен редактор на текстове, това е дяволски добра работа с обработката на еднократни скриптове за фронтални съобщения.

Толкова е популярен, че Q&Сайтове като StackOverflow вече поддържат вграждане на връзки JSFiddle директно в своята платформа.

За да започнете нещата бързо, JSFiddle предлага няколко котелни плочи в началото; което означава, че ако искате да получите демонстрация на, да речем, започна React, всичко, което трябва да направите, е да кликнете върху съответния бутон и да започнете да пишете кода. След като натиснете Save, „скриптът“ се запазва, получавате постоянен URL адрес (Вижте тази глупава скрипка, която създадох: https://jsfiddle.net/tuqd76c4/ и обърнете внимание, че можете да направите промените си и натиснете Запазване, за да създадете нов версия на този URL адрес).

Ето какво превръща JSFiddle в жизнеспособна платформа за предно разработване на уеб:

  • Безплатен за използване (без скрити такси или безплатни функции). JSFiddle се поддържа чрез реклами (поне до момента на писане) и можете да видите реклама в Adobe в долната лява част на екрана по-горе.
  • Функции за съвместно използване на кодове – идеални за съвместно изграждане на концепции, интервюта и т.н..
  • Множество оформления, размери на шрифта, светли / тъмни теми и т.н..
  • Форматиране на кодове (подреждане), предстояща поддръжка на линтери (CSS и JS) и други.

И сега, ридаене, ридание, за лошите неща:

  • JSFiddle е чисто предна редактор. Няма начин да кодирате и стартирате любимия си език за задния текст.
  • Тук няма концепция за файлове и папки (или качвания). Всичко, което имате, е единно пространство за код, независимо колко от него има.
  • JSFiddle не може да се използва за хост код на вашия сървър. Кодът трябва да е на JSFiddle и да е публичен през цялото време.
  • Няма начин да се изгради CI / CD тръбопровод, да се използва Git и т.н..

Въпреки това, JSFiddle има своето сладко място и блести, когато трябва да изпечете доказателства за концепцията и да си сътрудничите със скоростта на светлината. Тя е и ще остане основна идентичност сред онлайн редакторите.

CodeSandbox

CodeSandbox може да се мисли за много по-мощно и пълно възприемане на JSFiddle. Верни на името си, CodeSandbox предоставя цялостно изживяване на редактора на кодове и среда с пясъчна кофа за разработка на предния край.

CodeSandbox е истинска мощност и сладък, сладък продукт. Ще ми свършат хартия, ако се опитам да изброя всичките му предимства, но ето някои характеристики на убиеца:

  • Npm поддръжка: Да, можете да добавите почти всеки пакет, който е наличен в npm.
  • Файлове, папки, модули: Можете да разделите кода си на няколко файла, да добавите / премахнете изображения от публичната папка и да изградите / импортирате модули, както сметнете за добре. Работният процес отразява този на модерен пакет модули, така че не е необходимо да настройвате (почти) нищо.
  • Поддръжка за TypeScript, горещо презареждане, експорт на GitHub, хостинг на статични файлове и др.
  • Той е изграден Редактор на Монако, същият звяр, който захранва фаворита VSCode редактор. Това носи мощни функции като „Отиди на“, „Намери референции“ и необходимо рефакторинг на пръстите ви!
  • Поддръжка на фрагмент за мравка
  • Вградени DevTools, свързване, наслагване на грешки, тестване на рамки (Jest), клавишни връзки и други.
  • Мощен клип за директно импортиране на местни проекти в CodeSandbox.

Въпреки че безплатната версия на CodeSandbox не поддържа частен код, можете да получите тази функция (и като цяло да увеличите ограниченията за размер), като им помогнете да Patreon за едва 5 долара на месец (плащайте каквото искате, до 50 долара на месец).

CodeAnywhere

Един проблем при повечето от редакторите на кодове в този списък (поне досега) е, че те очакват да запазите кода на техните сървъри по всяко време или изискват редовно да синхронизирате кода чрез командния ред.

Не е така с CodeAnywhere.

Най-силната, CodeAnywhere има две характеристики, които се открояват за мен:

  • Предварително изградени изображения на контейнери за 72+ програмни езика и рамки. Това означава, че можете да осигурите нова среда за разработка направо от редактора! Разбира се, кодът автоматично се хоства на новосъздадения контейнер и файловете се обслужват директно от там.
  • Свържете се с каквото и да било. Да, буквално всичко. Не сте длъжни да съхранявате кода си на сървърите на CodeAnywhere. Независимо дали кодът ви се намира в FTP, платформи за споделяне на файлове като Dropbox, Amazon S3 или на сложни платформи за контрол на версии като GitHub, можете лесно да настроите CodeAnywhere да чете и пишете в този източник, като използвате редактора на кода чисто за. , , Е, редактиране на код. ��

Още нещо, което искам да отбележа: ако не ви е приятно с Git, когато става въпрос за историята и разликите, CodeAnywhere може да се почувства като въздишка на облекчение. Редакторът използва своята система за сравнение за сравняване на файлове, която ви позволява да сравнявате два файла във всяка две ревизии (ревизия се създава всеки път, когато запазите файл).

Въпреки това има лек улов с ревизии – безплатната версия ви позволява да поддържате само една редакция, докато най-малкият платен план позволява най-много 20 редакции. Най-общо казано, това не е проблем, тъй като рядко искате да погледнете отвъд последната 20-та ревизия, но тъй като повечето програмисти имат навика да натискат Save няколко пъти в минута, това може да стане болезнено.

Всичко казано и готово, CodeAnywhere е солидно, приятно предложение за тези, които искат да се преместят в Облака и да останат там. Тъй като неговите правомощия обхващат код отпред, според мен, силно се препоръчва!

StackBlitz

Ако сте най-вече отпред и не можете да се отдалечите от VSCode интерфейса, StackBlitz е създаден само за вас.

Не виждате нищо особено? Не прекалих, докато не превъртя малко надолу и щракнах върху ъгловия бутон. стрела!

Познайте какво, това не е създадено умишлено, за да изглежда като VSCode – той е изграден на VSCode редактор! Толкова много, че можете да инсталирате разширения, да търсите в папките и да организирате файлове точно по начина, по който очаквате от обикновен VSCode екземпляр.

Но, чакайте, има още!

Може би или не сте забелязали това:

  • Всички приложения, създадени на StackBlitz, също се разполагат автоматично на своите сървъри! Така че това приложение за играчки Angular, което току-що създадох, се хоства автоматично на https://angular-yvyi2j.stackblitz.io/. Най-вероятно URL адресът все още работи (все пак ще се зарежда бавно, както бихте очаквали, когато се хоства безплатно)!
  • Можете да разклоните и да споделите проекта. Докато споделяте, получавате по-фин контрол върху това, което другите могат да правят.
  • Можете да се свържете с хранилище на GitHub и също така да оставите кода да бъде директно издърпан / избутан оттам. Или можете просто да изтеглите проекта като zip файл по добрия начин.

Но, чакайте, има още!

Сериозно! ��

Ето списъка с официални функции, предлагани от StackBlitz:

  • Поддръжка за Firebase (което е нещо, което аз лично не използвам, но ей, това е благодат за тези, които не искат да се гмуркат в мътните дълбини на задния край)
  • Intellisense, Търсене на проекти
  • Горещо презареждане, докато пишете
  • Импортиране на npm пакети
  • Редактирайте офлайн, когато не сте свързани!

StackBlitz е пълен с (красиви) изненади, когато става въпрос за премахване на препятствията от уеб разработката и внедряването. Вграждането на VSCode във вашия уебсайт вече не е нещо от мечтите!

AWS Cloud9

Cloud9 е може би първият базиран на браузъра IDE, който предлага сериозни функции и възприема идеята за браузъра като главен мениджър. Нищо чудно, че Amazon по-късно го придоби, и днес, Облак 9 е част от AWS предложенията.

Ако дори сте отдалечено прикрепени към (или се интересувате от) AWS платформата, Cloud9 е мястото, където търсенето на перфектен (добре, почти съвършен) редактор приключва. Нека да видим защо:

  • Няма допълнителни такси за използване на Cloud9. Можете да свържете Cloud9 към съществуващ / нов изчислителен екземпляр AWS и плащате само за този случай. Възможно е също така да се свържете със сървър на трети страни през SSH – точно без такса! ��
  • Първокласна поддръжка за AWS Serverless приложения (отстраняване на грешки и т.н.)
  • Директният терминален достъп до AWS от редактора (честно казано, приличен в редактор, терминал с раздели е това, което все още ми липсва в VSCode)
  • Поддържани над 40 езика за програмиране (Go, C ++, Ruby, Node, Python, PHP, Java … вземете своя избор)

Функциите за сътрудничество в Cloud9 също са желателни, позволявайки прегледите / интервютата да се извършват безпроблемно.

Друга функция на убиеца е възпроизвеждането във файл във видеоклип на промените, направени във файл, което прави процеса на преразглеждане радост:

Моят съвет?

Ако сте в AWS, не чакайте и вземете Cloud9 сега. И ако все още не сте в облака, но мислите да направите ход, приемете AWS и интегрирайте Cloud9 в работния си процес. Не можете да вземете по-добро решение по никакъв начин!

CodeEnvy

CodeEnvy е мощен облачен редактор, който използва контейнери на Docker, за да ви позволява да стартирате предварително конфигурирани и изолирани разработчици. Той е изграден върху IDE облак с отворен код Eclipse Che и предлага тона на мащабируемост и DevOps опции.

Докато пишеше, CodeEnvy е придобит от RedHat (който, забавно, сам е придобит от Oracle!).

Gitpod

Gitpod е освежаващо приемане на облачните редактори на кодове (или IDE, ако желаете), което цели да поддържа кода ви винаги тестван и актуален. С други думи, тя е дълбоко интегрирана с GitHub и всеки път, когато добавяте код, тества тестовете и CI / CD тръбопроводите, за да се увери, че кодът винаги е със 100% здраве.

Заслужава да проверите дали обичате преживяването VSCode и искате нещо, което поддържа всички основни бек-енд / фронт-енд езици и рамки (Django, Rails, Revel, вие го наречете).

Тея

Ако сте твърд фен на SOLID и архитект на софтуер за подбор на нитри, Theia IDE ще гъделичка костта ви за раздяла. Това е кодиран TypeScript (пет точки за стил веднага!) Код IDE, който има отлично разделен преден и задния край. Предният край работи в браузър, докато задния текст може да бъде навсякъде – локална машина или облак!

Но това не е всичко – предният край може да се изпълнява като приложение на Electron с напълно функционална, изолирана среда на браузъра, което ви дава вид и усещане на родното настолно приложение, ако го пожелаете.

Кодер

Въпреки че уебсайтът им не казва толкова ясно, Кодер е VSCode среда, групирана в сървър, който може да се стартира локално или в облака. Препоръчителната конфигурация е да стартирате IDE като сървър в облака и да осъществявате достъп до него локално чрез браузъра. Има предварително изградени изображения на Docker за настройка на нула, и корпоративен план, ако имате нужда от поддръжка или имате различни нужди.

заключение

Това повече или по-малко обхваща всички документи за IDE и редактори на кодове, когато са писали. В този списък оставих два вида предложения: тези, които са фокусирани изцяло върху интервюта и нямат пълноценна среда (с изключение на любимия ни класически JSFiddle, разбира се) и такива, които изглежда не предлагат нещо съществена и имаше малко повече от лъскава начална страница.

Ако смятате, че нещо заслужава да бъде тук, уведомете ме и ще бъда благодарен! ��

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