Frontendi koodi kvaliteet: Lintimine ja vormindamine järjepidevaks arenduseks

Frontendi arenduse kiire tempoga maailmas on sageli prioriteediks funktsionaalse koodi kiire tarnimine. Kuid koodi kvaliteedi unarusse jätmine võib hiljem kaasa tuua mitmeid probleeme. Nende probleemide hulka kuuluvad suurenenud hoolduskulud, vähenenud meeskonna tootlikkus ja masendav arendaja kogemus. Kvaliteetse frontendi koodi nurgakiviks on järjepidev stiil ja parimate tavade järgimine, mida saab tõhusalt saavutada lintimis- ja vormindamistööriistade abil. See artikkel pakub põhjaliku juhendi lintimise ja vormindamise mõistmiseks ja rakendamiseks oma frontendi projektides, tagades järjepideva ja hooldatava koodibaasi globaalselt hajutatud meeskondades.

Miks on Frontendi koodi kvaliteet oluline?

Enne lintimise ja vormindamise üksikasjadesse sukeldumist uurime, miks on frontendi koodi kvaliteet nii oluline:

• Hooldatavus: Puhast, hästi vormindatud koodi on lihtsam mõista ja muuta, lihtsustades hooldust ja vähendades vigade tekkimise ohtu värskenduste ajal. Kujutage ette, et arendaja Indias Bangalore'is mõistab kergesti Londonis, Suurbritannias asuva kolleegi kirjutatud koodi.
• Loetavus: Järjepidev kodeerimisstiil parandab loetavust, muutes arendajatel lihtsamaks koodi loogika ja eesmärgi kiire mõistmine. See on eriti oluline uute meeskonnaliikmete kaasamise või projektide kallal koostöö tegemisel üle ajavööndite ja kontinentide.
• Koostöö: Standardiseeritud koodistiil kõrvaldab subjektiivsed vaidlused vormindamise eelistuste üle ja soodustab sujuvamat koostööd arendusmeeskondades. See on ülioluline hajutatud meeskondade jaoks, kus silmast silma suhtlus võib olla piiratud.
• Vähendatud vead: Linterid saavad tuvastada potentsiaalseid vigu ja anti-mustreid enne käivitamist, vältides vigu ja parandades rakenduse üldist stabiilsust. Lihtsa süntaksivea varajane tabamine võib säästa tunde silumisaega.
• Parem jõudlus: Kuigi see pole alati otseselt seotud, julgustavad koodi kvaliteedi tavad sageli tõhusama ja optimeeritud koodi kirjutamist, mis viib rakenduse jõudluse paranemiseni.
• Kaasamistõhusus: Uued meeskonnaliikmed saavad kiiresti koodibaasiga kohaneda, kui jõustatakse järjepidev stiil. See vähendab õppimiskõverat ja võimaldab neil varem tõhusalt kaasa aidata.
• Teadmiste jagamine: Standardiseeritud kood võimaldab koodilõikude ja teekide paremat jagamist projektide ja meeskondade vahel.

Mis on Lintimine ja Vormindamine?

Lintimine ja vormindamine on kaks erinevat, kuid üksteist täiendavat protsessi, mis aitavad kaasa koodi kvaliteedile:

Lintimine

Lintimine on koodi analüüsimise protsess potentsiaalsete vigade, stiilirikkumiste ja kahtlaste konstruktsioonide suhtes. Linterid kasutavad eelmääratletud reegleid, et tuvastada kõrvalekaldeid väljakujunenud parimatest tavadest ja kodeerimiskonventsioonidest. Nad suudavad tuvastada mitmesuguseid probleeme, sealhulgas:

• Süntaksivead
• Deklareerimata muutujad
• Kasutamata muutujad
• Potentsiaalsed turvaaugud
• Stiilirikkumised (nt ebaühtlane taane, nimetamiskonventsioonid)
• Koodi keerukuse probleemid

Populaarsed frontendi linterid on:

• ESLint: Laialdaselt kasutatav linter JavaScripti ja JSX jaoks, pakkudes ulatuslikku kohandamist ja pistikprogrammide tuge. See on väga konfigureeritav ja seda saab kohandada erinevate kodeerimisstiilidega.
• Stylelint: Võimas linter CSS-i, SCSS-i ja muude stiilikeelte jaoks, tagades järjepideva stiili ja parimate tavade järgimise.
• HTMLHint: HTML-i linter, mis aitab tuvastada struktuuriprobleeme ja juurdepääsetavuse probleeme.

Vormindamine

Vormindamine, tuntud ka kui koodi kaunistamine, on koodi paigutuse ja stiili automaatse reguleerimise protsess, et see vastaks eelmääratletud standardile. Vormindajad käsitlevad selliseid aspekte nagu:

• Taane
• Reavahe
• Rea murdmine
• Tsitaatide stiilid
• Semikoolonite kasutamine

Populaarne frontendi vormindaja on:

• Prettier: Arvamusel põhinev koodivormindaja, mis toetab paljusid keeli, sealhulgas JavaScript, TypeScript, CSS, HTML ja JSON. Prettier vormindab teie koodi automaatselt, et see vastaks oma eelmääratletud stiilile, kõrvaldades subjektiivsed vormindamisvaidlused.

ESLinti ja Prettieri seadistamine Frontendi projekti jaoks

Vaatame läbi ESLinti ja Prettieri seadistamise protsessi tüüpilises frontendi projektis. Keskendume JavaScripti/Reakti projektile, kuid põhimõtted kehtivad ka teiste raamistike ja keelte puhul.

Eeltingimused

• Node.js ja npm (või yarn) on installitud
• Frontendi projekt (nt Reakti rakendus)

Installimine

Esmalt installige ESLint, Prettier ja vajalikud pistikprogrammid arendussõltuvustena:

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

              
                Copy
              
            
          

Pakettide selgitus:

• eslint: ESLinti tuumteek.
• prettier: Prettieri koodivormindaja.
• eslint-plugin-react: ESLinti reeglid, mis on spetsiifilised Reakti arendusele.
• eslint-plugin-react-hooks: ESLinti reeglid Reakti Hooksi parimate tavade jõustamiseks.
• eslint-config-prettier: Keelab ESLinti reeglid, mis on Prettieriga vastuolus.

Konfigureerimine

Looge ESLinti konfiguratsioonifail (.eslintrc.js või .eslintrc.json) oma projekti juurkataloogis. Siin on näidiskonfiguratsioon:

            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
              
            
          

Selle konfiguratsiooni peamised aspektid:

• env: Määrab keskkonna, milles kood töötab (brauser, Node.js, ES2021).
• extends: Määrab eelmääratletud konfiguratsioonide komplekti, millest pärida.
• eslint:recommended: Võimaldab soovitatud ESLinti reeglite komplekti.
• plugin:react/recommended: Võimaldab soovitatud ESLinti reegleid Reakti jaoks.
• plugin:react-hooks/recommended: Võimaldab soovitatud ESLinti reegleid Reakti Hookside jaoks.
• prettier: Keelab ESLinti reeglid, mis on Prettieriga vastuolus.
• parserOptions: Konfigureerib ESLinti poolt kasutatava JavaScripti parseri.
• plugins: Määrab kasutatavate pistikprogrammide loendi.
• rules: Võimaldab kohandada individuaalseid ESLinti reegleid. Selles näites keelame reegli `react/react-in-jsx-scope`, kuna kaasaegsed Reakti projektid ei vaja alati Reakti importimist igas komponendifailis.

Looge Prettieri konfiguratsioonifail (.prettierrc.js, .prettierrc.json või .prettierrc.yaml) oma projekti juurkataloogis. Siin on näidiskonfiguratsioon:

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

            

              
                Copy
              
            
          

See konfiguratsioon määrab järgmised Prettieri valikud:

• semi: Kas lisada semikoolonid lausete lõppu (false tähendab, et semikooloneid pole).
• trailingComma: Kas lisada lõpus komasid mitmerealistesse objektidesse ja massiividesse (all lisab need, kus võimalik).
• singleQuote: Kas kasutada stringide jaoks ühekordseid jutumärke topeltjutumärkide asemel.
• printWidth: Maksimaalne rea pikkus, enne kui Prettier koodi ümber pakib.
• tabWidth: Tühikute arv, mida taande jaoks kasutada.

Saate neid valikuid kohandada, et need vastaksid teie eelistatud kodeerimisstiilile. Täieliku saadaolevate valikute loendi leiate Prettieri dokumentatsioonist.

Integreerimine oma IDE-ga

ESLintist ja Prettierist maksimumi saamiseks integreerige need oma IDE-ga. Enamikul populaarsetel IDE-del (nt VS Code, WebStorm, Sublime Text) on laiendused või pistikprogrammid, mis pakuvad reaalajas lintimist ja vormindamist tippimise ajal. Näiteks pakub VS Code ESLinti ja Prettieri laiendusi, mis saavad teie koodi salvestamisel automaatselt vormindada. See on koodi kvaliteedi automatiseerimise peamine samm.

Npm-skriptide lisamine

Lisage npm-skriptid oma faili package.json, et ESLinti ja Prettieri oleks lihtne käsurealt käivitada:

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

              
                Copy
              
            
          

Skriptide selgitus:

• lint: Käivitab ESLinti kõigil projekti failidel .js ja .jsx.
• format: Käivitab Prettieri kõigi projektis olevate failide vormindamiseks. Lipp `--write` käsib Prettieril faile otse muuta.
• lint:fix: Käivitab ESLinti lipuga `--fix`, mis parandab automaatselt kõik parandatavad lintimisvead.
• format:check: Käivitab Prettieri, et kontrollida, kas kõik failid on vormindatud vastavalt konfiguratsioonile. See on kasulik CI/CD torujuhtmete jaoks.

Nüüd saate neid skripte käsurealt käivitada:

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

              
                Copy
              
            
          

Failide ignoreerimine

Võib-olla soovite teatud faile või katalooge lintimisest ja vormindamisest välja jätta (nt node_modules, build kataloogid). Looge oma projekti juurkataloogis failid .eslintignore ja .prettierignore, et neid erandeid määrata. Näiteks:

.eslintignore:

            node_modules/
dist/
build/

            

              
                Copy
              
            
          

.prettierignore:

            node_modules/
dist/
build/

            

              
                Copy
              
            
          

Koodi kvaliteedi automatiseerimine CI/CD abil

Koodi järjepideva kvaliteedi tagamiseks kogu oma arendusmeeskonnas integreerige lintimine ja vormindamine oma CI/CD torujuhtmesse. See kontrollib automaatselt teie koodi stiilirikkumiste ja potentsiaalsete vigade suhtes, enne kui see põhiversiooniga ühendatakse.

Siin on näide, kuidas integreerida ESLint ja Prettier GitHub Actions töövoogu:

            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
              
            
          

See töövoog teostab järgmised sammud:

• Võtab koodi välja.
• Seadistab Node.js.
• Installib sõltuvused.
• Käivitab ESLinti.
• Käivitab Prettieri kontrollrežiimis.

Kui ESLint või Prettier tuvastab vigu, siis töövoog ebaõnnestub, takistades koodi ühendamist.

Lintimise ja vormindamise parimad tavad

Siin on mõned parimad tavad, mida lintimise ja vormindamise rakendamisel järgida:

• Looge järjepidev kodeerimisstiil: Määratlege oma projekti jaoks selge ja järjepidev kodeerimisstiili juhend. See peaks hõlmama selliseid aspekte nagu taane, reavahe, nimetamiskonventsioonid ja kommenteerimistavad. Kaaluge laialdaselt kasutatava stiilijuhendi, näiteks Airbnb JavaScripti stiilijuhendi kasutamist lähtepunktina.
• Automatiseerige protsess: Integreerige lintimine ja vormindamine oma arenduse töövoogu ja CI/CD torujuhtmesse. See tagab, et kogu kood järgib väljakujunenud stiilijuhiseid.
• Kohandage reegleid: Kohandage ESLinti ja Prettieri reegleid, et need vastaksid teie projekti konkreetsetele nõuetele ja eelistustele. Ärge kartke keelata reegleid, mis ei ole asjakohased või mis on vastuolus teie kodeerimisstiiliga.
• Kasutage redaktori integratsiooni: Integreerige linterid ja vormindajad otse oma IDE-sse, et saada reaalajas tagasisidet. See aitab varakult vigu tabada ja stiili järjepidevalt jõustada.
• Harige meeskonda: Veenduge, et kõik meeskonnaliikmed on teadlikud lintimis- ja vormindamisreeglitest ja mõistavad, kuidas tööriistu kasutada. Vajadusel pakkuge koolitust ja dokumentatsiooni.
• Vaadake konfiguratsiooni regulaarselt üle: Vaadake perioodiliselt üle oma ESLinti ja Prettieri konfiguratsioone, et tagada nende asjakohasus ja tõhusus. Kui teie projekt areneb, peate võib-olla reegleid kohandama, et kajastada uusi parimaid tavasid või kodeerimiskonventsioone.
• Alustage vaikeseadetest ja kohandage järk-järgult: Alustage ESLinti ja Prettieri soovitatud või vaikeseadetest. Kohandage reegleid ja sätteid järk-järgult, et need vastaksid teie meeskonna eelistustele ja projekti nõuetele.
• Arvestage juurdepääsetavusega: Lisage juurdepääsetavuse lintimisreeglid, et tabada levinud juurdepääsetavuse probleeme arendusprotsessi alguses. See aitab tagada, et teie rakendus on kasutatav puuetega inimestele.
• Kasutage commit-konkse: Integreerige lintimine ja vormindamine oma Giti töövoogu commit-konksude abil. See kontrollib automaatselt teie koodi enne iga commit'i ja takistab teil stiilijuhiseid rikkuva koodi commit'imist. Raamatukogud nagu Husky ja lint-staged võivad aidata seda protsessi automatiseerida.
• Tegelege tehnilise võlaga järk-järgult: Lintimise ja vormindamise juurutamisel olemasolevas projektis tegelege tehnilise võlaga järk-järgult. Keskenduge esmalt uuele koodile ja muutke olemasolevat koodi järk-järgult, et see vastaks stiilijuhistele.

Väljakutsed ja kaalutlused

Kuigi lintimine ja vormindamine pakuvad märkimisväärset kasu, tuleb silmas pidada ka mõningaid väljakutseid ja kaalutlusi:

• Esialgne seadistamine ja konfigureerimine: ESLinti ja Prettieri seadistamine võib olla aeganõudev, eriti keerukate projektide puhul. See nõuab hoolikat konfigureerimist ja kohandamist, et see vastaks teie konkreetsetele vajadustele.
• Õppimiskõver: Arendajad võivad vajada uute tööriistade ja kodeerimiskonventsioonide õppimist, mis võib võtta aega ja vaeva.
• Potentsiaalsed konfliktid: ESLint ja Prettier võivad mõnikord üksteisega vastuolus olla, nõudes ootamatu käitumise vältimiseks hoolikat konfigureerimist.
• Jõustamine: Lintimis- ja vormindamisreeglite järjepidev jõustamine võib olla keeruline suures arendusmeeskonnas, eriti globaalselt hajutatud keskkondades. Oluline on selge suhtlus, koolitus ja automatiseeritud kontrollid.
• Ülekohandamine: Vältige reeglite ülekohandamist, mis võib viia jäiga ja paindumatu kodeerimisstiilini. Järgige võimaluse korral laialdaselt aktsepteeritud parimaid tavasid ja kodeerimiskonventsioone.
• Jõudluse mõju: Lintimine ja vormindamine võivad avaldada kerget mõju jõudlusele, eriti suurtes projektides. Optimeerige oma konfiguratsiooni ja töövoogu, et seda mõju minimeerida.

Kokkuvõte

Lintimine ja vormindamine on olulised tavad kvaliteetse frontendi koodi säilitamiseks, eriti kui töötate globaalselt hajutatud meeskondadega. Automatiseerides koodistiili jõustamise ja tuvastades potentsiaalsed vead varakult, saate parandada koodi loetavust, hooldatavust ja koostööd. Kuigi tuleb arvestada mõningate väljakutsetega, kaaluvad lintimise ja vormindamise eelised kaugelt üles puudused. Järgides selles artiklis toodud parimaid tavasid, saate luua järjepideva kodeerimisstiili, vähendada vigu ja parandada oma frontendi rakenduste üldist kvaliteeti, olenemata sellest, kus teie meeskonnaliikmed asuvad.

Koodi kvaliteeti investeerimine on investeering teie projekti pikaajalisse edukusse ja teie arendusmeeskonna tootlikkusesse. Võtke lintimine ja vormindamine omaks osana oma arenduse töövoost ja nautige puhtama ja hooldatavama koodibaasi eeliseid.