Frontend Academy · Oppitunti

Prettier- ja ESLint-asetukset

Lisää Prettier automaattista muotoilua varten ja ESLint virheiden havaitsemiseen, määritä molemmat työkalut ja yhdistä ne tallennuksen yhteydessä tapahtuvaan muotoiluun.

Oppitunti 3/413 vaihetta

Prettier- ja ESLint-asetukset on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

Miksi koodityyli kannattaa automatisoida?

Manuaaliset keskustelut koodin muotoilusta tuhlaavat tiimin aikaa. Prettier muotoilee koodin automaattisesti yhdenmukaisella tavalla. ESLint löytää virheitä ja valvoo hyviä käytäntöjä. Yhdessä ne poistavat kokonaisia koodikatselmoinnin huomautusten aihealueita.

Prettierin asentaminen

Asentakaa Prettier kehitysriippuvuutena, luokaa asetustiedosto ja lisätkää package.json-tiedostoon format-skripti. Prettier ei tarvitse toimiakseen asetuksia — oletusarvot ovat järkevät — mutta voitte mukauttaa niitä.

npm install --save-dev prettier

# .prettierrc (optional config)
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80
}

Prettierin integrointi VSCodeen

Asentakaa Prettier - Code Formatter -laajennus. Määrittäkää se sitten oletusmuotoilijaksi ja ottakaa formatOnSave käyttöön asetuksissa. Tämän jälkeen Prettier suoritetaan aina tiedoston tallennuksen yhteydessä.

// .vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

ESLintin asentaminen

Asentakaa ESLint ja alustakaa se komennolla npm init @eslint/config. Ohjattu toiminto auttaa valitsemaan ympäristön (browser/node), moduulijärjestelmän ja TypeScript-tuen. Se luo eslint.config.js-tiedoston.

npm install --save-dev eslint
npx eslint --init

# Or for a flat config:
npm install --save-dev @eslint/js
# creates eslint.config.js

Esimerkki ESLint-konfiguraatiosta

Yksinkertainen ESLintin flat config browserin JavaScript-projektille. Säännöt voivat olla arvoja 'error', 'warn' tai 'off'. Laajentakaa jaettuja konfiguraatioita, kuten @eslint/js recommended, saadaksenne vahvan lähtötason.

// eslint.config.js
import js from '@eslint/js';
export default [
  js.configs.recommended,
  {
    rules: {
      'no-console': 'warn',
      'no-unused-vars': 'error',
      'eqeqeq': 'error'
    }
  }
];

TypeScript ESLint

Lisätkää TypeScript-projekteihin typescript-eslint, jotta löydätte TypeScript-kohtaiset ongelmat: any-tyypin vaarallisen käytön, puuttuvat paluutyypit ja väärin käytetyt Promiset.

npm install --save-dev typescript-eslint

// eslint.config.js
import tseslint from 'typescript-eslint';
export default tseslint.config(
  ...tseslint.configs.recommended
);

Prettier ja ESLint yhdessä

ESLint sisältää muotoilusääntöjä, jotka ovat ristiriidassa Prettierin kanssa. Käyttäkää eslint-config-prettier-pakettia niiden poistamiseen käytöstä, jolloin Prettier huolehtii kaikesta muotoilusta ja ESLint ainoastaan koodin laadusta.

npm install --save-dev eslint-config-prettier

// eslint.config.js — add prettier last:
import prettierConfig from 'eslint-config-prettier';
export default [
  js.configs.recommended,
  prettierConfig  // disables ESLint formatting rules
];

.eslintignore ja .prettierignore

Kertokaa työkaluille, mitkä tiedostot ohitetaan. .eslintignore-tiedosto käyttää gitignore-syntaksia. Yleensä kannattaa ohittaa node_modules, dist ja generoidut tiedostot.

# .eslintignore
node_modules
dist
.next
coverage

npm-skriptit linttaukseen

Lisätkää package.json-tiedostoon lint- ja format-skriptit, jotta CI ja tiimikaverit voivat suorittaa ne yhdenmukaisesti.

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

lint-staged ja husky pre-commit-koukkuihin

Käyttäkää husky- ja lint-staged-työkaluja linttaamaan ja muotoilemaan automaattisesti vain valmistellut tiedostot ennen jokaista git commitia. Näin estätte muotoilemattoman tai rikkinäisen koodin päätymisen repositorioon.

npm install --save-dev husky lint-staged
npx husky init

# package.json:
"lint-staged": {
  "*.{js,ts,tsx}": ["eslint --fix", "prettier --write"],
  "*.{css,json,md}": "prettier --write"
}

EditorConfig yhdenmukaisuuden perustaksi

.editorconfig-tiedosto pakottaa peruseditoriasetukset (sisennyksen tyyli, rivinvaihdot) yhdenmukaisiksi kaikissa editoreissa ja IDE:issä liitännäisistä riippumatta. Lisätkää se Prettierin rinnalle.

# .editorconfig
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = true

Pikatarkistus

Miksi eslint-config-prettier pitäisi lisätä ESLint-konfiguraatioon, jossa käytetään myös Prettieriä?

Vastaa interaktiivisessa oppitunnissa

Kertaus: Prettier ja ESLint

Prettier muotoilee koodin automaattisesti tallennettaessa VSCode-laajennuksen avulla. ESLint löytää virheet ja tyylirikkomukset. Käyttäkää eslint-config-prettieriä ristiriitojen välttämiseksi. Lisätkää lint-staged ja husky valvomaan käytäntöjä ennen commiteja. Yhdenmukaiset työkalut poistavat muotoilukeskustelut ja löytävät virheet ennen niiden julkaisemista.

Aloita maksutta

Opi HTML tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 41
Oppitunnit: 163

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Prettier- ja ESLint-asetukset” ilmainen?

Kyllä – oppitunnin ”Prettier- ja ESLint-asetukset” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Prettier- ja ESLint-asetukset”?

Lisää Prettier automaattista muotoilua varten ja ESLint virheiden havaitsemiseen, määritä molemmat työkalut ja yhdistä ne tallennuksen yhteydessä tapahtuvaan muotoiluun. Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Prettier- ja ESLint-asetukset”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä Frontend Academy-oppitunnilla?

Kyllä. Jokainen Frontend Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

Chrome DevTools: Elements, Console ja Network
VSCode: laajennukset, Emmet ja pikanäppäimet
Prettier- ja ESLint-asetukset
Selainten yhteensopivuus ja caniuse.com

← Takaisin: Frontend Academy