Kakovost kode na frontendu: Lintanje in formatiranje za dosleden razvoj

V hitrem svetu frontend razvoja je hitra dostava delujoče kode pogosto prioriteta. Vendar pa lahko zanemarjanje kakovosti kode privede do številnih težav v prihodnosti. Te težave vključujejo povečane stroške vzdrževanja, zmanjšano produktivnost ekipe in frustrirajočo izkušnjo za razvijalce. Temelj visokokakovostne frontend kode je dosleden slog in upoštevanje najboljših praks, kar je mogoče učinkovito doseči z orodji za lintanje in formatiranje. Ta članek ponuja celovit vodnik za razumevanje in implementacijo lintanja in formatiranja v vaših frontend projektih, kar zagotavlja dosledno in vzdržljivo kodno bazo v globalno porazdeljenih ekipah.

Zakaj je kakovost kode na frontendu pomembna?

Preden se poglobimo v podrobnosti lintanja in formatiranja, poglejmo, zakaj je kakovost frontend kode tako ključna:

• Vzdržljivost: Čisto, dobro formatirano kodo je lažje razumeti in spreminjati, kar poenostavlja vzdrževanje in zmanjšuje tveganje za vnos hroščev med posodobitvami. Predstavljajte si razvijalca v Bangaloreju v Indiji, ki zlahka razume kodo, ki jo je napisal sodelavec v Londonu v Združenem kraljestvu.
• Berljivost: Dosleden slog kodiranja izboljšuje berljivost, kar razvijalcem olajša hitro razumevanje logike in namena kode. To je še posebej pomembno pri uvajanju novih članov ekipe ali sodelovanju pri projektih v različnih časovnih pasovih in na različnih celinah.
• Sodelovanje: Standardiziran slog kode odpravlja subjektivne razprave o preferencah formatiranja in spodbuja lažje sodelovanje znotraj razvojnih ekip. To je ključno za porazdeljene ekipe, kjer je lahko neposredna komunikacija omejena.
• Manj napak: Linterji lahko prepoznajo potencialne napake in slabe vzorce pred izvajanjem, kar preprečuje hrošče in izboljšuje splošno stabilnost aplikacije. Zgodnje odkrivanje preproste sintaktične napake lahko prihrani ure odpravljanja napak.
• Izboljšana zmogljivost: Čeprav niso vedno neposredno povezane, prakse kakovosti kode pogosto spodbujajo pisanje učinkovitejše in optimizirane kode, kar vodi k izboljšani zmogljivosti aplikacije.
• Učinkovitost uvajanja: Novi člani ekipe se lahko hitro prilagodijo kodni bazi, če je uveljavljen dosleden slog. To zmanjša krivuljo učenja in jim omogoča, da prej začnejo učinkovito prispevati.
• Deljenje znanja: Standardizirana koda omogoča boljše deljenje odrezkov kode in knjižnic med projekti in ekipami.

Kaj sta lintanje in formatiranje?

Lintanje in formatiranje sta dva ločena, a dopolnjujoča se procesa, ki prispevata h kakovosti kode:

Lintanje

Lintanje je postopek analiziranja kode za potencialne napake, kršitve sloga in sumljive konstrukte. Linterji uporabljajo vnaprej določena pravila za prepoznavanje odstopanj od uveljavljenih najboljših praks in konvencij kodiranja. Odkrijejo lahko širok spekter težav, vključno z:

• Sintaktičnimi napakami
• Nedeklariranimi spremenljivkami
• Neuporabljenimi spremenljivkami
• Potencialnimi varnostnimi ranljivostmi
• Kršitvami sloga (npr. nedosledna zamikanja, konvencije poimenovanja)
• Težavami s kompleksnostjo kode

Priljubljeni frontend linterji vključujejo:

• ESLint: Široko uporabljen linter za JavaScript in JSX, ki ponuja obsežno prilagajanje in podporo za vtičnike. Je zelo nastavljiv in ga je mogoče prilagoditi različnim slogom kodiranja.
• Stylelint: Zmogljiv linter za CSS, SCSS in druge stile, ki zagotavlja dosleden slog in upoštevanje najboljših praks.
• HTMLHint: Linter za HTML, ki pomaga prepoznati strukturne težave in pomisleke glede dostopnosti.

Formatiranje

Formatiranje, znano tudi kot olepševanje kode, je postopek samodejnega prilagajanja postavitve in sloga kode vnaprej določenemu standardu. Formaterji obravnavajo vidike, kot so:

• Zamik
• Razmik med vrsticami
• Prelom vrstic
• Slogi narekovajev
• Uporaba podpičij

Priljubljen frontend formater je:

• Prettier: Samozavesten formater kode, ki podpira širok spekter jezikov, vključno z JavaScript, TypeScript, CSS, HTML in JSON. Prettier samodejno preoblikuje vašo kodo, da ustreza njegovemu vnaprej določenemu slogu, s čimer odpravlja subjektivne razprave o formatiranju.

Nastavitev ESLint in Prettier za frontend projekt

Sprehodimo se skozi postopek nastavitve ESLint in Prettier v tipičnem frontend projektu. Osredotočili se bomo na projekt JavaScript/React, vendar načela veljajo tudi za druga ogrodja in jezike.

Predpogoji

• Nameščena Node.js in npm (ali yarn)
• Frontend projekt (npr. aplikacija React)

Namestitev

Najprej namestite ESLint, Prettier in potrebne vtičnike kot razvojne odvisnosti:

            npm install eslint prettier eslint-plugin-react eslint-plugin-react-hooks eslint-config-prettier --save-dev
            

              
                Copy
              
            
          

Pojasnilo paketov:

• eslint: Osrednja knjižnica ESLint.
• prettier: Formater kode Prettier.
• eslint-plugin-react: Pravila ESLint, specifična za razvoj v Reactu.
• eslint-plugin-react-hooks: Pravila ESLint za uveljavljanje najboljših praks React Hooks.
• eslint-config-prettier: Onemogoči pravila ESLint, ki so v konfliktu s Prettier.

Konfiguracija

Ustvarite konfiguracijsko datoteko ESLint (.eslintrc.js ali .eslintrc.json) v korenski mapi vašega projekta. Tukaj je primer konfiguracije:

            module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:react-hooks/recommended',
    'prettier',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  plugins: [
    'react',
  ],
  rules: {
    'react/react-in-jsx-scope': 'off',
  },
};

            

              
                Copy
              
            
          

Ključni vidiki te konfiguracije:

• env: Določa okolje, v katerem se bo koda izvajala (brskalnik, Node.js, ES2021).
• extends: Določa nabor vnaprej določenih konfiguracij, ki jih podeduje.
• eslint:recommended: Omogoči nabor priporočenih pravil ESLint.
• plugin:react/recommended: Omogoči priporočena pravila ESLint za React.
• plugin:react-hooks/recommended: Omogoči priporočena pravila ESLint za React Hooks.
• prettier: Onemogoči pravila ESLint, ki so v konfliktu s Prettier.
• parserOptions: Konfigurira razčlenjevalnik JavaScript, ki ga uporablja ESLint.
• plugins: Določa seznam vtičnikov za uporabo.
• rules: Omogoča prilagajanje posameznih pravil ESLint. V tem primeru onemogočimo pravilo `react/react-in-jsx-scope`, ker sodobni projekti React ne zahtevajo vedno uvoza Reacta v vsaki datoteki komponente.

Ustvarite konfiguracijsko datoteko Prettier (.prettierrc.js, .prettierrc.json ali .prettierrc.yaml) v korenski mapi vašega projekta. Tukaj je primer konfiguracije:

            module.exports = {
  semi: false,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 120,
  tabWidth: 2,
};

            

              
                Copy
              
            
          

Ta konfiguracija določa naslednje možnosti Prettier:

• semi: Ali naj se na koncu stavkov dodajo podpičja (false pomeni brez podpičij).
• trailingComma: Ali naj se v večvrstičnih objektih in nizih dodajo končne vejice (all jih doda, kjer je mogoče).
• singleQuote: Ali naj se za nize uporabljajo enojni narekovaji namesto dvojnih.
• printWidth: Največja dolžina vrstice, preden Prettier preide v novo vrstico.
• tabWidth: Število presledkov za zamik.

Te možnosti lahko prilagodite svojemu želenemu slogu kodiranja. Za celoten seznam razpoložljivih možnosti si oglejte dokumentacijo Prettier.

Integracija z vašim IDE

Če želite kar najbolje izkoristiti ESLint in Prettier, ju integrirajte v svoj IDE. Večina priljubljenih IDE-jev (npr. VS Code, WebStorm, Sublime Text) ima razširitve ali vtičnike, ki zagotavljajo lintanje in formatiranje v realnem času med tipkanjem. Na primer, VS Code ponuja razširitve za ESLint in Prettier, ki lahko samodejno formatirajo vašo kodo ob shranjevanju. To je ključni korak pri avtomatizaciji kakovosti kode.

Dodajanje npm skript

Dodajte npm skripte v svojo datoteko package.json, da boste lahko preprosto zagnali ESLint in Prettier iz ukazne vrstice:

            "scripts": {
  "lint": "eslint . --ext .js,.jsx",
  "format": "prettier --write .",
  "lint:fix": "eslint . --ext .js,.jsx --fix",
  "format:check": "prettier --check ."
}
            

              
                Copy
              
            
          

Pojasnilo skript:

• lint: Zažene ESLint na vseh datotekah .js in .jsx v projektu.
• format: Zažene Prettier za formatiranje vseh datotek v projektu. Zastavica `--write` pove Prettierju, da neposredno spremeni datoteke.
• lint:fix: Zažene ESLint z zastavico `--fix`, ki samodejno popravi vse popravljive napake lintanja.
• format:check: Zažene Prettier, da preveri, ali so vse datoteke formatirane v skladu s konfiguracijo. To je uporabno za cevovode CI/CD.

Zdaj lahko te skripte zaženete iz ukazne vrstice:

            npm run lint
npm run format
npm run lint:fix
npm run format:check
            

              
                Copy
              
            
          

Ignoriranje datotek

Morda boste želeli izključiti določene datoteke ali imenike iz lintanja in formatiranja (npr. node_modules, mape z gradnjo). Ustvarite datoteki .eslintignore in .prettierignore v korenski mapi vašega projekta, da določite te izključitve. Na primer:

.eslintignore:

            node_modules/
dist/
build/

            

              
                Copy
              
            
          

.prettierignore:

            node_modules/
dist/
build/

            

              
                Copy
              
            
          

Avtomatizacija kakovosti kode s CI/CD

Da bi zagotovili dosledno kakovost kode v celotni razvojni ekipi, integrirajte lintanje in formatiranje v svoj cevovod CI/CD. To bo samodejno preverilo vašo kodo za kršitve sloga in potencialne napake, preden se združi v glavno vejo.

Tukaj je primer, kako integrirati ESLint in Prettier v delovni potek GitHub Actions:

            name: CI

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
    - uses: actions/checkout@v3
    - name: Use Node.js 16
      uses: actions/setup-node@v3
      with:
        node-version: 16
    - name: Install dependencies
      run: npm install
    - name: Run linters
      run: npm run lint
    - name: Run format check
      run: npm run format:check

            

              
                Copy
              
            
          

Ta delovni potek izvaja naslednje korake:

• Prevzame kodo (checkout).
• Nastavi Node.js.
• Namesti odvisnosti.
• Zažene ESLint.
• Zažene Prettier v načinu preverjanja.

Če ESLint ali Prettier zazna kakršne koli napake, bo delovni potek neuspešen, kar bo preprečilo združevanje kode.

Najboljše prakse za lintanje in formatiranje

Tukaj je nekaj najboljših praks, ki jih je treba upoštevati pri implementaciji lintanja in formatiranja:

• Vzpostavite dosleden slog kodiranja: Določite jasen in dosleden vodnik po slogu kodiranja za vaš projekt. To bi moralo zajemati vidike, kot so zamikanje, razmik med vrsticami, konvencije poimenovanja in prakse komentiranja. Razmislite o uporabi splošno sprejetega vodnika po slogu, kot je Airbnb-jev JavaScript Style Guide, kot izhodišče.
• Avtomatizirajte postopek: Integrirajte lintanje in formatiranje v svoj razvojni potek dela in cevovod CI/CD. To bo zagotovilo, da se vsa koda drži uveljavljenih smernic sloga.
• Prilagodite pravila: Prilagodite pravila ESLint in Prettier, da bodo ustrezala specifičnim zahtevam in preferencam vašega projekta. Ne bojte se onemogočiti pravil, ki niso relevantna ali so v nasprotju z vašim slogom kodiranja.
• Uporabite integracijo z urejevalnikom: Integrirajte linterje in formaterje neposredno v svoj IDE za povratne informacije v realnem času. To pomaga zgodaj odkriti napake in dosledno uveljavljati slog.
• Izobražujte ekipo: Zagotovite, da so vsi člani ekipe seznanjeni s pravili lintanja in formatiranja ter razumejo, kako uporabljati orodja. Po potrebi zagotovite usposabljanje in dokumentacijo.
• Redno pregledujte konfiguracijo: Redno pregledujte svoje konfiguracije ESLint in Prettier, da zagotovite, da so še vedno relevantne in učinkovite. Z razvojem projekta boste morda morali prilagoditi pravila, da bodo odražala nove najboljše prakse ali konvencije kodiranja.
• Začnite s privzetimi nastavitvami in postopoma prilagajajte: Začnite s priporočenimi ali privzetimi konfiguracijami za ESLint in Prettier. Postopoma prilagajajte pravila in nastavitve, da se uskladijo s preferencami vaše ekipe in zahtevami projekta.
• Upoštevajte dostopnost: Vključite pravila za lintanje dostopnosti, da zgodaj v razvojnem procesu odkrijete pogoste težave z dostopnostjo. To pomaga zagotoviti, da je vaša aplikacija uporabna za ljudi s posebnimi potrebami.
• Uporabite "commit hooks": Integrirajte lintanje in formatiranje v svoj Git potek dela z uporabo "commit hooks". To bo samodejno preverilo vašo kodo pred vsakim "commitom" in vam preprečilo, da bi oddali kodo, ki krši smernice sloga. Knjižnice, kot sta Husky in lint-staged, lahko pomagajo avtomatizirati ta postopek.
• Tehnični dolg odpravljajte postopoma: Pri uvajanju lintanja in formatiranja v obstoječi projekt tehnični dolg odpravljajte postopoma. Najprej se osredotočite na novo kodo in postopoma preoblikujte obstoječo kodo, da bo skladna s smernicami sloga.

Izzivi in premisleki

Čeprav lintanje in formatiranje ponujata znatne prednosti, obstajajo tudi nekateri izzivi in premisleki, ki jih je treba upoštevati:

• Začetna nastavitev in konfiguracija: Nastavitev ESLint in Prettier je lahko časovno potratna, zlasti pri kompleksnih projektih. Zahteva skrbno konfiguracijo in prilagajanje vašim specifičnim potrebam.
• Krivulja učenja: Razvijalci se bodo morda morali naučiti novih orodij in konvencij kodiranja, kar lahko zahteva čas in trud.
• Potencialni konflikti: ESLint in Prettier se lahko včasih medsebojno spopadata, kar zahteva skrbno konfiguracijo, da se izognete nepričakovanemu vedenju.
• Uveljavljanje: V veliki razvojni ekipi je lahko izziv dosledno uveljavljati pravila lintanja in formatiranja, zlasti v globalno porazdeljenih okoljih. Ključnega pomena so jasna komunikacija, usposabljanje in avtomatizirana preverjanja.
• Prekomerno prilagajanje: Izogibajte se prekomernemu prilagajanju pravil, kar lahko privede do togega in neprilagodljivega sloga kodiranja. Kadar je mogoče, se držite splošno sprejetih najboljših praks in konvencij kodiranja.
• Vpliv na zmogljivost: Lintanje in formatiranje lahko imata rahel vpliv na zmogljivost, zlasti pri velikih projektih. Optimizirajte svojo konfiguracijo in potek dela, da zmanjšate ta vpliv.

Zaključek

Lintanje in formatiranje sta bistveni praksi za ohranjanje visokokakovostne frontend kode, zlasti pri delu z globalno porazdeljenimi ekipami. Z avtomatizacijo uveljavljanja sloga kode in zgodnjim prepoznavanjem potencialnih napak lahko izboljšate berljivost kode, vzdržljivost in sodelovanje. Čeprav je treba upoštevati nekatere izzive, prednosti lintanja in formatiranja daleč presegajo slabosti. Z upoštevanjem najboljših praks, opisanih v tem članku, lahko vzpostavite dosleden slog kodiranja, zmanjšate število napak in izboljšate splošno kakovost vaših frontend aplikacij, ne glede na to, kje se nahajajo člani vaše ekipe.

Vlaganje v kakovost kode je naložba v dolgoročni uspeh vašega projekta in produktivnost vaše razvojne ekipe. Sprejmite lintanje in formatiranje kot del svojega razvojnega poteka dela in izkoristite prednosti čistejše, bolj vzdržljive kodne baze.