de Abhishek Jain

Cum se integrează Prettier cu ESLint și stylelint

sau Cum să nu vă mai faceți griji niciodată despre stilul codului

Cum se integreaza Prettier cu ESLint si stylelint
Fotografie de Teme NordWood pe Unsplash

ESLint și stylelint sunt instrumente cu adevărat uimitoare care vă permit să aplicați tiparele de codificare între echipele dvs. Acest lucru are multe avantaje, cum ar fi emiterea unui cod mai bun și mai consistent, scăparea de diferențele inutile în comiteri (linie nouă, indentare și colab.) Printre multe altele.

Dar, de-a lungul timpului, acest lucru se poate dovedi a fi o problemă în rândul dezvoltatorilor unei echipe, cărora li se pare o povară mentală suplimentară să adauge manual punct și virgulă, linii noi, indentări, etc doar pentru a se conforma regulilor de scame. Aici este un instrument de formatare a codului, cum ar fi Mai frumoasă intră.

Mai frumos poate fi configurat pentru a vă formata automat codul conform unor reguli specificate. Dacă utilizați VSCode, puteți chiar să vă codificați codul de fiecare dată când dați clic pe Salvare (sunt sigur că trebuie să aveți modalități de a configura acest lucru în alți editori, dar nu m-am uitat în el.)

Cu toate acestea, nu doriți să creați un fișier de configurare Prettier nou, deoarece aveți deja toate regulile legate de formatare specificate în ESLint și stylelint fișiere de configurare. Deci, vom avea nevoie de ceva magie pentru asta. ✨

Haideți acum să ne scufundăm într-un pas cu pas al modului de configurare a acestui lucru și, de asemenea, cum să formatați tot codul dvs. existent în conformitate cu regulile de scame. Acest ghid presupune că proiectul dvs. are deja ESLint și stylelint configurate împreună cu .eslintrc și .stylelintrc fișiere.

PARTEA 1: Formatarea bazei de cod existente

Pasul 1

Instalare mai frumos-eslint, care este un instrument care vă formată JavaScript folosind Prettier urmat de eslint --fix. --fix este o caracteristică ESLint care încearcă să remedieze automat unele probleme pentru dvs.

npm install --save-dev prettier-eslint

Acest instrument deduce opțiunile de configurare Prettier echivalente dintre cele existente .eslintrc fişier. Deci, nu ar trebui să creați un nou .prettierrc în majoritatea cazurilor.

Pasul 2

Instalare prettier-eslint-cli. Acesta este instrumentul CLI care vă va ajuta să rulați toate fișierele dvs. prin prettier-eslint simultan.

npm install --save-dev prettier-eslint-cli

Pasul 3

Instalare mai frumoasă-stilistică, care este un instrument care vă formează CSS / SCSS cu Prettier urmat de stylelint —-fix. La fel ca ESLint, --fix este o funcție stylelint care încearcă să remedieze automat unele probleme pentru dvs.

npm install prettier-stylelint --save-dev

Acest instrument de asemenea încearcă să creeze o configurație Prettier bazată pe configurația stylelint.

Rețineți că, spre deosebire de prettier-eslint, nu trebuie să instalați un alt pachet pentru CLI, deoarece acesta este deja inclus în el.

Pasul 4

Scrieți scripturi în interiorul package.json vizând fișierele existente în baza de cod pe care doriți să le rulați prin prettier-eslint și prettier-stylelint.

"scripts": {
  "fix-code": "prettier-eslint --write 'src/**/*.{js,jsx}' ",
  "fix-styles": "prettier-stylelint --write 'src/**/*.{css,scss}' "
}

După cum puteți vedea, vizez toate JS și JSX existente și, respectiv, toate CSS și SCSS existente.

--write flag scrie modificările în loc pentru fișierul formatat în prezent. Deci, fii atent și asigurați-vă că toate fișierele existente sunt sub control sursă și că nu există modificări necomandate.

Pasul 5

Rulați scripturile!

npm run fix-codenpm run fix-styles

Acum, puteți verifica toate aceste modificări noi ca o singură comitere mare (poate chiar de la un utilizator temporar de git, dacă nu doriți să vă poluați propriul istoric git).

Partea 2: Configurarea codului VSC

Acum că baza de cod existentă este formatată, este timpul să vă asigurați că tot codul care este scris de acum înainte este formatat automat.

Pasul 1

Instalați extensiile Prettier, ESLint și stylelint pentru VSCode:

Mai frumos – Formatator de cod – Visual Studio Marketplace
Extensie pentru Visual Studio Code – VS Code plugin pentru mai frumos / mai frumosmarketplace.visualstudio.comESLint – Piața Visual Studio
Extensie pentru Visual Studio Code – integrează JavaScript ESLint în VS Code.marketplace.visualstudio.comstylelint – Visual Studio Marketplace
Extensie pentru Visual Studio Code – CSS modern / SCSS / Less lintermarketplace.visualstudio.com

Pasul 2

Configurați câteva setări VSCode:

"prettier.eslintIntegration": true – îi spune lui Prettier să folosească prettier-eslint în loc de Prettier

"prettier.stylelintIntegration": true – îi spune lui Prettier să folosească prettier-stylelint în loc de Prettier

"eslint.autoFixOnSave": false – nu avem nevoie de ESLint pentru a remedia codul nostru pentru noi direct, deoarece prettier-eslint va rula eslint --fix pentru noi oricum.

"editor.formatOnSave": true – rulează Prettier cu opțiunile de mai sus la fiecare salvare a fișierelor, deci nu trebuie să invocați manual comanda de formatare a VSCode.

În plus, puteți verifica setările de la locul de muncă de mai sus pentru a controla sursa, astfel încât să fie mai ușor pentru ceilalți membri ai echipei să își configureze editorii. Puteți face acest lucru creând un .vscode folder la rădăcina proiectului dvs. și punând toate regulile de mai sus într-un settings.json fişier.

Opțional, puteți spune lui Prettier să ignore formatarea anumitor tipare de fișiere. Pentru a face acest lucru, trebuie doar să adăugați un .prettierignore fișierul la rădăcina proiectului dvs. specificând căile de ignorat. De exemplu:

strings.jsonscripts/*

Si asta e! Nu vă mai faceți griji cu privire la stilul codului?

Acest articol nu este în niciun caz menit să fie un ghid exhaustiv, ci mai degrabă o introducere în ceea ce este posibil cu uimitoarele instrumente menționate aici. Vă recomand să deschideți paginile oficiale GitHub pentru fiecare pentru a afla mai multe despre cum să utilizați aceste instrumente mai eficient pentru fluxul dvs. de lucru specific.

Vă rugăm să scrieți un comentariu mai jos pentru orice ajutor, sugestie etc.

Referințe

https://prettier.io/docs/en/
https://stylelint.io/user-guide/
https://eslint.org/
https://github.com/prettier/prettier-vscode
https://github.com/prettier/prettier-eslint
https://github.com/prettier/prettier-eslint-cli
https://github.com/hugomrdias/prettier-stylelint
https://www.youtube.com/watch?v=YIvjKId9m2c