Minden programozó életében nagyon fontos, hogy olyan minőségű kódot írjon ami:

  • Könnyen átlátható.
  • Amikor megnyitod félév után könnyen értelmezhető.
  • Más számára aki megnyitja könnyen értelmezhető.
  • Újra felhasználható.

Ehhez készítettem egy kis leírást, hogyan tudjuk ezt elérni a lehető leggyorsabban, hogy annak látható eredményei is legyenek a saját, és a másokkal való munkánkban.

Egységesítés

Ahhoz, hogy az előbbi feltételek teljesüljenek először is egységes formázást kell alkalmaznunk céges szinten minden fájl állományunknál, így ezt szokja meg a szemünk, erre áll rá az agyunk, ezáltal sokkal előbb lesz olvasható és értelmezhető a kód, amit nézünk.

Szerencsére erre remek szoftverek vannak, amik automatikusan megteszik ezt helyettünk, és nem kell többet bajlódnunk a kód formázásával, csak néhány alap paradigmát kell elsajátítanunk még ez mellett.

1. Lássuk azokat a szoftvereket.

Én személy szerint Visual Studio Code-t használok és erősen ajánlom mindenkinek. Szerintem a legjobb kódszerkesztő a piacon, a Microsoft fejleszti, és valószínűleg még nagyon sokáig a toppon és a piacon lesz.

Ehhez a programhoz telepítek 3 plugin-t, amelyek a kód minőségéért és formázásáért felelnek:

Ezeket a VSC-n belül a pluginek alatt lehet telepíteni egy kattintással.

Majd ha feltelepültek, be kell konfigurálnunk őket az alábbi módon.

2. Konfigurálás

  1. Telepítsd az ESLint nevű plugint.
  • Figyelj rá, hogy hasonlók ne legyenek fent, mint pl TSLint, meg ilyenek, mert összeakadhatnak.
  • A SonarLint maradhat, illetve ha az nincs fent telepítsd fel azt is.
  1. Telepítsd a Prettier – Code formatter plugint.
  2. Futtasd le a projekt mappádban a következő parancsokat cmd-ben:
    Ugye ennek előfeltétele, hogy legyen npm a gépeden, ha nincs telepítsd a Node.js-t.
    A -g re nincs szükséged ha csak az adott projekthez szeretnéd beállítani, de erősen javaslom, hogy globálisan telepítsd!
npm install -D -g prettier
npm install -D -g eslint-config-prettier
npm install -D -g eslint-plugin-prettier

4. Csinálj egy .eslintrc.json nevű fájlt a projekt root mappájában, és írd bele a következőt:

{
    "extends": [
        "plugin:prettier/recommended"
    ]
}

5. Csinálj egy .prettierrc.json nevü fájlt a root mappába, és írd bele a következőt:

{
    "tabWidth": 4,
    "singleQuote": true
}

6. Nyomj egy “CTRL+SHIFT+P”-t és nyisd meg a Preferences: Open Settings (JSON) file-t a VSC-ben, ami a beállításait hozza elő JSON file-ban lementve, és add hozzá a következő sorokat.

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.organizeImports": true
  },
  "javascript.updateImportsOnFileMove.enabled": "always",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "[css]": {
    "editor.tabSize": 4,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "": {
    "editor.tabSize": 4,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.tabSize": 4,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.tabSize": 4,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.tabSize": 4,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.tabSize": 4,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.tabSize": 4,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

7. Elképzelhető, hogy tökéletes legyen a dolog, még a projekt mappájában létre kell hoznod egy .vscode mappát, és azon belülre egy settings.json file-t, aminek a tartalma a következő kell, hogy legyen, vagy ha van már ilyen mappád és benne a fájlod, akkor egészítsd ki ezekkel a sorokkal:

{
    "editor.tabSize": 4,
    // Insert spaces when pressing Tab. This setting is overriden
    // based on the file contents when `editor.detectIndentation` is true.
    "editor.insertSpaces": true,
    // When opening a file, `editor.tabSize` and `editor.insertSpaces`
    // will be detected based on the file contents. Set to false to keep
    // the values you've explicitly set, above.
    "editor.detectIndentation": false
}

Most már ha minden jól ment bekonfiguráltuk, hogy az ESLint barátként működjön együtt a Prettierrel, az ESLint sok logikai és szintaktikai hibáért fog szólni, a Prettier automatikusan minden mentéskor beformázza Neked a kódot, egy olyan szabvány szerint, amit a “Nagy” fejlesztők jónak tartanak, a SonarLint, meg mind ez mellett nagyon jó tanácsokkal fog ellátni, ha valamit nem jól csinálnál, vagy szerinte lehetne jobban is.

Jó munkát!

Kapcsolódó dokumentációk:

https://prettier.io/docs/en/configuration.html

https://prettier.io/docs/en/integrating-with-linters.html

Slite link:

https://adroit-group.slite.com/p/note/RM2y8DhbjycdoYnkTF7M1P

A továbbiakban a kód rendezéséről, a kommentelésről / dokumentálásról lesz szó. Tovább.