Airbnb-tyyliopas on joukko ohjeita puhtaan ja johdonmukaisen koodin kirjoittamiseen. Se julkaistiin vuonna 2012, ja siitä on sittemmin tullut yksi suosituimmista JavaScript-projektien tyylioppaista.
Se tarjoaa joukon ohjeita johdonmukaisen koodin kirjoittamiseen, jota on helppo ylläpitää käyttämällä erilaisia tyylejä säännöt sisennyksistä, kommenteista, rivin enimmäispituudesta, muuttujien nimeämiskäytännöistä, lainausmerkeistä ja funktiomäärittelyistä. Airbnb-tyylioppaan määrittämiseksi JavaScript-projektissa sinun on käytettävä linting-työkalua, kuten ESLint.
Asenna ESLint
ESLint on avoimen lähdekoodin JavaScript nukkaustyökalu joka auttaa kehittäjiä kirjoittamaan puhdasta koodia etsimällä ja korjaamalla ongelmia. Se voi havaita koodissasi olevat ongelmat, kuten syntaksivirheet, virheelliset parametrit ja määrittelemättömät muuttujat. Kun suoritat ESLint kanssa
- -korjaa -tunnisteen avulla, se tunnistaa ja korjaa automaattisesti kaikki korjattavat ongelmat koodissa, mikä säästää aikaasi.Voit käyttää ESLintiä toteuttamaan tyylioppaita, kuten Airbnb-tyyliopasta.
Aloita suorittamalla seuraava komento päätteessä asentaaksesi ESLint kehittäjäriippuvuutena:
npm install --save-dev eslint eslint-config-airbnb
Alusta sitten ESLint.
npx eslint --init
Sinua kysytään projektistasi. Kun sinua pyydetään:
? Miten haluaisit käyttää EsLintiä?
Valitse tämä vaihtoehto:
> Tarkistaaksesi syntaksin, etsi ongelmia ja pakota koodityyli
Vastaa seuraaviin kysymyksiin projektisi mukaisesti, kunnes kohtaat seuraavan kehotteen.
? Miten haluaisit määritellä tyylin projektillesi?
Vastaa sitten seuraavasti.
> Käytä suosittua tyyliopasta
Valitse seuraavaa kehotetta varten Airbnb-tyyliopas.
? Mitä tyyliopasta haluat seurata?
> Airbnb:
Asenna lopuksi tarvittavat riippuvuudet valitsemalla "Kyllä" seuraavassa kehotteessa.
Kun asennus on valmis, sinulla pitäisi olla a .eslintsrc.json tiedosto kansiosi juureen.
Airbnb-tyylioppaan mukauttaminen
Airbnb-tyyliopas mahdollistaa räätälöinnin. Voit lisätä lisäsääntöjä tai ohittaa olemassa olevat säännöt .eslintsrc.json asetustiedosto.
Jos esimerkiksi haluat sallia enintään 80 merkkiä rivillä, voit lisätä tämän säännön sääntöosioon.
{
"pidentää": [
"plugin: reagoi/suositellaan",
"airbnb"
],
"säännöt": {
"max-len": ["virhe", { "koodi": 80 }]
}
}Suoritetaan ESLint paketissa package.json
Lisää komentosarja tiedostoon package.json tiedosto ESLint-ajoa varten.
"käsikirjoitukset": {
"nukka": "eslint"
}
Suorita lint-skripti tarkistaaksesi mahdolliset lintointivirheet suorittamalla tämän komennon.
npm juoksu nukkaa
Voit myös lisätä komentosarjan koodin ongelmien korjaamiseksi käyttämällä --korjata lippu.
"käsikirjoitukset": {
"nukka": "eslint",
"lint: korjaa": "npm run lint -- --fix"
},
Juoksemassa npm run lint: korjaa terminaalissa korjaa automaattisesti kaikki ongelmat, jotka linteri voi korjata.
Ota Linting käyttöön Save in VS Codessa
Komentosarjan suorittaminen aina, kun haluat nukkaa koodia, voi olla tylsää. Noudata alla olevia ohjeita ottaaksesi lintuoinnin käyttöön tallennuksen yhteydessä VS Codessa.
- Siirry "Laajennukset" -välilehteen VS Code -ikkunan vasemmalla puolella.
- Etsi ESLint laajennus ja asenna se.
- Kun laajennus on asennettu, avaa VS-koodin asetukset (Tiedosto > Asetukset > Asetukset tai painamalla Ctrl +,).
- Etsi asetuseditorissa "kooditoiminnot tallennuksen yhteydessä".
- Napsauta "Edit in settings.json" ja lisää seuraavat asetukset tiedostoon settings.json tiedosto.
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": totta
},
"eslint.validate": ["javascript"],
"eslint.run": "onSave",
}
Näin ESLint-laajennus voi korjata koodisi automaattisesti, kun tallennat.
Tyylioppaan käytön edut
Airbnb-tyylioppaan kaltaisen tyylioppaan käytön tärkein etu on, että se auttaa ylläpitämään johdonmukaista koodipohjaa. Tämä on hyödyllistä tiimissä, koska kehittäjät voivat ymmärtää koodikannan ja osallistua siihen helposti. Se auttaa myös sinua noudattamaan parhaita käytäntöjä ja välttämään yleisiä koodausvirheitä.
