Frontend koda kvalitāte: Lintēšana un formatēšana konsekventai izstrādei

Straujajā frontend izstrādes pasaulē bieži vien prioritāte ir ātra funkcionāla koda piegāde. Tomēr, ignorējot koda kvalitāti, nākotnē var rasties daudz problēmu. Šīs problēmas ietver palielinātas uzturēšanas izmaksas, samazinātu komandas produktivitāti un nomāktu izstrādātāja pieredzi. Augstas kvalitātes frontend koda stūrakmens ir konsekvents stils un labāko prakšu ievērošana, ko var efektīvi panākt, izmantojot lintēšanas un formatēšanas rīkus. Šis raksts sniedz visaptverošu ceļvedi par lintēšanas un formatēšanas izpratni un ieviešanu jūsu frontend projektos, nodrošinot konsekventu un uzturējamu koda bāzi globāli izkliedētās komandās.

Kāpēc frontend koda kvalitāte ir svarīga?

Pirms iedziļināmies lintēšanas un formatēšanas specifikā, apskatīsim, kāpēc frontend koda kvalitāte ir tik būtiska:

• Uzturamība: Tīru, labi formatētu kodu ir vieglāk saprast un modificēt, kas vienkāršo uzturēšanu un samazina risku ieviest kļūdas atjauninājumu laikā. Iedomājieties, ka izstrādātājs Bengalūru, Indijā, viegli saprot kodu, ko rakstījis kolēģis Londonā, Lielbritānijā.
• Lasāmība: Konsekvents kodēšanas stils uzlabo lasāmību, ļaujot izstrādātājiem ātri aptvert koda loģiku un mērķi. Tas ir īpaši svarīgi, apmācot jaunus komandas locekļus vai sadarbojoties projektos dažādās laika joslās un kontinentos.
• Sadarbība: Standartizēts koda stils novērš subjektīvas debates par formatēšanas preferencēm un veicina raitāku sadarbību izstrādes komandās. Tas ir būtiski izkliedētām komandām, kur tiešā saziņa var būt ierobežota.
• Samazināts kļūdu skaits: Linteri var identificēt potenciālās kļūdas un antipaternus pirms izpildlaika, novēršot kļūdas un uzlabojot lietojumprogrammas kopējo stabilitāti. Agrīna vienkāršas sintakses kļūdas atklāšana var ietaupīt stundām ilgu atkļūdošanas laiku.
• Uzlabota veiktspēja: Lai gan ne vienmēr tieši saistīts, koda kvalitātes prakses bieži veicina efektīvāka un optimizētāka koda rakstīšanu, kas noved pie uzlabotas lietojumprogrammas veiktspējas.
• Apmācības efektivitāte: Jauni komandas locekļi var ātri pielāgoties koda bāzei, ja tiek ieviests konsekvents stils. Tas samazina mācīšanās līkni un ļauj viņiem ātrāk sākt sniegt efektīvu ieguldījumu.
• Zināšanu apmaiņa: Standartizēts kods nodrošina labāku koda fragmentu un bibliotēku koplietošanu starp projektiem un komandām.

Kas ir lintēšana un formatēšana?

Lintēšana un formatēšana ir divi atšķirīgi, bet viens otru papildinoši procesi, kas veicina koda kvalitāti:

Lintēšana

Lintēšana ir koda analizēšanas process, lai atrastu potenciālas kļūdas, stila pārkāpumus un aizdomīgas konstrukcijas. Linteri izmanto iepriekš definētus noteikumus, lai identificētu novirzes no noteiktām labākajām praksēm un kodēšanas konvencijām. Tie var atklāt plašu problēmu klāstu, tostarp:

• Sintakses kļūdas
• Nedeklarētus mainīgos
• Neizmantotus mainīgos
• Potenciālas drošības ievainojamības
• Stila pārkāpumus (piemēram, nekonsekventu atkāpi, nosaukumu konvencijas)
• Koda sarežģītības problēmas

Populāri frontend linteri ietver:

• ESLint: Plaši izmantots linteris JavaScript un JSX, kas piedāvā plašu pielāgošanu un spraudņu atbalstu. Tas ir ļoti konfigurējams un var tikt pielāgots dažādiem kodēšanas stiliem.
• Stylelint: Spēcīgs linteris CSS, SCSS un citām stila valodām, kas nodrošina konsekventu stilu un labāko prakšu ievērošanu.
• HTMLHint: Linteris HTML, kas palīdz identificēt strukturālas problēmas un pieejamības problēmas.

Formatēšana

Formatēšana, zināma arī kā koda izskaistināšana, ir process, kurā automātiski tiek pielāgots koda izkārtojums un stils, lai tas atbilstu iepriekš definētam standartam. Formatētāji apstrādā tādus aspektus kā:

• Atkāpes
• Rindstarpas
• Rindu aplaušana
• Pēdiņu stili
• Semikolu lietošana

Populārs frontend formatētājs ir:

• Prettier: Uzskatos balstīts koda formatētājs, kas atbalsta plašu valodu klāstu, ieskaitot JavaScript, TypeScript, CSS, HTML un JSON. Prettier automātiski pārformatē jūsu kodu, lai tas atbilstu tā iepriekš definētajam stilam, novēršot subjektīvas debates par formatēšanu.

ESLint un Prettier iestatīšana Frontend projektam

Apskatīsim ESLint un Prettier iestatīšanas procesu tipiskā frontend projektā. Mēs koncentrēsimies uz JavaScript/React projektu, bet principi attiecas arī uz citiem ietvariem un valodām.

Priekšnosacījumi

• Instalēts Node.js un npm (vai yarn)
• Frontend projekts (piemēram, React aplikācija)

Instalācija

Vispirms instalējiet ESLint, Prettier un nepieciešamos spraudņus kā izstrādes atkarības:

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

              
                Copy
              
            
          

Pakešu skaidrojums:

• eslint: Galvenā ESLint bibliotēka.
• prettier: Prettier koda formatētājs.
• eslint-plugin-react: ESLint noteikumi, kas specifiski React izstrādei.
• eslint-plugin-react-hooks: ESLint noteikumi, kas nodrošina React Hooks labāko prakšu ievērošanu.
• eslint-config-prettier: Atspējo ESLint noteikumus, kas konfliktē ar Prettier.

Konfigurācija

Izveidojiet ESLint konfigurācijas failu (.eslintrc.js vai .eslintrc.json) sava projekta saknes direktorijā. Šeit ir konfigurācijas piemērs:

            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
              
            
          

Šīs konfigurācijas galvenie aspekti:

• env: Definē vidi, kurā kods tiks palaists (pārlūks, Node.js, ES2021).
• extends: Norāda iepriekš definētu konfigurāciju kopu, no kuras mantot.
• eslint:recommended: Iespējo ieteicamo ESLint noteikumu kopu.
• plugin:react/recommended: Iespējo ieteicamos ESLint noteikumus priekš React.
• plugin:react-hooks/recommended: Iespējo ieteicamos ESLint noteikumus priekš React Hooks.
• prettier: Atspējo ESLint noteikumus, kas konfliktē ar Prettier.
• parserOptions: Konfigurē JavaScript parsētāju, ko izmanto ESLint.
• plugins: Norāda izmantojamo spraudņu sarakstu.
• rules: Ļauj pielāgot atsevišķus ESLint noteikumus. Šajā piemērā mēs atspējojam `react/react-in-jsx-scope` noteikumu, jo moderniem React projektiem ne vienmēr ir nepieciešams importēt React katrā komponenta failā.

Izveidojiet Prettier konfigurācijas failu (.prettierrc.js, .prettierrc.json vai .prettierrc.yaml) sava projekta saknes direktorijā. Šeit ir konfigurācijas piemērs:

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

            

              
                Copy
              
            
          

Šī konfigurācija norāda šādas Prettier opcijas:

• semi: Vai pievienot semikolus priekšrakstu beigās (false nozīmē bez semikoliem).
• trailingComma: Vai pievienot noslēdzošos komatus vairāku rindu objektos un masīvos (all tos pievieno, kur iespējams).
• singleQuote: Vai izmantot vienpēdiņas dubultpēdiņu vietā virknēm.
• printWidth: Maksimālais rindas garums, pirms Prettier aplauž kodu.
• tabWidth: Atstarpju skaits, ko izmantot atkāpēm.

Jūs varat pielāgot šīs opcijas atbilstoši savam vēlamajam kodēšanas stilam. Skatiet Prettier dokumentāciju, lai iegūtu pilnu pieejamo opciju sarakstu.

Integrācija ar jūsu IDE

Lai maksimāli izmantotu ESLint un Prettier, integrējiet tos savā IDE. Lielākajai daļai populāro IDE (piemēram, VS Code, WebStorm, Sublime Text) ir paplašinājumi vai spraudņi, kas nodrošina reāllaika lintēšanu un formatēšanu rakstīšanas laikā. Piemēram, VS Code piedāvā paplašinājumus ESLint un Prettier, kas var automātiski formatēt jūsu kodu, saglabājot to. Tas ir galvenais solis koda kvalitātes automatizācijā.

npm skriptu pievienošana

Pievienojiet npm skriptus savam package.json failam, lai viegli palaistu ESLint un Prettier no komandrindas:

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

              
                Copy
              
            
          

Skriptu skaidrojums:

• lint: Palaiž ESLint visiem .js un .jsx failiem projektā.
• format: Palaiž Prettier, lai formatētu visus failus projektā. --write karodziņš norāda Prettier modificēt failus tieši.
• lint:fix: Palaiž ESLint ar --fix karodziņu, kas automātiski labo visas labojamās lintēšanas kļūdas.
• format:check: Palaiž Prettier, lai pārbaudītu, vai visi faili ir formatēti atbilstoši konfigurācijai. Tas ir noderīgi CI/CD cauruļvadiem.

Tagad jūs varat palaist šos skriptus no komandrindas:

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

              
                Copy
              
            
          

Failu ignorēšana

Jūs varētu vēlēties izslēgt noteiktus failus vai direktorijas no lintēšanas un formatēšanas (piemēram, node_modules, build direktorijas). Izveidojiet .eslintignore un .prettierignore failus sava projekta saknes direktorijā, lai norādītu šos izņēmumus. Piemēram:

.eslintignore:

            node_modules/
dist/
build/

            

              
                Copy
              
            
          

.prettierignore:

            node_modules/
dist/
build/

            

              
                Copy
              
            
          

Koda kvalitātes automatizācija ar CI/CD

Lai nodrošinātu konsekventu koda kvalitāti visā jūsu izstrādes komandā, integrējiet lintēšanu un formatēšanu savā CI/CD cauruļvadā. Tas automātiski pārbaudīs jūsu kodu attiecībā uz stila pārkāpumiem un potenciālām kļūdām, pirms tas tiek sapludināts ar galveno zaru.

Šeit ir piemērs, kā integrēt ESLint un Prettier GitHub Actions darbplūsmā:

            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
              
            
          

Šī darbplūsma veic šādas darbības:

• Izgūst kodu (checks out).
• Iestata Node.js.
• Instalē atkarības.
• Palaiž ESLint.
• Palaiž Prettier pārbaudes režīmā.

Ja ESLint vai Prettier atklās kādas kļūdas, darbplūsma neizdosies, neļaujot kodu sapludināt.

Labākās prakses lintēšanai un formatēšanai

Šeit ir dažas labākās prakses, kas jāievēro, ieviešot lintēšanu un formatēšanu:

• Izveidojiet konsekventu kodēšanas stilu: Definējiet skaidru un konsekventu kodēšanas stila ceļvedi savam projektam. Tam būtu jāaptver tādi aspekti kā atkāpes, rindstarpas, nosaukumu konvencijas un komentēšanas prakses. Apsveriet iespēju izmantot plaši pieņemtu stila ceļvedi, piemēram, Airbnb JavaScript stila ceļvedi, kā sākumpunktu.
• Automatizējiet procesu: Integrējiet lintēšanu un formatēšanu savā izstrādes darbplūsmā un CI/CD cauruļvadā. Tas nodrošinās, ka viss kods atbilst noteiktajām stila vadlīnijām.
• Pielāgojiet noteikumus: Pielāgojiet ESLint un Prettier noteikumus atbilstoši jūsu projekta specifiskajām prasībām un preferencēm. Nebaidieties atspējot noteikumus, kas nav relevanti vai kas konfliktē ar jūsu kodēšanas stilu.
• Izmantojiet redaktora integrāciju: Integrējiet linterus un formatētājus tieši savā IDE, lai saņemtu reāllaika atgriezenisko saiti. Tas palīdz agrīni atklāt kļūdas un konsekventi ieviest stilu.
• Izglītojiet komandu: Pārliecinieties, ka visi komandas locekļi ir informēti par lintēšanas un formatēšanas noteikumiem un saprot, kā lietot rīkus. Nodrošiniet apmācību un dokumentāciju pēc nepieciešamības.
• Regulāri pārskatiet konfigurāciju: Periodiski pārskatiet savas ESLint un Prettier konfigurācijas, lai nodrošinātu, ka tās joprojām ir relevantas un efektīvas. Jūsu projektam attīstoties, var būt nepieciešams pielāgot noteikumus, lai atspoguļotu jaunas labākās prakses vai kodēšanas konvencijas.
• Sāciet ar noklusējuma iestatījumiem un pakāpeniski pielāgojiet: Sāciet ar ieteicamajām vai noklusējuma konfigurācijām ESLint un Prettier. Pakāpeniski pielāgojiet noteikumus un iestatījumus, lai tie atbilstu jūsu komandas preferencēm un projekta prasībām.
• Apsveriet pieejamību: Iekļaujiet pieejamības lintēšanas noteikumus, lai agrīni atklātu bieži sastopamas pieejamības problēmas izstrādes procesā. Tas palīdz nodrošināt, ka jūsu lietojumprogramma ir lietojama cilvēkiem ar invaliditāti.
• Izmantojiet commit hooks: Integrējiet lintēšanu un formatēšanu savā Git darbplūsmā, izmantojot commit hooks. Tas automātiski pārbaudīs jūsu kodu pirms katra commit un neļaus jums commitēt kodu, kas pārkāpj stila vadlīnijas. Bibliotēkas, piemēram, Husky un lint-staged, var palīdzēt automatizēt šo procesu.
• Pakāpeniski risiniet tehnisko parādu: Ieviešot lintēšanu un formatēšanu esošā projektā, risiniet tehnisko parādu pakāpeniski. Vispirms koncentrējieties uz jauno kodu un pakāpeniski pārveidojiet esošo kodu, lai tas atbilstu stila vadlīnijām.

Izaicinājumi un apsvērumi

Lai gan lintēšana un formatēšana sniedz ievērojamas priekšrocības, ir arī daži izaicinājumi un apsvērumi, kas jāpatur prātā:

• Sākotnējā iestatīšana un konfigurācija: ESLint un Prettier iestatīšana var būt laikietilpīga, īpaši sarežģītos projektos. Tas prasa rūpīgu konfigurāciju un pielāgošanu, lai atbilstu jūsu specifiskajām vajadzībām.
• Mācīšanās līkne: Izstrādātājiem var būt nepieciešams apgūt jaunus rīkus un kodēšanas konvencijas, kas var prasīt laiku un pūles.
• Potenciālie konflikti: ESLint un Prettier dažreiz var konfliktēt viens ar otru, prasot rūpīgu konfigurāciju, lai izvairītos no neparedzētas uzvedības.
• Ieviešana: Var būt grūti konsekventi ieviest lintēšanas un formatēšanas noteikumus lielā izstrādes komandā, īpaši globāli izkliedētās vidēs. Skaidra komunikācija, apmācība un automatizētas pārbaudes ir būtiskas.
• Pārmērīga pielāgošana: Izvairieties no pārmērīgas noteikumu pielāgošanas, kas var novest pie stingra un neelastīga kodēšanas stila. Cik vien iespējams, pieturieties pie plaši pieņemtām labākajām praksēm un kodēšanas konvencijām.
• Ietekme uz veiktspēju: Lintēšanai un formatēšanai var būt neliela ietekme uz veiktspēju, īpaši lielos projektos. Optimizējiet savu konfigurāciju un darbplūsmu, lai samazinātu šo ietekmi.

Noslēgums

Lintēšana un formatēšana ir būtiskas prakses augstas kvalitātes frontend koda uzturēšanai, īpaši strādājot ar globāli izkliedētām komandām. Automatizējot koda stila ievērošanu un agrīni identificējot potenciālās kļūdas, jūs varat uzlabot koda lasāmību, uzturamību un sadarbību. Lai gan ir daži izaicinājumi, kas jāņem vērā, lintēšanas un formatēšanas priekšrocības ievērojami pārsniedz trūkumus. Ievērojot šajā rakstā izklāstītās labākās prakses, jūs varat izveidot konsekventu kodēšanas stilu, samazināt kļūdu skaitu un uzlabot savu frontend lietojumprogrammu kopējo kvalitāti, neatkarīgi no tā, kur atrodas jūsu komandas locekļi.

Ieguldījums koda kvalitātē ir ieguldījums jūsu projekta ilgtermiņa panākumos un jūsu izstrādes komandas produktivitātē. Pieņemiet lintēšanu un formatēšanu kā daļu no savas izstrādes darbplūsmas un gūstiet labumu no tīrākas, vieglāk uzturamas koda bāzes.