Editare de bază

Visual Studio Code este în primul rând un editor și include caracteristicile de care aveți nevoie pentru o editare foarte productivă a codului sursă. Acest subiect vă prezintă elementele de bază ale editorului și vă ajută să vă mișcați cu codul dumneavoastră.

Scurtări de la tastatură

Puterea de a vă ține mâinile pe tastatură atunci când scrieți cod este crucială pentru o productivitate ridicată. VS Code dispune de un set bogat de comenzi rapide de la tastatură implicite, permițându-vă, de asemenea, să le personalizați.

• Keyboard Shortcuts Reference – Învățați cele mai frecvent utilizate și populare comenzi rapide de la tastatură descărcând fișa de referință.
• Instalați o extensie Keymap – Utilizați comenzile rapide de la tastatură ale vechiului dumneavoastră editor (cum ar fi Sublime Text, Atom și Vim) în VS Code prin instalarea unei extensii Keymap.
• Personalizați comenzile rapide de la tastatură – Modificați comenzile rapide de la tastatură implicite pentru a se potrivi stilului dumneavoastră.

Selecții multiple (multi-cursor)

VS Code suportă cursoare multiple pentru editări simultane rapide. Puteți adăuga cursoare secundare (redate mai subțiri) cu Alt+Click. Fiecare cursor funcționează independent în funcție de contextul în care se află. O modalitate obișnuită de a adăuga mai mulți cursoare este cu ⌥⌘↓ (Windows Ctrl+Alt+Down, Linux Shift+Alt+Down) sau ⌥⌘ (Windows Ctrl+Alt+Up, Linux Shift+Alt+Up) care inserează cursoare sub sau deasupra.

Nota: Driverul plăcii dvs. grafice (de exemplu NVIDIA) ar putea suprascrie aceste comenzi rapide implicite.

⌘D (Windows, Linux Ctrl+D) selectează cuvântul din dreptul cursorului sau următoarea apariție a selecției curente.

Tip: De asemenea, puteți adăuga mai mulți cursori cu ⇧⌘L (Windows, Linux Ctrl+Shift+L), care va adăuga o selecție la fiecare apariție a textului selectat curent.

Modificator de cursori multipli

Dacă doriți să schimbați tasta modificatoare pentru aplicarea mai multor cursoare în Cmd+Clic pe macOS și Ctrl+Clic pe Windows și Linux, puteți face acest lucru cu setarea editor.multiCursorModifier. Acest lucru le permite utilizatorilor care vin de la alte editoare, cum ar fi Sublime Text sau Atom, să continue să folosească modificatorul de tastatură cu care sunt familiarizați.

Setarea poate fi setată astfel:

• ctrlCmd – Se mapează la Ctrl pe Windows și Cmd pe macOS.
• alt – Setarea implicită existentă Alt.

Există, de asemenea, o opțiune de meniu Use Ctrl+Click for Multi-Cursor în meniul Selection pentru a comuta rapid această setare.

Gesturile Go To Definition și Open Link vor respecta, de asemenea, această setare și se vor adapta astfel încât să nu intre în conflict. De exemplu, atunci când setarea este ctrlCmd, cursorii multipli pot fi adăugați cu Ctrl/Cmd+Click, iar deschiderea legăturilor sau trecerea la definiție poate fi invocată cu Alt+Click.

Reducerea/extinderea selecției

Reduceți sau extindeți rapid selecția curentă. Declanșați-o cu ⌃⇧⌘← (Windows, Linux Shift+Alt+Stânga) și ⌃⇧⌘→ (Windows, Linux Shift+Alt+Dreapta).

Iată un exemplu de extindere a selecției cu ⌃⇧⌘→ (Windows, Linux Shift+Alt+Dreapta):

Selecție de coloană (cutie)

Puneți cursorul într-un colț și apoi țineți apăsat Shift+Alt în timp ce trageți spre colțul opus:

Nota: Acest lucru se schimbă în Shift+Ctrl/Cmd atunci când se utilizează Ctrl/Cmd ca modificator multi-cursor.

Există, de asemenea, legături implicite de taste pentru selectarea coloanelor pe macOS și Windows, dar nu și pe Linux.

Key	Command	Command ID
⇧⌥⌘↓ (Windows Ctrl+Shift+Alt+Down, Linux )		Column Select Down	cursorColumnSelectDown
⇧⌥⌘ (Windows Ctrl+Shift+Alt+Up, Linux )		Column Select Up	cursorColumnSelectUp
⇧⌥⌘← (Windows Ctrl+Shift+Alt+Stânga, Linux )		Column Select Left	cursorColumnSelectLeft
⇧⌥⌘→ (Windows Ctrl+Shift+Alt+Right, Linux )		Column Select Right	cursorColumnSelectRight
⇧⌥⌘PageDown (Windows Ctrl+Shift+Alt+PageDown, Linux )		Column Select Page Down	cursorColumnSelectPageDown
⇧⌥⌘PageUp (Windows Ctrl+Shift+Alt+PageUp, Linux )		Column Select Page Up	cursorColumnSelectPageUp

Dacă doriți, puteți edita keybindings.json pentru a le lega la ceva mai familiar.

Mod de selectare a coloanelor

Setarea utilizatorului Editor: Column Selection controlează această caracteristică. Odată ce acest mod este introdus, așa cum este indicat în bara de stare, gesturile mouse-ului și tastele săgeată vor crea în mod implicit o selecție de coloană. Această comutare globală este, de asemenea, accesibilă prin intermediul elementului de meniu Selection > Column Selection Mode. În plus, se poate, de asemenea, dezactiva modul Selecție coloană din bara de stare.

Salvare / Salvare automată

În mod implicit, VS Code necesită o acțiune explicită pentru a vă salva modificările pe disc, ⌘S (Windows, Linux Ctrl+S).

Cu toate acestea, este ușor de activat Auto Save, care va salva modificările după o întârziere configurată sau atunci când focalizarea părăsește editorul. Cu această opțiune activată, nu este nevoie să salvați în mod explicit fișierul. Cel mai simplu mod de a activa Auto Save este cu comutatorul File > Auto Save care activează și dezactivează salvarea după o întârziere.

Pentru mai mult control asupra Auto Save, deschideți setările User sau Workspace și găsiți setările asociate:

• files.autoSave: Poate avea valorile:
  • off – pentru a dezactiva salvarea automată.
  • afterDelay – pentru a salva fișierele după o întârziere configurată (implicit 1000 ms).
  • onFocusChange – pentru a salva fișierele atunci când focusul iese din editorul fișierului murdar.
  • onWindowChange – pentru a salva fișierele atunci când focusul iese din fereastra VS Code.
• : Configurează întârzierea în milisecunde atunci când files.autoSave este configurat la afterDelay. Valoarea implicită este 1000 ms.

Hot Exit

VS Code își va aminti în mod implicit modificările nesalvate la fișiere atunci când ieșiți. Hot exit este declanșat atunci când aplicația este închisă prin File > Exit (Cod > Quit pe macOS) sau când ultima fereastră este închisă.

Puteți configura hot exit prin setarea files.hotExit la următoarele valori:

• "off": Dezactivați ieșirea la cald.
• "onExit": Ieșirea la cald va fi declanșată la închiderea aplicației, adică la închiderea ultimei ferestre pe Windows/Linux sau la declanșarea comenzii workbench.action.quit (din paletă de comenzi, comandă rapidă de la tastatură sau meniu). Toate ferestrele fără foldere deschise vor fi restaurate la următoarea lansare.
• "onExitAndWindowClose": Hot exit va fi declanșat atunci când aplicația este închisă, adică atunci când ultima fereastră este închisă pe Windows/Linux sau atunci când este declanșată comanda workbench.action.quit (din Command Palette, comandă rapidă de la tastatură sau meniu) și, de asemenea, pentru orice fereastră cu un folder deschis, indiferent dacă este ultima fereastră. Toate ferestrele fără dosare deschise vor fi restaurate la următoarea lansare. Pentru a restabili ferestrele cu dosare așa cum erau înainte de închidere, setați window.restoreWindows la all.

În cazul în care se întâmplă ca ceva să meargă prost cu ieșirea la cald, toate copiile de rezervă sunt stocate în următoarele dosare pentru locațiile de instalare standard:

• Windows %APPDATA%\Code\Backups
• macOS $HOME/Library/Application Support/Code/Backups
• Linux $HOME/.config/Code/Backups

Find and Replace

VS Code vă permite să găsiți rapid textul și să îl înlocuiți în fișierul deschis în acel moment. Apăsați ⌘F (Windows, Linux Ctrl+F) pentru a deschide Widgetul de căutare în editor, rezultatele căutării vor fi evidențiate în editor, în rigla de prezentare generală și în minimap.

Dacă există mai mult de un rezultat potrivit în fișierul deschis curent, puteți apăsa Enter și ⇧Enter (Windows, Linux Shift+Enter) pentru a naviga la rezultatul următor sau anterior atunci când caseta de introducere a găsirii este focalizată.

Seed Search String From Selection

Când Widgetul de căutare este deschis, acesta va introduce automat textul selectat în editor în caseta de introducere a căutării. Dacă selecția este goală, cuvântul de sub cursor va fi inserat în caseta de introducere în locul acestuia.

Această caracteristică poate fi dezactivată prin setarea editor.find.seedSearchStringFromSelection la false.

Find In Selection

Din mod implicit, operațiile de căutare sunt executate pe întregul fișier din editor. De asemenea, ele pot fi executate pe textul selectat. Puteți activa această caracteristică făcând clic pe pictograma hamburger de pe Widgetul de căutare.

Dacă doriți ca acesta să fie comportamentul implicit al Widgetului de căutare, puteți seta editor.find.autoFindInSelection la always, sau la multiline, dacă doriți ca operațiunea să fie executată pe textul selectat numai atunci când sunt selectate mai multe linii de conținut.

Opțiuni avansate de căutare și înlocuire

În plus față de căutarea și înlocuirea cu text simplu, Widgetul de căutare are, de asemenea, trei opțiuni de căutare avansată:

• Match Case
• Match Whole Word
• Regular Expression

Căsuța de introducere a înlocuirii suportă păstrarea majusculelor și minusculelor, o puteți activa prin apăsarea butonului Preserve Case (AB).

Suportul pentru mai multe linii și redimensionarea widgetului de căutare

Puteți căuta text pe mai multe linii prin lipirea textului în caseta de intrare Find și în caseta de intrare Replace. Prin apăsarea Ctrl+Enter se inserează o nouă linie în caseta de intrare.

În timpul căutării unui text lung, dimensiunea implicită a Widgetului de căutare poate fi prea mică. Puteți să glisați fâșia din stânga pentru a mări Find Widget sau să faceți dublu clic pe fâșia din stânga pentru a-l maximiza sau a-l micșora la dimensiunea implicită.

Cercetare în toate fișierele

VS Code vă permite să căutați rapid în toate fișierele din dosarul deschis în acel moment. Apăsați ⇧⌘F (Windows, Linux Ctrl+Shift+F) și introduceți termenul de căutare. Rezultatele căutării sunt grupate în fișiere care conțin termenul de căutare, cu o indicație a rezultatelor din fiecare fișier și locația acestuia. Extindeți un fișier pentru a vedea o previzualizare a tuturor rezultatelor din acel fișier. Apoi, dați un singur clic pe unul dintre rezultate pentru a-l vizualiza în editor.

Tip: Acceptăm căutarea cu expresii regulate și în caseta de căutare.

Puteți configura opțiunile avansate de căutare făcând clic pe elipsis (Toggle Search Details) sub caseta de căutare din dreapta (sau apăsați ⇧⌘J (Windows, Linux Ctrl+Shift+J)). Acest lucru va afișa câmpuri suplimentare pentru a configura căutarea.

Opțiuni de căutare avansată

În cele două căsuțe de introducere de sub caseta de căutare, puteți introduce modele de inclus sau exclus din căutare. Dacă introduceți example, aceasta se va potrivi cu fiecare dosar și fișier numit example din spațiul de lucru. Dacă introduceți ./example, aceasta se va potrivi cu dosarul example/ de la nivelul superior al spațiului de lucru. Utilizați , pentru a separa mai multe modele. Căile de acces trebuie să utilizeze bariere oblice înainte. Puteți utiliza, de asemenea, sintaxa glob:

• * pentru a se potrivi cu unul sau mai multe caractere dintr-un segment de cale
• ? pentru a se potrivi cu un caracter dintr-un segment de cale
• ** pentru a se potrivi cu orice număr de segmente de cale, inclusiv niciunul
• {} pentru a grupa condițiile (de exemplu, {**/*.html,**/*.txt} se potrivește cu toate fișierele HTML și text)
• pentru a declara un interval de caractere care să se potrivească (example. pentru a se potrivi cu example.0, example.1, …)

VS Code exclude în mod implicit unele dosare pentru a reduce numărul de rezultate ale căutării care nu vă interesează (de exemplu: node_modules). Deschideți setările pentru a modifica aceste reguli în secțiunea files.exclude și search.exclude.

Rețineți că modelele glob în vizualizarea de căutare funcționează diferit decât în setări precum files.exclude și search.exclude. În setări, trebuie să utilizați **/example pentru a se potrivi cu un dosar numit example în subfolderul folder1/example din spațiul de lucru. În vizualizarea de căutare, se presupune prefixul **.

Rețineți, de asemenea, butonul de comutare Use Exclude Settings (Utilizare setări de excludere) și Ignore Files (Ignorarea fișierelor) din caseta File to exclude (Fișiere de exclus). Butonul de comutare determină dacă trebuie excluse fișierele care sunt ignorate de fișierele .gitignore și/sau care corespund setărilor files.exclude și search.exclude.

Tip: Din Explorer, puteți să faceți clic dreapta pe un dosar și să selectați Find in Folder (Căutare în dosar) pentru a căuta numai în interiorul unui dosar.

Cercetare și înlocuire

De asemenea, puteți să căutați și să înlocuiți între fișiere. Extindeți widgetul Căutare pentru a afișa caseta de text Înlocuire.

Când introduceți text în caseta de text Înlocuire, veți vedea un afișaj diferit al modificărilor în așteptare. Puteți înlocui în toate fișierele din caseta de text Replace, puteți înlocui toate într-un singur fișier sau puteți înlocui o singură modificare.

Tip: Puteți reutiliza rapid un termen de căutare anterior utilizând ↓ (Windows, Linux Down) și (Windows, Linux Up) pentru a naviga prin istoricul termenilor de căutare.

IntelliSense

Întotdeauna vom oferi completarea cuvintelor, dar pentru limbajele bogate, cum ar fi JavaScript, JSON, HTML, CSS, SCSS, Less, C# și TypeScript, oferim o adevărată experiență IntelliSense. Dacă un serviciu lingvistic cunoaște posibile completări, sugestiile IntelliSense vor apărea pe măsură ce tastați. Puteți oricând să le declanșați manual cu ⌃Space (Windows, Linux Ctrl+Space). În mod implicit, Tab sau Enter sunt declanșatoarele acceptate de la tastatură, dar puteți, de asemenea, personaliza aceste asocieri de taste.

Tip: Filtrarea sugestiilor acceptă CamelCase, astfel încât puteți tasta literele care sunt scrise cu majuscule în numele unei metode pentru a limita sugestiile. De exemplu, „cra” va aduce rapid „createApplication”.

Tip: Sugestiile IntelliSense pot fi configurate prin intermediul setărilor editor.quickSuggestions și editor.suggestOnTriggerCharacters.

Dezvoltatorii JavaScript și TypeScript pot profita de depozitul de fișiere de declarații de tip (typings) npmjs pentru a obține IntelliSense pentru bibliotecile JavaScript comune (Node.js, React, Angular). Puteți găsi o explicație bună privind utilizarea fișierelor de declarații de tip în subiectul despre limbajul JavaScript și în tutorialul Node.js.

Aflați mai multe în documentul IntelliSense.

Formatul

VS Code are un suport excelent pentru formatarea codului sursă. Editorul are două acțiuni explicite de formatare:

• Format Document (⇧⌥F (Windows Shift+Alt+F, Linux Ctrl+Shift+I)) – Formatează întregul fișier activ.
• Format Selection (⌘K ⌘F (Windows, Linux Ctrl+K Ctrl+F)) – Formatează textul selectat.

Puteți să le invocați din paleta de comenzi (⇧⌘P (Windows, Linux Ctrl+Shift+P)) sau din meniul contextual al editorului.

VS Code are formatatori impliciți pentru JavaScript, TypeScript, JSON și HTML. Fiecare limbaj are opțiuni de formatare specifice (de exemplu, html.format.indentInnerHtml) pe care le puteți regla după preferințele dvs. în setările utilizatorului sau ale spațiului de lucru. De asemenea, puteți dezactiva formatarea implicită a limbii dacă aveți instalată o altă extensie care oferă formatare pentru aceeași limbă.

"html.format.enable": false

Pe lângă invocarea manuală a formatării codului, puteți, de asemenea, să declanșați formatarea pe baza gesturilor utilizatorului, cum ar fi tastarea, salvarea sau lipirea. Acestea sunt dezactivate în mod implicit, dar puteți activa aceste comportamente prin următoarele setări:

• editor.formatOnType – Formatarea liniei după tastare.
• editor.formatOnSave – Formatarea unui fișier la salvare.
• editor.formatOnPaste – Formatarea conținutului lipit.

Nota: Nu toate formatoarele suportă formatarea la lipire, deoarece pentru a face acest lucru trebuie să suporte formatarea unei selecții sau a unui interval de text.

În plus față de formatoarele implicite, puteți găsi extensii pe Marketplace pentru a suporta alte limbi sau instrumente de formatare. Există o categorie Formatters astfel încât să puteți căuta și găsi cu ușurință extensii de formatare. În caseta de căutare Extensions view search box, tastați „formatters” sau „category:formatters” pentru a vedea o listă filtrată a extensiilor din VS Code.

Plivire

Puteți plia regiuni din codul sursă utilizând pictogramele de pliere de pe jgheabul dintre numerele de linie și începutul liniei. Deplasați mouse-ul peste jgheab și faceți clic pentru a plia și desfășura regiunile. Folosiți Shift + clic pe pictograma de pliere pentru a plia sau desfășura regiunea și toate regiunile din interiorul acesteia.

Puteți utiliza, de asemenea, următoarele acțiuni:

• Plecare (⌥⌘ (Windows, Linux Ctrl+Shift+])) desfășoară regiunea prăbușită la nivelul cursorului.
• Toggle Fold (⌘K ⌘L (Windows, Linux Ctrl+K Ctrl+L)) pliază sau desfășoară regiunea de la cursor.
• Fold Recursively (⌘K ⌘K ⌘ (Windows, Linux Ctrl+K Ctrl+])) desfășoară regiunea de la cursor și toate regiunile din interiorul acestei regiuni.
• Fold All (⌘K ⌘0 (Windows, Linux Ctrl+K Ctrl+0)) pliază toate regiunile din editor.
• Unfold All (⌘K ⌘J (Windows, Linux Ctrl+K Ctrl+J)) desfășoară toate regiunile din editor.
• Fold Level X (⌘K ⌘2 (Windows, Linux Ctrl+K Ctrl+2) pentru nivelul 2) pliază toate regiunile din nivelul X, cu excepția regiunii din poziția curentă a cursorului.
• Fold All Block Comments (⌘K ⌘/ (Windows, Linux Ctrl+K Ctrl+/)) pliază toate regiunile care încep cu un token de comentariu de bloc.

Regiunile de pliere sunt evaluate în mod implicit pe baza indentării liniilor. O regiune de pliere începe atunci când o linie are o indentare mai mică decât una sau mai multe linii următoare și se termină atunci când există o linie cu aceeași indentare sau cu o indentare mai mică.

De la versiunea 1.22, regiunile de pliere pot fi, de asemenea, calculate pe baza simbolurilor de sintaxă ale limbajului configurat al editorului. Următoarele limbaje oferă deja pliere în funcție de sintaxă: Markdown, HTML, CSS, CSS, LESS, SCSS și JSON.

Dacă preferați să reveniți la o pliere bazată pe indentare pentru unul (sau toate limbajele de mai sus), utilizați:

 "": { "editor.foldingStrategy": "indentation" },

Regiunile pot fi, de asemenea, definite prin markeri definiți de fiecare limbaj. Următoarele limbi au în prezent markeri definiți:

.

.

.

.

Limbă	Regiune de început	Regiune de sfârșit
Bat	::#region sau REM #region.	::#endregion sau REM #endregion
C#	#region	#endregion
C/C++	#pragma region	#pragma endregion
CSS/Less/SCSS	/*#region*/	/*#endregion*/
Coffeescript	#region	#endregion
F#	//#region sau (#_region)	//#endregion sau (#_endregion)
Java	//#region sau //<editor-fold>	// #endregion sau //</editor-fold>.
Markdown	<!-- #region -->	<!-- #endregion -->
Perl5	#region sau =pod	#endregion sau =cut
PHP	#region	#endregion
PowerShell	#region	#region	#endregion
Python	#region sau # region	#endregion sau # endregion
TypeScript/JavaScript	//#region	//#endregion
Visual Basic	#Region	#End Region

Pentru a plia și desfășura numai regiunile definite de markeri folosiți:

• Fold Marker Regions (⌘K ⌘8 (Windows, Linux Ctrl+K Ctrl+8)) pliază toate regiunile markerilor.
• Unfold Marker Regions (⌘K ⌘9 (Windows, Linux Ctrl+K Ctrl+9)) desface toate regiunile de marcare.

Indentare

VS Code vă permite să controlați indentarea textului și dacă doriți să folosiți spații sau opriri de tabulare. În mod implicit, VS Code inserează spații și utilizează 4 spații pentru fiecare tastă Tab. Dacă doriți să utilizați o altă valoare implicită, puteți modifica setările editor.insertSpaces și editor.tabSize.

 "editor.insertSpaces": true, "editor.tabSize": 4,

Autodetecție

VS Code analizează fișierul deschis și determină indentarea utilizată în document. Indentarea detectată automat prevalează asupra setărilor dvs. implicite de indentare. Setarea detectată este afișată în partea dreaptă a barei de stare:

Puteți face clic pe afișarea indentării din bara de stare pentru a afișa o listă derulantă cu comenzi de indentare care vă permit să modificați setările implicite pentru fișierul deschis sau să faceți conversia între tabulație și spații.

Nota: Detecția automată VS Code verifică indentările de 2, 4, 6 sau 8 spații. Dacă fișierul dvs. utilizează un număr diferit de spații, este posibil ca indentarea să nu fie detectată corect. De exemplu, dacă convenția dvs. este de a indenta cu 3 spații, este posibil să doriți să dezactivați editor.detectIndentation și să setați în mod explicit dimensiunea tabulației la 3.

 "editor.detectIndentation": false, "editor.tabSize": 3,

Suport pentru codificarea fișierelor

Setați codificarea fișierelor la nivel global sau pentru fiecare spațiu de lucru utilizând setarea files.encoding din Setări utilizator sau Setări spațiu de lucru.

Puteți vizualiza codificarea fișierelor în bara de stare.

Click pe butonul de codificare din bara de stare pentru a redeschide sau salva fișierul activ cu o codificare diferită.

Apoi alegeți o codificare.

Ați acoperit interfața de bază cu utilizatorul – există mult mai multe în VS Code. Citiți mai departe pentru a afla despre:

• Intro Video – Setup and Basics – Urmăriți un tutorial despre elementele de bază ale VS Code.
• User/Workspace Settings – Aflați cum să configurați VS Code în funcție de preferințele dvs. prin intermediul setărilor utilizatorului și spațiului de lucru.
• Code Navigation – Peek and Goto Definition, și multe altele.
• Terminal integrat – Aflați despre terminalul integrat pentru a efectua rapid sarcini de linie de comandă din VS Code.
• IntelliSense – VS Code aduce completări inteligente ale codului.
• Depanare – Aici este locul unde VS Code strălucește cu adevărat.

Întrebări comune

Este posibilă căutarea și înlocuirea globală?

Da, extindeți caseta de text din vizualizarea Căutare pentru a include un câmp de înlocuire a textului. Puteți căuta și înlocui în toate fișierele din spațiul dvs. de lucru. Rețineți că, dacă nu ați deschis VS Code pe un dosar, căutarea se va executa numai în fișierele deschise în acel moment.

Cum pot activa word wrap?

Puteți controla word wrap prin intermediul setării editor.wordWrap. În mod implicit, editor.wordWrap este off, dar dacă îl setați la on, textul se va înfășura pe lățimea viewportului editorului.

 "editor.wordWrap": "on"

Puteți comuta word wrap pentru sesiunea VS Code cu ⌥Z (Windows, Linux Alt+Z).

Puteți, de asemenea, să adăugați rigle verticale de coloană în editor cu setarea editor.rulers, care preia o matrice de poziții de caractere de coloană în care doriți rigle verticale.

.