de Jimmy Zhang

Un ghid pentru fragmente sublime de text

Un ghid pentru fragmente sublime de
Fotografie de Chris Peeters de la Pexels https://www.pexels.com/photo/speed-racing-speedway-racing-car-12801/

Recent am schimbat joburile, ceea ce implică multă aclimatizare: noi colegi de prietenie, noi termeni de învățat, un nou mediu de dezvoltare de interiorizat. Dar, mai presus de toate, comutatorul a venit cu o schimbare a limbajelor de programare, departe de estetica ordonată a Python și direct în lumea unghiulară și curlată a JavaScript.

În timp ce am continuat să scap parantezele și să omit parantezele, am căutat ceva care să mă ajute să navighez pe teritoriul necunoscut. Din fericire, am găsit fragmente de text sublime.

Îmi plac fragmentele de text sublime, deoarece reduc definițiile greoaie la câteva apăsări de taste, ca aceasta:

Prezentare generală

Fragmente de text sublime accelerează actul de scriere a codului, oferind o modalitate rapidă de a insera blocuri de text care apar în mod repetat într-un proiect. Amândoi sunt ușor de înțeles și simpli de scris, făcându-i un instrument excelent pentru economisirea timpului și eliminarea erorilor în timpul dezvoltării.

ad-banner

Un fragment mapează un cuvânt declanșator la un bloc de text predefinit, pe care le definiți ambele. Pentru a invoca fragmentul, tastați cuvântul declanșator și apăsați tab. Această acțiune simplă extinde cuvântul declanșator în blocul de text mapat – completat cu câte paranteze, paranteze și punct și virgulă este necesar, întotdeauna potrivite și în ordinea corectă.

Notă: Exemplele date mai jos se aplică în principal JavaScript și React, dar informațiile despre fragmente pot fi aplicate oricărui limbaj de programare sau cadru.

Crearea de fragmente

Pentru a crea un fragment nou în Sublime Text 3, accesați:

Tools -> Developer -> New Snippet...

Aceasta deschide o fereastră nouă care conține un nou șablon de fragment, care arată astfel:

Există un fragment din patru părți. Deși este necesară o singură parte, este recomandată definirea tuturor celor patru.

1) Conținutul (Linia 3): Obligatoriu

<content><![CDATA[  Hello, ${1:this} is a ${2:snippet}.]]></content>

Definiți blocul de text care urmează să fie extins de către fragment, editând rândul (rândurile) dintre TA[ and ]]> etichete. (De acum înainte, blocul de text care este extins după ce este invocat fragmentul va fi denumit fragmentanimalul de companie cpecort).

Veți observa prezența cuvintelor înconjurate de un semn de dolar, paranteze, numere și prefixate cu un număr. Această marcare opțională specifică un Marker de câmp, care controlează poziția cursorului după ce este invocat fragmentul.

După extinderea conținutului, cursorul se deplasează automat la primul marcator de câmp (${1:this} de mai sus). Dacă apăsați din nou pe tab, mutați cursorul la următorul marcator de câmp numerotat sau la sfârșitul conținutului fragmentului, dacă nu mai există câmpuri (consultați sfat pro de mai jos).

Textul după două puncte într-un marker de câmp este opțional. Dacă este specificat, este selectat automat ca parte a mișcării cursorului, ceea ce înseamnă că poate fi șters cu o singură mișcare rapidă. Acest lucru face ca textul după două puncte să fie excelent pentru valorile „substituent” care oferă îndrumări despre ceea ce ar trebui completat sau pentru valorile implicite opționale, cum ar fi isRequired din exemplul de mai jos.

Sfat Pro
Folosește $0 marker de câmp (marcajul de ieșire) pentru a defini în mod explicit de unde va ieși cursorul după ce toate marcajele de câmp au fost parcurse. Acest lucru este util dacă doriți să reconectați fișierul tab cheie pentru completarea automată după ce este invocat fragmentul. Pentru aceasta, plasați marcajul de ieșire imediat după primul marcator de câmp, astfel:${1:example}$0

2: Cuvântul declanșator (Linia 6): Opțional

<tabTrigger>hello</tabTrigger>

Cuvintele declanșatoare scurte și mnemonice funcționează cel mai bine. De exemplu, Fragment Babel React hărți de pachete cwm la componentWillMount și cwr la componentWillReceiveProps.

Cuvintele declanșatoare sunt opționale, deoarece există o modalitate alternativă de a invoca fragmente, pe care o vom aborda în secțiunea Utilizare avansată.

3: Un domeniu (Linia 8): Opțional

<scope> source: python </scope>

Domeniile de aplicare limitează locul în care poate fi invocat fragmentul dvs., îmbunătățind precizia și prevenind coliziunile. De exemplu, cu scopuri, același cuvânt declanșator poate avea semnificații diferite pentru diferite limbaje de programare.

Acest esențial listează modul de definire a domeniilor pentru o listă lungă de limbaje de programare, dar domeniile sunt capabile de mult mai mult. Vom acoperi domeniile de aplicare mai detaliat în secțiunea Utilizare avansată.

4: A Descriere (Linia 10): Opțional

<description> demo description </description>

Din anumite motive, eticheta de descriere nu apare în șablonul de creare a fragmentului. Cu toate acestea, furnizarea unuia va fi utilă.

Fragmente apar în meniul de completare automată al Sublime Text, împreună cu o frază descriptivă. Fără o descriere, această expresie este implicită numele fișierului fragmentului, care nu este garantat să aibă suficient context atunci când mai multe fragmente partajează același prefix.

Un ghid pentru fragmente sublime de
Descrierile mă ajută să descâlcesc fragmentele de import

Sfat Pro
Creați o comandă rapidă de la tastatură pentru a crea rapid un fragment nou. Mergi la Preferences -> Keybindings și adăugați următoarea linie în fișierul de configurare „Utilizator” (desigur, replace cmd+alt + n cu orice combinație vi se potrivește cel mai bine):

{ "keys": ["cmd+alt+n"], "command": "new_snippet" }

Salvarea fragmentelor

După crearea fragmentului, asigurați-vă că îl salvați într-un fișier care se termină în sublime-snippet. Pe Mac, fragmentele create de utilizator sunt salvate la:

~/Library/Application Support/Sublime Text 3/Packages/User

Crearea unui fragment nou prin elementul de meniu sau comanda rapidă de la tastatură solicită automat această locație la salvare.

Utilizare avansată

variabile de mediu

Am acoperit cele patru aspecte ale creării unui fragment static. Cu toate acestea, este posibil să creați fragmente dinamice prin utilizarea variabilelor de mediu, care conțin referințe la contextul în care a fost invocat un fragment.

Contextul este un termen vag, așa că vezi Documentație sublimă pentru fragmentul de text pentru un tabel de variabile de mediu și semnificațiile lor exacte.

Pentru un exemplu al modului în care pot fi utilizate variabilele de mediu, echipa mea urmează o convenție în care foaia de stil a unei componente este salvată sub același nume de fișier ca și componenta și primește un .scss extensie.

Fișierul component poate apoi să utilizeze această convenție cu un fragment folosind $TM_FILENAME variabilă de mediu.

<content><![CDATA[  import styles from './$TM_FILENAME${1:}scss']]></content>

$TM_SELECTED_TEXT sau $SELECTION variabila de mediu are un scop mai general. Vă amintiți cum am menționat că a existat o modalitate alternativă de a invoca fragmente? În loc să introduceți cuvântul declanșator și să loviți tab, puteți invoca fragmente și prin Paleta de Comenzi.

Pe Mac, lovește cmd+shift+p pentru a afișa Paleta, tastați „Fragment” și selectați fragmentul dorit din meniul derulant. Această abordare giratorie are un avantaj major - este posibil să invocați un fragment cu un bloc de text selectat, iar textul respectiv să fie inclus ca parte a conținutului unui fragment. Acest lucru vă permite să creați fragmente de „împachetare”, care împachetează textul selectat cu o clauză if, de exemplu.

Sfat Pro
Extindeți comenzile rapide de selecție sunt minunate pentru selectarea rapidă a textului de înfășurat cu fragmente precum cel de mai sus.

Domenii avansate

Am vorbit despre limitarea fragmentelor la anumite fișiere de cod sursă, dar fragmentele au adesea contexte mai granulare în care sunt valabile. De exemplu, o metodă precum componentWillUpdate de obicei are sens doar în cadrul unei definiții a componentei (clasei), pe care următoarea definiție a fragmentului o explică:

Includerea meta.class.js pe linia 8 înseamnă că fragmentul este valabil numai în situațiile în care fișierul cod sursă care este editat este un fișier JavaScript, și cursorul este „în interiorul” unei definiții de clasă. Dacă ați încerca să invocați fragmentul într-un fișier JavaScript gol, nu s-ar întâmpla nimic.

Pentru a valorifica pe deplin puterea domeniilor, trebuie să înțelegeți puțin sintaxa, domeniile și selectoarele de domeniu. Acestea sunt subiecte nuanțate demne de propria postare, așa că le voi explica la un nivel foarte ridicat, cu linkuri către documentația pentru a completa lacunele:

  • o limba sintaxă definește modul în care codul sursă este împărțit în scopuri.
  • scopuri sunt regiuni de text etichetate care corespund „unităților” unui limbaj de programare, cum ar fi definițiile clasei sau funcțiilor. Fiecare poziție dintr-un fișier de cod sursă are un domeniu de aplicare asociat. Meta domeniile sunt cele mai relevante pentru fragmente.
  • selectoare de domeniu Domenii de „interogare”. Selectoarele de domeniu sunt legate de acțiuni (cum ar fi fragmente sau comenzi rapide de la tastatură) și sunt utilizate pentru a determina dacă acțiunea este adecvată având în vedere domeniul de aplicare curent.

Sfat Pro
Cel mai bun mod de a afla despre domenii este să te joci cu ele. Mutați cursorul în diferite poziții dintr-un fișier și utilizați cmd+shift+p comandă rapidă de la tastatură pentru a afișa un meniu pop-up care afișează domeniul de aplicare asociat:

1611564427 344 Un ghid pentru fragmente sublime de

Fragmentele durează doar câteva secunde pentru a fi create. Cu toate acestea, economisesc mult mai mult în efort și nu doar economisind cât trebuie să tastați. Oferind o modalitate rapidă și reproductibilă de extindere a conținutului, fragmentele reduc erorile. De asemenea, abstractizează detalii greu de reținut, cum ar fi numele metodelor și semnăturile lor. Toate acestea îți eliberează degetele - și creierul - pentru a te concentra asupra a ceea ce vor cel mai mult să facă: scrie un cod excelent.