Clean Code
Kódformázás és olvashatóság
Formázási elvek, amelyek segítik a kód olvashatóságát és konzisztenciáját.
Kódformázás és olvashatóság
A formázás kommunikációs eszköz. Ahogy egy könyv tipográfiája segíti az olvasást, a kód formázása segíti a megértést.
Függőleges elrendezés – kapcsolódó dolgok legyenek közel
// ❌ Rossz – az összetartozó dolgok szét vannak szórva
const MAX_RETRIES = 3;
function fetchData(url) { ... }
const DEFAULT_TIMEOUT = 5000;
function retryFetch(url) { ... }// ✅ Javított – az összetartozó konstansok és függvények együtt vannak
const MAX_RETRIES = 3;
const DEFAULT_TIMEOUT = 5000;
function fetchData(url) { ... }
function retryFetch(url) { ... }Vízszintes formázás – ne legyen túl hosszú a sor
Az általánosan elfogadott maximum 80–120 karakter soronként. A túl hosszú sorok vízszintes görgetést igényelnek.
// ❌ Rossz – nehéz átlátni
const result = someReallyLongFunctionName(firstArgument, secondArgument, thirdArgument, fourthArgument);// ✅ Javított – tördelve, tagoltan
const result = someReallyLongFunctionName(
firstArgument,
secondArgument,
thirdArgument,
fourthArgument
);Konzisztencia mindennél fontosabb
Akár tabs, akár spaces – a fontos, hogy az egész projektben egységes legyen. Használj lintert (ESLint, Prettier) az automatikus érvényesítéshez.
Rövid összefoglaló
- A formázás kommunikáció: tükrözze a kód logikai struktúráját.
- Az összetartozó elemek legyenek közel egymáshoz vertikálisan.
- Legyen konzisztens formázás az egész projektben – erre való a Prettier/ESLint.