Extensii utile pentru editorul de cod (IDE)

Pentru cei care lucreaza in IT pe pozitii predominant tehnice, indiferent ca sunt programatori, ingineri QA, DevOps sau Data Analysts, cea mai importanta unealta de lucru pe care o folosesc cu totii este editorul de cod (IDE-ul, abrevirea de la integrated development environment).

Acesta, indiferent pe care dintre multitudinea lor le folosim, ca e vorba de VS Code, Intellij IDEA sau PyCharm, au integrate multe functionalitati care ne ajuta sa scriem, sa dezvoltam si sa rulam un anumit bloc de cod. Totusi, IDE-urile in sine nu sunt chiar complete, motiv pentru care avem nevoie in mai multe situatii de niste aplicatii de IDE auxiliare numite extensii sau plugins.

In continuare, vom vedea o scurta lista a unora dintre cele mai folosite si utile astfel de extensii pentru un editor de cod, grupate in functie de domeniul de activitate.

De ce avem nevoie de extensii extra in IDE?

Dupa cum incepusem sa dezvolt mai sus, un IDE chiar daca este unul cunoscut, robust, functional si care primeste constant update-uri pe partea de improvements si performance, nu poate cuprinde from scracht chiar toate functionalitatile pe care fiecare developer / QA / DevOps ar vrea sa le contina.

In primul rand, fiecare are stilul sau propriu de a-si organiza setup-ul pe editorul cu care lucreaza asupra codului: cineva prefera o anumita tema vizuala, altul vrea o extensie care sa il ajute sa ruleze codul direct din IDE fara alte aplicatii terte, poate un QA vrea sa parcurga mai usor lista de locatori dintr-o fila si asa mai departe. E natural, tocmai de aceea extensiile ne ajuta sa ne imbunatatim IDE-ul dupa nevoile noastre personale.

In al doilea rand, aceste plugin-uri sunt extrem de utile pentru ca au si rolul de a ne usura in mod substantial munca pe care o realizam zi de zi pe acel IDE. Fie ca ne ofera sugestii pe partea de cod, ce anume sa scriem intr-un anume punct din cod, sau sa refactorizam codul pentru a fi mai clean si eficient, toate aceste lucruri ne ajusteaza semnificativ performanta de lucru si o fac sa fie mai placuta, dar si productiva.

Extensii utile pentru IDE

In continuare vom vedea o scurta selectie a unor extensii de IDE mai mult sau mai putin cunsocute, dar care cu siguranta au un rol extrem de practic raportat la activitatile pe care dorim sa le facem, fie ca lucram deja in IT sau suntem in punctul in care invatam pentru o astfel de cariera.

Extensiile prezentate sunt adaptate de la o activitate software la alta, si de la un IDE la altul; nu toate se pot transpune dintr-un editor in altul, motiv pentru care daca ne intereseaza una dintre ele, ar trebui sa cautam daca exista un echivalent pentru IDE-ul pe care il folosim.

1. Live Server

O prima extensie de IDE foarte intalnita si cunoscuta in zona de Front-end development, folosita in special pe editorul VS Code de la Microsoft este Live Server. Aceasta extensie ii ajuta extrem de mult pe cei care dezvolta cod in zona de Web developemnt deoarece ea, odata instalata, asigura local un server de development care face auto-refresh la browser atunci cand salvam o modificare la codul pe care lucram.

Mai concret, sa zicem ca lucram la partea de HTML si CSS a unei pagini. Si adaugam in pagina un buton sub forma unui dreptunghi, il coloram cu albastru si ii dam si un efect de umbra. Dupa ce scriem codul necesar, vrem sa vedem live rezultatul, daca e ok.

In acest caz, nu mai trebuie sa deschidem un browser separat in care sa proiectam codul, ci il facem instant din IDE cu ajutorul extensiei de Live Server, care ne va deschide o pagina de navigare si vom vedea acolo direct butonul. Extrem de util pentru developerii de pe WebDev.

2. Prettier

Tot din zona Web development-ului provine si urmatoarea extensie pentru VS Code, si anume Prettier. Acest plugin este unul de formatare si “curatare” a codului nostru, daca il avem instalat si activat in VS Code.

Astfel, daca avem un cod mai complex, cu multe functii, paragrafe, paranteze, spatii si semne de punctuatie, Prettier ne va formata liniile de cod de tip HTML / CSS / JS in asa fel incat sa fie cat mai usor de citit, le va spatia mai aerisit si ne va adauga automat acele elmente obligatorii daca constata ca le lipsesc: inchide tag-urile, pune ghilimele, pune ” ; ” la final etc.

Mai ales cand lucram mult si suntem presati de timp, Prettier poate fi un ajutor super bun deoarece reprezinta acel ochi suplimentar care este atent asupra codului nostru si are grija sa nu lipseasca elemente importante, si deci sa nu apara erori de compilare sau sintaxa la final.

3. Better Comments

Un alt tool interesant si cu o utilitate mai generala pentru cei care folosesc VS Code (nu doar Front-End), dar care are frati si pentru alte IDE-uri este Better Comments. Aceasta extensie ofera o functionalitate care la prima vedere nu pare cea mai importanta si nici nu e ceva critic, dar care in proiectele mai complexe si cu multe ramificatii se poate dovedi extrem de utila.

Dupa cum releva si numele sau, Better Comments ne ajuta sa ne formatam si sa avem o structura mai clara asupra comentariilor pe care vrem sa le adaugam de-a lungul codului scris de noi sau de altii. Astfel, putem sa ne coloram diferit liniile de comentarii pe care le lasam in filele de cod si sa le acordam deci semnificatii diferite in functie de culoare.

4. GitToolBox / GitLens

Urmatoarea extensie folosita de foarte multi oameni din IT si care este extrem de utila este reprezentata de GitToolBox (in cazul in care folosim Intellij ca IDE de lucru) sau GitLens (daca folosim VS Code). Aceste extensii reprezinta de fapt un pachet cu mai multe functionalitati interesante legate de partea de Git si GitHub, dupa cum le dezvaluie si numele.

Mai precis, cu ajutorul acestora putem sa efectuam o serie de actiuni precum a vizualiza numarul de commit-uri cu care suntem in fata sau in spatele codului de pe branch-ul de master, sa ni-l afiseze sub forma unui status bar, modificarile facut si commitate (sau nu inca) pe branch, putem vizualiza cine si cand a efectuat o anumita modificare in cod sau sa ne facem cleanup la lista de branch-uri locale care nu mai exista, motivul principal fiind ca acestea au fost deja integrate pe master.

De asemenea, ne pot ajuta si la partea de organizare sistematica a mesajelor pe care le oferim odata cu commit-urile noastre asupra branch-urilor, ceea ce poate fi folositor cand vrem sa fim succinti, dar expresivi.

5. Cucumber si Gherkin

Doua plugin-uri extrem de necesare si utile in special pentru cei care invata sau lucreaza pe partea de testare automata sunt Cucumber si Gherkin. Aceste doua componente software aditionale au rolul de a organiza fisierele noastre cu teste automate in maniera Page Object Model si de a ne ajuta sa redactam testele automate intr-un limbaj natural, cat mai usor de inteles.

Concret, Gherkin ne ajuta pentru ca este acea componenta care ne permite scrierea efectiva intr-un limbaj natural, uzual, a pasilor care compun testele automate. Integrarea lui Gherkin este extrem de mare, astfel incat se pot folosi in jur de 70 limbi pentru acesta.

Al doilea plugin, Cucumber, ajuta la definirea pasilor pe care i-am scris in Feature File cu ajutorul lui Gherkin. Mai specific, cu ajutorul lui Cucumber legam pasii definiti in limbaj natural de o anumita logica, dezvoltandu-le metodele din spate pentru a putea pune propriu-zis lucrurile in miscare.

6. Extensiile pentru tema IDE-ului

O alta serie de extensii extrem de populare printre cei care lucreaza in IT si folosesc editoarele de cod sunt cele care schimba tema sau modul de vizualizare a scrisului. Acestea sunt foarte apreciate intrucat developerii prefera sa isi customizeze cat mai mult instrumentele de lucru, temele intunecate sau cu nuante pastel fiind printre cele mai cautate, ori care se pliaza pe o anumita tematica dintr-un serial / carte / film.

Desigur, dupa cum cred ca e usor de intuit, nu exista o singura extensie care sa ne ajute sa schimbam modul in care arata interfata editorului sau a codului nostru, ci o gama extrem de larga din care putem alege ce ne place. Trebuie doar sa aruncam o privire in Marketplace-ul fiecarui IDE.

Astfel, o mica lista cu astfel de plugin-uri pentru schimbarea temei si a vizualizarii codului sunt:

• Gerry Themes
• Material Theme
• Dark-Themes
• Xcode-Dark Themes
• VSCode Theme.

7. Google Search

Din punct de vedere practic, mereu ni se intampla sa lucram ceva in IDE, apoi sa ne blocam la un punct si sa cautam ajutor si raspunsuri pe Google. Absolut nimic gresit, insa acest lucru se rezuma la intreruperea lucrului in IDE, minimizarea lui in bara de sistem, deschiderea unui browser de internet si cautarea raspunsurilor.

Cu ajutorul extensiei Google Search nu mai e nevoie sa ne intrerupem focusul spre editorul de cod, ci putem cauta direct din acesta anumite notiuni sau chestii de programming pe internet, facand lucrul mult mai fluid, mai rapid si inchegand mai bine codul nostru cu notiuni noi, daca e cazul.

8. Rainbow brackets

O alta extensie super utila a carei folosire o vad aproape ca fiind obligatorie pentru oricine interactioneaza cu un cod ceva mai complex este Rainbow brackets. “Parantezele curcubeu”, daca e sa respectam traducerea mot-à-mot a numelui, ofera o functionalitate vizuala extrem de buna si eficienta.

Ea coloreaza parantezele din cadrul unui bloc de cod folosind nuante diferite, astfel incat sa putem distinge vizual sensibil mai usor unde incepe o paranteza (cu codul sau din interior) si unde se incheie, fara sa ne mai batem capul ca nu am inchis-o unde trebuie si de aici sa rezulte erori de sintaxa a codului in terminalul editorului.

Consider ca e extrem de utila si obligatoriu de folosit de orice programator sau QA care lucreaza cu un cod de complexitate medie sau mare, usurand vizibil munca respectiva.

Si o extensie bonus pentru cei care invata programare…

O extensie extrem de buna ce aduce oportunitati de invatare interesante direct in editoarele dezvoltate de compania JetBrains este asa-zisa JetBrains Academy. Aceasta extensie ofera o gama interesanta de cursuri ce pot fi accesate direct din IDE, si contin lectii interesante despre Java, Python, Kotlin sau testare automata.

Cursurile se desfasoara local, la tine in IDE-ul instalat, unele dintre ele s-ar putea sa necesita niste extensii suplimentare dar care se pot instala destul de usor. Progresul ramane salvat, iar explicatiile teoretice sunt insotite si de exercitii practice, astfel incat experienta de invatare sa fie una reala si productiva, nu toceala si urmarit pasiv. E o alternativa buna pentru cei care vor sa invete programare si se afla la inceput de drum.

Concluzii

In incheiere, editoarele de cod ne ajuta in mod fundamental sa lucram si sa interactionam cu codul ce il dezvoltam sau testam, insa pentru a avea o experienta cat mai completa si substantial mai productiva, e necesar in multe cazuri sa instalam si anumite extensii pentru IDE-ul nostru.

Lista prezentata aici e una extrem de succinta raportat la marea lor masa, existand cate o extensie pentru aproape orice detaliu. Nu trebuie decat sa dam un mic search pe Google si cu siguranta vom gasi ceea ce ne intereseaza, pentru a ne putea imbunatati experienta de utilizare a editorului si a muncii in general.

Surse pe subiect

Tutorial cu 7 extensii de IDE pentru Web Development

Articole cu liste de extensii pentru IDE interesante poti gasi 👉 aici, 👉 aici, 👉 aici si 👉 aici.