Cum se formatează codul în VS Code

În timpul introducerii comenzilor în VS Code, preocuparea pentru aspectul ordonat al codului poate fi adesea ultimul lucru la care te gândești. Deși formatarea nu este esențială pentru execuția unui program, ea devine un aliat de nădejde în procesul de depanare și identificare a erorilor.

Acest articol își propune să vă ghideze prin procesul de formatare a codului în VS Code, oferind totodată și alte sfaturi utile pentru a menține codul într-o structură clară și organizată.

Cum se formatează codul eficient

VS Code include comenzi integrate care permit alinierea codului la un format standard. Aceste comenzi rapide nu necesită instalarea unor extensii suplimentare și pot fi utilizate oricând. Iată care sunt comenzile rapide:

Pentru utilizatorii de PC

Formatarea întregului document:

  • Deschideți fișierul cu codul pe care doriți să îl formatați.
  • Apăsați combinația de taste „Shift + Alt + F”.
  • Salvați modificările efectuate, accesând meniul „Fișier” din colțul stânga sus și selectând „Salvare” sau apăsând „Ctrl + S”.
  • Formatarea doar a codului selectat:

  • În fișierul cu cod, selectați porțiunea de cod pe care doriți să o formatați.
  • Apăsați „Ctrl + K”.
  • Apăsați „Ctrl + F”.
  • Salvați modificările accesând opțiunea „Salvare” din meniul Fișier sau apăsând combinația de taste „Ctrl + S”.
  • Atenție, dacă apăsați „Ctrl + F” fără a apăsa „Ctrl + K” în prealabil, se va deschide meniul Căutare. În acest caz, închideți meniul făcând clic pe butonul „x” sau apăsând tasta Esc.

    Mutarea liniilor de cod în sus sau în jos:

  • Poziționați cursorul la începutul liniei pe care doriți să o mutați.
  • Mențineți apăsată tasta Alt.
  • Pentru a muta linia în sus, apăsați săgeata în sus; pentru a o muta în jos, apăsați săgeata în jos.
  • Salvați fișierul selectând opțiunea din meniul Fișier sau apăsând combinația de taste „Ctrl + S”.
  • Modificarea indentării unei singure linii:

  • Poziționați cursorul la începutul liniei a cărei indentare doriți să o modificați.
  • Apăsați „Ctrl + ]” pentru a mări indentarea.
  • Apăsați „Ctrl + [“ pentru a micșora indentarea.
  • Salvați modificările din meniul Fișier sau apăsând „Ctrl + S”.
  • Pentru utilizatorii de Mac

    Formatarea întregului document:

  • Deschideți fișierul cu codul pe care doriți să îl formatați.
  • Apăsați „⇧ + ⌥ + F.”
  • Salvați modificările făcând clic pe „Fișier” în colțul din stânga sus, apoi alegând „Salvare” sau apăsând „⌘ + S”.
  • Formatarea doar a codului selectat:

  • Evidențiați porțiunea de cod pe care doriți să o formatați.
  • Apăsați „⌘ + K”.
  • Apăsați „⌘ + F”.
  • Salvați fișierul apăsând „⌘ + S” sau alegând „Salvare” din meniul Fișier din colțul din stânga sus al ferestrei.
  • Rețineți că utilizarea „⌘ + F” fără a apăsa „⌘ + K” în prealabil va deschide doar meniul Căutare. Pentru a închide meniul Căutare, apăsați „x” în partea dreaptă sau apăsați Esc.

    Mutarea liniilor de cod în sus sau în jos:

  • Plasați cursorul la începutul liniei pe care doriți să o editați.
  • Țineți apăsată tasta „⌥”.
  • Pentru a muta o linie în sus, apăsați săgeata în sus. Pentru a o muta în jos, apăsați săgeata în jos.
  • Salvați modificările alegând „Salvare” din meniul Fișier sau apăsând „⌘ + S”.
  • Modificarea indentării unei singure linii:

  • Mutați cursorul la începutul liniei a cărei indentare doriți să o schimbați.
  • Apăsați „⌘ + ]” pentru a mări indentarea.
  • Apăsați „⌘ +[“ pentru a micșora indentarea.
  • Salvați fișierul apăsând „⌘ + S” sau alegând „Salvare” din meniul Fișier din colțul din stânga sus al ferestrei.
  • Formatarea automată a codului la salvare

    VS Code nu include o funcție nativă pentru formatarea automată a documentului la salvare. Această funcționalitate poate fi adăugată prin instalarea unei extensii de formatare, cea mai populară fiind Prettier. Prettier oferă numeroase opțiuni de formatare pentru VS Code. Instalarea acesteia se realizează astfel:

  • Deschideți VS Code.
  • Accesați meniul Extensii, situat în bara laterală din stânga (pictograma cu patru pătrate) sau apăsați „Ctrl + Shift + x” pe PC sau „⌘ + ⇧ + x” pe Mac.
  • În câmpul de căutare din partea superioară a meniului, introduceți Prettier.
  • Faceți clic pe butonul Instalare din colțul din dreapta jos al pictogramei Prettier.
  • Așteptați finalizarea instalării extensiei.
  • Pentru a activa formatarea automată la salvare cu Prettier, este necesară o configurare suplimentară:

  • Deschideți fereastra de setări apăsând „Ctrl + ,” pe PC sau „⌘ + ,” pe Mac.
  • În câmpul de căutare, introduceți formatator. Ar trebui să apară diverse setări de formatare.
  • În setarea Editor: Formatator implicit, asigurați-vă că este selectată extensia Prettier. Dacă nu este un formatator prestabilit sau dacă VS Code utilizează alt formatator, apăsați săgeata drop-down și selectați „Prettier – Code Formatter” din listă (alternativ, poate apărea ca „esbenp.prettier-vscode”).
  • Activați opțiunea „Editor: Format la salvare”.
  • Introduceți „Prettier” în câmpul de căutare al setărilor.
  • Derulați până când găsiți linia „Prettier: Necesită configurare”. Asigurați-vă că este bifată. Această setare previne formatarea automată a documentelor fără un fișier de configurare. Este utilă atunci când analizați cod descărcat care poate avea propriile reguli de formatare, evitând astfel suprascrierea neintenționată a formatărilor.
  • Puteți edita diverse setări Prettier în funcție de preferințele dvs.
  • Deoarece ați configurat Prettier să formateze automat doar în prezența unui fișier de configurare, trebuie să creați unul pentru fiecare proiect. Iată cum:

  • Selectați rădăcina proiectului dvs. din meniul lateral.
  • Faceți clic pe butonul pentru crearea unui nou fișier.
  • Redenumiți acest fișier „.prettierrc”.
  • În interiorul fișierului, introduceți {}.
  • Acum Prettier va formata automat documentul la fiecare salvare.
  • Sfaturi pentru un cod bine organizat

  • Deși indentarea nu este strict necesară pentru funcționarea codului, ea poate facilita depanarea, organizând codul în module mai ușor de gestionat. Structurile de tip If-Then sau cazurile imbricate, de exemplu, devin mult mai clare atunci când fiecare opțiune alternativă este vizual distinctă. Acest aspect devine important în gestionarea erorilor de logică.
  • În cazul modulelor sau a segmentelor scurte de cod, utilizați titluri descriptive în loc de denumiri generice, cum ar fi modulul 1, modulul 2 etc. Această abordare permite o înțelegere mai ușoară a rolului fiecărei porțiuni de cod.
  • Comentariile sunt un instrument de ajutor esențial. Indiferent că includ o descriere rapidă sau o notă personală, ele ajută enorm în procesul de depanare.
  • Concluzie

    Menținerea unui cod bine formatat nu doar că îmbunătățește lizibilitatea, dar facilitează și identificarea erorilor, contribuind la o organizare eficientă a codului. Chiar dacă formatarea nu este esențială pentru execuția codului, capacitatea de a formata fișierele în VS Code reprezintă un avantaj considerabil.

    Cunoașteți și alte modalități de formatare a fișierelor în VS Code? Vă invităm să vă împărtășiți ideile în secțiunea de comentarii de mai jos.