Front-end әзірлеушісіне арналған ең жақсы IDE және мәтіндік редакторлар

Он екі жыл бұрын веб-сайттар қолдар мен кәдімгі мәтіндік редактордың көмегімен жасалды. Өзіңіздің html тегтеріңізді жазу, CSS-те кірістірілген стильдерді қолдану арқылы аздап сиқыр, қызықты анимациямен тәжірибелі - және сайт пайдалануға дайын. Қазіргі уақытта веб-сайтты немесе қосымшаны жасау және әзірлеу құрылымдық процесс болып табылады. Бір minutes ішінде веб-сайт құрастырушы арқылы веб-сайт жасай аласыз немесе оны бірнеше ай бойы қинауға болады. Веб-әзірлеу өзгерген сайын codeтауды жеңілдету үшін жаңа фреймворктар, плагиндер және қолданбалар пайда болады. Қосымша құралдар жұмыс ортаңызды жеңілдетеді және өнімділікті арттырады. Біз ашық бастапқы жобаны бірлесіп басқару және jQuery сияқты кітапханалар үшін нұсқаларды басқару жүйелерін қолданамыз. Веб-сайтты құру процесінде әзірлеу ортасы өте маңызды рөл атқарады. Идеал мәтіндік процессорды таңдау эмпирикалық зерттеулерді қолдануды талап ететін қиын, бірақ орындалатын тапсырма болуы мүмкін. Құралдар, қолданбалар мен плагиндердің осы мұхитында қалай адаспауға болады? Күнделікті жұмыс үшін қай мәтіндік редакторды таңдау керек, ал үй жануарларына арналған жобалар үшін қайсысын таңдау керек? Біз жаңадан бастаушылар үшін ең танымал құралдардың қысқаша тізімін жасадық. Мақалада сүйікті редакторыңызды айтуды ұмытып кеттік пе? Пікір қалдырыңыз!

Блокнот++

Шығарылым: 2003 жылғы 24 қараша. Синтаксисті бөлектеу және қойындылары бар ең қарапайым мәтіндік редактор. Көптеген бағдарламалау тілдері мен технологияларын қолдайды. Веб-әзірлеудің тайғақ беткейіне енді ғана қадам басқан бастаушыға өте ыңғайлы. Мүмкіндіктер:

• бетбелгілер жасау;
• жасалған файлдарды автоматты түрде көшіру және сақтау;
• стандартты мәтіндік codeтауларды қолдау және түрлендіру;
• пайдаланушылар синтаксисті бөлектеу ережелерін дербес орната алады;
• әртүрлі пайдалы плагиндерді орнату;
• жылдам пернелерді орнату және қайта анықтау;
• емлені тексеру және мәтінді шифрлау;
• Tetris ойнау (codeтаудан шаршаған жағдайда);
• деректердің үлкен көлемін басқара алады.

Бұл редактордың қосымша «ерекшелігі» қараңғы әке - Дарт Вейдер мен «жек көрушілік қалтасының» әкесі Билл Гейтстің цитаталарын көрсету түріндегі «Пасха жұмыртқасы» болып саналады. Шыбын: бүгінгі даму стандарттарына сәйкес келмейтін тым жеңілдетілген интерфейс. Оны күндізгі шамның жарығымен салыстыруға болады. Синтаксисті бөлектеу: + Tagті автоматты түрде анықтау: + ОЖ үйлесімділігі: Windows, ReactOS. Tagін нұсқасы: иә. Сілтеме: https://notepad-plus-plus.org/download/v7.5.1.html

Жақшалар

Шығарылым: 2014 жылдың 4 қарашасы. Adobe-де Frontend әзірлеушілері мен дизайнерлері ұнататын көптеген керемет өнімдер бар. Жақша – солардың бірі. Бұл тегін, ашық бастапқы, кросс-платформалық редактор JavaScript, HTML5 және CSS3 негізінде жасалған, сондықтан оның жұмысы арнайы соларға бағытталған. Егер сізде JavaScript туралы негізгі түсінік болса, онда бұл редактормен жұмыс істеуді бастау керек. Өйткені ол кеңейту үшін барлық қажетті құралдарды қамтамасыз етеді. Редактор кейбір жақсартуларды қажет етеді, бірақ тұтастай алғанда ол белсенді түрде әзірленуде және әзірлеушілер арасында танымал. Сонымен қатар, әрбір пайдаланушы өз өзгерістерін енгізіп, қосымша кеңейтімдер жасай алады. Мүмкіндіктер:

• JS, CSS және HTML файлдарын өңдеу бойынша кеңестер;
• нақты уақытта браузерде codeты қарауға қолдау көрсету (Live Preview);
• FTP serverімен синхрондау;
• қолдау және аз файлдарға CSS автоматты құрастыру;
• мәтінмен жұмыс істеу кезінде пайдалануға болатын қаріптердің таңдауын (оларды қосу мүмкіндігімен) қамтамасыз етеді;
• нұсқаларды басқару жүйесімен жұмыс істеу – Git.

2017 жылдың жаңа нұсқасы тарих арқылы іздеу, әртүрлі codeтаулары бар файлдарды жіберу және алу, жылдам пернелерді пайдаланып өңдеу тарихын шарлау, кеңейтімдерді қосу және өшіру және Linux үшін жергілікті мәзірді енгізді. Синтаксисті бөлектеу: + Tagті автоматты түрде анықтау: + ОЖ үйлесімділігі: macOS, Windows және Linux. Tagін нұсқасы: иә. Сілтеме: http://brackets.io

Керемет

Шығарылым: 2008 жылғы 18 қаңтар. Кросс-платформалық code редакторы және біріктірілген әзірлеу ортасы (IDE). Бізге бұл редактор оның жылдамдығы мен пайдаланудың қарапайымдылығы үшін ұнады, ал Coda және TextMate жол бойында қалып, негізгі пайдаланушы базасын өте ыңғайсыз жаңартулармен көңілін қалдырды. Мүмкіндіктер:

• файлдар, таңбалар және codeтың белгілі бір бөлімдері арқылы жылдам шарлау (сондықтан оны көптеген пайдаланушылар жақсы көреді);
• Синтаксисті тексеру функциясы таңбаларды енгізген кезде бірден жұмыс істейді;
• макростарды пайдаланып соңғы әрекеттерді оңтайландыру және қайталау;
• codeты автоматты түрде сақтау, бұл оның жоғалуын болдырмайды;
• әртүрлі көрнекі тақырыптар мен бағдарламалау тілдерін қолдау;
• жиі қолданылатын кілт сөздерді және code фрагменттерін сақтау;
• Python тіліндегі дайын плагиндер жиынтығы;

Синтаксисті бөлектеу: + Tagтерді автоматты түрде анықтау: + ОЖ үйлесімділігі: Windows, Mac OS, GNU/Linux. Tagін нұсқа: иә (функционалдық шектеулерсіз), бірақ қосымшаны қарап шыққаннан кейін лицензия сатып алу керек. Сілтеме: http://www.sublimetext.com/3

WebStorm

Шығарылым: 2015. Бұл қарапайым мәтіндік редактор емес, сонымен қатар JavaScript, CSS және HTML үшін біріктірілген әзірлеу ортасы. Оның авторлары - JavaRush студенттері жақсы көретін IntelliJ IDEA ортасын жасаған JetBrains компаниясы. WebStorm - ең ақылды және танымал редакторлардың бірі. Негізгі фреймворктарды қолдайды: AngularJS, React және Meteor және Node.js жүйесінде қолданба жасау үшін пайдаланылады. WebStorm - бұл өте күрделі орта, бірақ сонымен бірге ол көптеген кеңейтімдер мен мүмкіндіктерді қажет ететіндер үшін тамаша. Мүмкіндіктер:

• Git, GitHub, Mercurial нұсқаларды басқару жүйелерімен интеграцияның арқасында әртүрлі көлемдегі жобалармен тиімді жұмыс істейді. Бұл файлдарды «тапсыруға», өзгерістерді қарауға және IDE ішінде қақтығыстарды шешуге мүмкіндік береді;
• LiveEdit - бетті қайта жүктемей-ақ алдын ала өзгерістерді көрсетеді (Google Chrome браузерімен жұмыс істейді);
• өңдеу кезінде codeты талдау;
• Javascript және Node.js қолданбалары үшін рефакторинг және жөндеу codeы;
• ECMAScript, TypeScript, CoffeeScript және Dart тілдерін қолдау;
• Node.js Express үлгісін пайдаланып қолданбаларды жасау;
• Mocha, Karma және Protractor сияқты фреймерлермен іске қосу және жөндеу. Сіз оны редактордың өзінде немесе мәтінге жылдам оралуға болатын ыңғайлы ағаш мәзірінде тексере аласыз;
• LESS, Sass, SCSS, Stylus препроцессорларына толық қолдау көрсетіледі;
• терминал терезесінде жылдам іздеу;
• бірнеше Javascript кітапханаларын қамтитын жобаларды құрылымдау;
• jQuery, YUI, Prototype, DoJo, MooTools, Qooxdoo және Bindows бағдарламаларын қолдау;
• бастапқы қолдау және Angular 2-мен жұмыс істеу.

Синтаксисті бөлектеу: + Tagті автоматты түрде анықтау: + ОЖ үйлесімділігі: Windows, Mac OS, GNU/Linux. Tagін нұсқа: 30 күндік сынақ нұсқасы бар, содан кейін лицензия сатып алу керек. Сілтеме: http://www.jetbrains.com/webstorm/

Атом

Шығарылым: 2014 жылдың 26 ​​ақпаны. Барлығының сүйікті Github авторлары жасаған тегін ашық бастапқы бағдарламалық құрал . Ол 50 модульге құрылған және Node JS, CoffeeScript, CSS, HTML және C++ тілінде жазылған. Сондай-ақ, сіз өзіңіздің модульдеріңізді жасай аласыз және оларды ашық қолжетімділік үшін репозиторийде орналастыра аласыз. Бұл әзірлеу ортасын пайдалану өте оңай және қосымша плагиндер онымен жұмыс істеу мүмкіндіктерін кеңейтуге көмектеседі. Мүмкіндіктер:

• json файлдарының орнына конфигурация үшін GUI пайдаланады;
• codeтың шағын картасын және оның фрагменттерін қарау;
• жобалар мен файлдар бойынша жылдам іздеу;
• ыңғайлы бүйірлік тақта және файл ағашы;
• Github-та қол жетімді кеңейтім пакеттерінің үлкен саны;
• Emmet, Autoprefixer, Livereload қолдауы;
• бүйірлік тақта ағашы арқылы файлды қарау;
• редакторды пайдаланушының жеке қалауы бойынша теңшеу мүмкіндігі;
• кірістірілген файл менеджерінің болуы;
• плагиндері бар басқару пакетін орнатудың қажеті жоқ, пайдаланушының графикалық интерфейсін пайдалану жеткілікті;
• Node.js тілінде жазылған плагиндерді қолдау;
• PNG, JPEG кескіндерін тікелей редакторда алдын ала қарау;
• Git нұсқасын басқару жүйесімен жұмысты ұсынады.

Майдағы шыбын оның көп жадты қажет ететіндігі және үлкен деректер файлдарын өңдеуге қабілетті емес болуы мүмкін. Синтаксисті бөлектеу: + Tagті автоматты түрде анықтау: + ОЖ үйлесімділігі: Windows 7, 8, Mac OS 10.8, Linux. Tagін нұсқасы: иә. Сілтеме: https://atom.io

Vim

Шығарылым: 2 қараша, 1991 жыл. Сіз сұрай аласыз: кәрі Вим қазіргі заманғы редакторлар тізімінде нені ұмытты? Шындығында, Vim - UNIX операциялық жүйелерінде қол жетімді ескі vi негізінде жасалған, толығымен заманауи және қуатты мәтіндік редактор. Және ол үнемі дамып отырады. Әзірлеушілер жыл сайын дерлік өзгерістер енгізіп, жаңа плагиндер мен қондырмаларды қосады. Бұл соңғы рет 2016 жылы болды және кеңейтімдердің саны мен жылдамдығы шынымен таң қалдырады және тексеруге тұрарлық. Vim - көп режимді редактор. Сіз бірден бірнеше жұмыс жасай аласыз: пәрмен, кірістіру немесе визуалды. Дегенмен, бұл бастаушы әзірлеуші ​​үшін өте күрделі екенін ескерген жөн. Көп жылдық тәжірибесі бар мамандар оның көптеген функцияларын біле бермейді. Мүмкіндіктер:

• стандартты мәтіндік codeтауды қолдау;
• бір уақытта бірнеше файлмен жұмыс істеуге болады;
• файлдарды автоматты түрде тану және түрлендіру;
• Perl, Tcl, Python және Ruby бағдарламалау тілдерімен үйлесімділік;
• әрбір пайдаланушының қажеттіліктері үшін ыңғайлы параметрлерді жасау;
• макростарды жазу және енгізу;
• визуалды режим көптеген пайдалы функцияларды орындай алады (мысалы, мәтін блоктарын бөлектеу);
• оңнан солға қарай жазылған стандартты емес тілдерді қолдау (мысалы, араб немесе иврит);
• іздеу сөздері мен пәрмендер журналының ыңғайлы параметрлері;
• Тінтуірсіз пернетақтаны толық пайдалануды қолдайды;
• үлкен файлдармен жұмыс істегенде керемет өнімділікті көрсетеді.

Синтаксисті бөлектеу: + Tagтерді автоматты түрде анықтау: + ОЖ үйлесімділігі: Windows, DOS, Linux, BSD және Mac OS, iOS, Android, AmigaOS, Atari MiNT, BeOS, NextStep, OS/2, OSF, RISC OS, SGI, VMS. Tagін нұсқасы: иә. Сілтеме: https://vim.sourceforge.io/download.php

Netbeans

Шығарылған: 1997. Oracle демеушілігімен және ынталы әзірлеушілер қолдауымен тегін, ашық бастапқы IDE. Ыңғайлылық пен жылдамдықты жақсарту үшін ол үнемі дамып, әртүрлі кеңейтімдермен толықтырылып отырады. Мүмкіндіктер:

• терезе мен сақтауды басқару;
• интерфейс пен дизайндағы өзгерістер (мәзірлер мен қалқымалы терезелерді қоса);
• қашықтағы serverмен қосылымды орнату;
• Кодты рефакторинг қолжетімді;
• қондырмалар, шаблондар және code генераторлары бар;
• көптеген бағдарламалау тілдерін қолдайды;
• автоматты синтаксисті тексеру және түзету;
• пайдаланушының қажеттіліктеріне сәйкес редакторды теңшеу;
• JavaScript және Node.JS қолданбаларын іске қосу және жөндеу;
• PHP фреймворктерін қолдау (Symfony, Zend және Yii).

Майда ұшыңыз: ол көп жадты жұмсайды. Синтаксисті бөлектеу: + Tagтерді автоматты түрде анықтау: + ОЖ үйлесімділігі: Microsoft Windows, Linux, FreeBSD, Mac OS X, OpenSolaris және Solaris. Tagін нұсқасы: иә. Тек ол тегін. Сілтеме: https://netbeans.org

Хардкор бонусы: Блокнот, яғни «Блокнот»

Шығарылым: 1985, Windows 1.0 жүйесімен бірге. Иә, иә, әдепкі бойынша барлық Windows компьютерлерінде орнатылған блокнот. «Мына көне заман нені ұмытты, дамуға мұның қандай қатысы бар?» деп сұрайсың. Шындығында, классикалық блокнотта бүгінгі күні ешкімнің маңызды нәрсе жасауы екіталай екенін түсінеміз. Дегенмен, дәл осы бағдарламада көптеген жаңадан әзірлеушілер соңғы 15-20 жыл ішінде өздерінің алғашқы веб-сайттарын «біріктіруге» және алғашқы бағдарламаларын жазуға жұмсады. Біздің айтқымыз келетіні, егер сіз үйренгіңіз келсе, сізге ештеңе кедергі болмауы керек. Нағыз әзірлеуші ​​(және оны болғысы келетін адам) үшін Блокнот кедергі емес. Мүмкіндіктері: тек қара мәтін, тек хардкор. Майда ұшпаңыз: жақпада шыбын жоқ: «Блокнот» өзінің минимализмінде тамаша! Синтаксисті бөлектеу: жоқ. Жадыңызды жаттықтырыңыз! Автоматты тегті анықтау: уау! Tagін нұсқа: Блокнот Windows жүйесі сияқты тегін.