Mislim da je najvažniji aspekt programiranja čitljivost izvornog koda koji pišete ili održavate. To uključuje mnoge stvari, od sintakse programskog jezika, do imena varijabli, komentara i uvlačenja. Ovdje raspravljam o posljednjem od njih, uvlačenju .
Ne radi se o veličini uvlačenja, niti o izboru između kartica i razmaka ili treba li to zahtijevati u jeziku kao što je Python. Mnogi ljudi vole koristiti maksimalnu duljinu retka za svaki redak koda, obično 80 ili 120 znakova. S ovom idejom ne postoji maksimalna duljina, a ponekad ćete trebati koristiti vodoravnu traku za pomicanje. Ali nemojte se nakačiti, to nije za cijeli kôd - to je samo za neke njegove dijelove.
Četiri primjera poboljšanja pomoću uvlačenja koda
Prvi primjer
Pogledajte ovaj kod:
Čitljivost nije tako dobra i mogli biste završiti s nečim sličnim da biste izbjegli nered:
A vaših sedam redaka pretvorilo se u gotovo 40 redaka. Ovo sa samo tri ili četiri svojstva po objektu. Da je osam svojstava, postalo bi 70 linija.
Ideja o kojoj govorim je da upotrijebim nešto slično ovome (ja ga zovem "uvučen stupac" kod):
Drugi primjer
Nije to samo za literarne objekte. Može se koristiti za bilo koji dio koda koji je skupina sličnih redaka. Ovaj postupak može biti brz. Možete kopirati prvi redak, zalijepiti ga, a zatim prebrisati dijelove za promjenu u svakom retku.
Može se koristiti i u JS-u import . Usporedite ove dvije verzije:
Ovih trinaest uvoza abecedno je poredano putem. Svi su iz vsmape - pet iz vs/basei osam iz vs/platform.
To ne možete vidjeti bez pomicanja očiju naprijed-nazad po svakoj liniji. To je dosadno. Naravno, ne trebate izrađivati statistiku o tome kako vaše datoteke uvoze druge. No, neko vrijeme ćete pročitati ovaj kod da biste vidjeli jeste li nešto uvezli iz ispravne datoteke ili je datoteka već uvezena.
Sada pogledajte kako to izgleda kad je isti kod uvučen u stupac:
Zar to ne čini malo boljim?
Treći primjer
U ovom primjeru imamo deklaraciju metode iz kompajlera TypeScript:
Opet, razliku između linija možete lakše vidjeti. Pomaže vam da istovremeno pročitate svih pet redaka, trošeći manje truda. A ako trebate dodati parametar u svakog od ovih 5 redaka, to možete učiniti samo jednom, koristeći višeredni kursor u gotovo svim uređivačima koda.
Četvrti primjer
Evo posljednjeg primjera, zajedno s originalom i usporedbom:
Pros :
- Vaš kod izgleda čišće.
- Vaš je kôd poboljšao čitljivost
- Možda ćete moći smanjiti broj redaka u kodu
Protiv :
- Opcija automatskog oblikovanja uređivača koda može ometati izgled
- Kada dodajete jedan redak u blok redaka, ponekad morate promijeniti sve ostale retke
- Pisanje koda može potrajati
Koji alati mogu pomoći da se to postigne?
Neko sam vrijeme uvlačio ručno na ovaj način. Dosadno je, ali kad to jednom počneš raditi, ne možeš prestati. Gledate svoj kôd, sve one ponovljene retke koji bi mogli biti uvučeni u stupce kako bi bili čitljiviji i ne možete dalje, a da to ne napravite. To izaziva ovisnost.
Koristim Visual Studio i Visual Studio Code, pa sam pokušao pronaći proširenje ili dodatak koji pomažu u postizanju ovoga. Nisam našao nijednu. Tako sam u studenom 2017. godine počeo stvarati vlastito proširenje za Visual Studio Code i nazvao ga Smart Stupac Indenter.
Isti mjesec objavio sam prvu korisnu verziju. Pogledajte kako to funkcionira:
Postoje područja na kojima bi se proširenje moglo poboljšati. Trenutno se to radi samo s *.ts, *.jsi *.jsondatoteke. Mislim da bi to moglo pomoći i kod XML i HTML datoteka, poput uvlačenja stupaca istih atributa ponovljenih oznaka ili različitih oznaka koje se ponavljaju u grupi redaka.
Jednom kad je kôd odabran za uvlačenje stupaca, algoritam radi u tri koraka:
- Leksička analiza (ili tokenizacija) koda. Instalirao sam paket TypeScript npm kao ovisnost i koristio sam API kompilatora kako bih izbjegao ponovno pronalaženje kotača ovdje.
- Izvršite algoritam najdulje zajedničke podsljednosti (LCS) koji prosljeđuje svaki redak koda kao niz tokena. Ovo je najteži dio. Mnogo referenci na internetu govori o LCS-u za samo dvije sekvence kao ulazu, što se lako rješava dinamičkim programiranjem . Kako obično želimo uvući više stupaca od dva retka koda, problem postaje pronalaženje najdužeg zajedničkog niza (LCS) više nizova. Ovo je NP-težak problem. Kako je ovo generički problem, stvorio sam odvojeni npm paket (multiple-lcs) s osnovnom implementacijom da bih to postigao. To u nekim slučajevima nije najbolje rješenje, ali je izvedivo.
- Prepišite kôd da biste uvukli oznake koje se pojavljuju u LCS-u. Svaki token u LCS-u stavlja se u novi stupac.
Za neke vrste tokena, poput nizova ili imena varijabli, umjesto tipa koristi se naziv tipa u algoritmu LCS. Rezultat je veća podsljeda.
Stavio sam svu logiku u zasebni npm paket (smart-column-indenter). Ako želite stvoriti ovakvo proširenje ili dodatak za drugi IDE zasnovan na JavaScriptu, možete koristiti ovaj paket.
Moj početni razlog za stvaranje ovog rješenja bio je dokaz koncepta. Volio bih znati što drugi programeri misle o mom rješenju. Ako vam se svidjelo, molim vas pljeskajte .
Ako imate konstruktivne kritike ili znate druge alate koji rade isto, ostavite komentar. Ovo je članak koji sam smatrao korisnim.
Hvala na čitanju.
Ažuriranje (2018–03–29): Nakon što je objavljeno prije nekoliko dana, dobio sam puno povratnih informacija, većina je negativnih, ali svejedno hvala svima, dobro je znati zašto mnogi ljudi ne vole to. Kasnije sam saznao da ga ljudi obično nazivaju "poravnavanje koda", nećete pronaći ništa o "uvlačenju stupaca", pa ako želite potražiti više o tome, umjesto toga potražite "poravnanje koda". Učinio sam to i našao sam zanimljiv post na blogu s bloga Terencea Edena, jer se većina negativnih komentara odnosi na probleme s spajanjem VCS-a, povijest i prljave razlike, kopirat ću njegov zaključak: „Ako naši alati omoguće razumijevanje tih ideja teško, to su alati koji se trebaju promijeniti - ne mi. "
Ažuriranje (2018–05–03): Kao da je netko iz GitHub tima ovdje pročitao negativne komentare o poravnavanju koda, sada možete zanemariti razmake u pregledu koda.
Ažuriranje (2018–05–20): Ako koristite Visual Studio (ne Code), Shadman Kudchikar napravio je slično proširenje, možete pročitati o njemu ovdje ili ga preuzeti ovdje.
Factoid
Sada imamo 22 "zaslone rezolucije 1920x1080. Nema razloga da se ograničavate na 80 znakova u retku, iako morate odlučiti o maksimalnom ograničenju. Podrijetlo ovog ograničenja od 80 znakova je:
