Recomandat, 2021

Alegerea Editorului

10 Extensii paranteze minunate de care aveți nevoie

Brackets.io a lansat recent versiunea 1.2, cu câteva noi caracteristici noi pe care le puteți citi pe blogul lor. Am compilat o listă cu zece dintre cele mai bune și mai folositoare extensii de brațe acolo (în nicio ordine specială), împreună cu instrucțiuni complete pentru fiecare extensie.

Extensiile brațelor

1.Codul pliabil

Spre deosebire de multe alte IDE-uri și editoare de coduri Brackets nu are opțiunea de pliere a codului disponibilă în mod implicit. Cu codul de pliere, puteți colage cu ușurință porțiuni mari ale codului dvs. într-o singură linie. Extensia de extensie a codului este disponibilă pe Github și din managerul de extensii Brackets.

Cum să utilizați

Pentru a plia orice etichetă imbricată, faceți clic pe săgeata în jos spre stânga etichetei părinte așa cum este prezentat mai sus. Același principiu pentru Javascript sau orice alt format. Doar dați clic pe săgeata în jos spre stânga elementului părinte pentru a alinia toate instrucțiunile imbricate într-o singură linie. Pentru a extinde, faceți clic pe semnul plus.

Numerele de linie ale liniilor pliate sunt ascunse, astfel încât este ușor să se observe liniile pliate atunci când vă concentrați asupra codului.

2. Lorem Pixel

Există o mulțime de moduri de generare a textului cu substituent, dar dezvoltatorii web de la capătul din față au adesea nevoie de imagini de tip placeholder. În loc să încercați să creați o imagine de tip blank placeholder, utilizați extensia Lorem Pixel. Vă permite să inserați imagini de tip placeholder superb de orice dimensiune doriți. Partea rece despre Lorem Pixel este că vă permite să alegeți categoria din care doriți o imagine.

Dacă acest lucru nu este suficient de bun, imaginile substituente se schimbă de fiecare dată când reîncărcați pagina! Imaginile pot de multe ori să deranjeze scheme de culori, astfel încât Lorem Pixel vă oferă de asemenea o opțiune "în tonuri de gri" pentru a utiliza doar imagini b / w. Această extensie este alimentată de lorempixel.com și este disponibilă de la managerul pentru extensiile Brackets.

Folosind Lorem Pixel

Cum să utilizați

După instalarea extensiei Lorem Pixel, pe panoul extensie (panoul din partea dreaptă cu butonul Live Preview) apare sigla Lorem Pixel - un pătrat selectat. Faceți clic pe siglă pentru a afișa o casetă de setări. Setați dimensiunea dorită a imaginii și categoria de imagini preferată. Dacă doriți imagini în tonuri de gri, verificați opțiunea de tonuri de gri. Fie copiați link-ul în clipboard și utilizați-l după cum este necesar sau introduceți-l în poziția curentă a cursorului.

3. Autoprefixer

Adăugarea de prefixe ale furnizorilor la codul dvs. este o problemă. Extensia Autoprefixer vă poate economisi o mulțime de timp (și o mulțime de muncă!), Deoarece adaugă automat prefixele furnizorilor necesare codului dvs. Nu are nevoie de nici o configurație și actualizează prefixele de fiecare dată când salvezi codul. De asemenea, puteți selecta codul și prefixul automat dacă doriți.

Cum să utilizați

Pentru a utiliza Autoprefixer, începeți să scrieți codul fără prefix. Extensia va adăuga automat codul prefixat de îndată ce economisiți. Pentru a prefixa automat un cod selectat, selectați mai întâi codul și apoi fila Editare ⇒ Selectare prefix auto.

Autoprefixer vă permite, de asemenea, să adăugați prefixe personalizate în setările sale. Pentru a accesa setările extensiei: Editați Setări Autoprefixer.

Pentru a avea un cod prefixat frumos, în cascadă, activați opțiunea Cascadă vizuală în setările extensiei.

4. Preview Preview

Markdown este un minunat limbaj de marcare în format text simplu, ușor de convertit în HTML. Anunțul Markdown oferă Markdown redat chiar sub versiunea textului. Vă permite să alegeți între două stiluri diferite, Github Flavored Markdown și Standard Markdown.

Există trei teme pe care le puteți alege pentru fereastra de examinare - Lumină, Întuneric și Clasic. Anunțul Markdown are, de asemenea, o opțiune de sincronizare de derulare (activată în mod implicit). Extensia poate fi descărcată de la Github sau de la managerul de extensii Brackets.

Cum să utilizați

Deschideți un fișier .md sau .markdown . Dacă ați instalat previzualizarea Markdown, butonul M ↓ ar trebui să apară în partea dreaptă. Faceți clic pe acesta și veți vedea redactat Markdown. Pentru a schimba tema sau a dezactiva sincronizarea defolării, trebuie doar să dați clic pe pictograma roată din colțul din dreapta sus al secțiunii Previzualizare Markdown.

5. Icoane pentru brațe

Este întotdeauna distractiv să-ți îmbogăți editorul de coduri cu pictograme de fișiere. Pictogramele pentru pictograme adaugă pictograme colorate, pe baza tipului de fișier, la toate fișierele listate în bara laterală. Are pictograme pentru majoritatea tipurilor de fișiere și poți posta cereri de pictograme pe pagina Github.

Sfat pentru bonusuri:

Icoanele de pe brațe utilizează icoane din proiectul Ionicons. De asemenea, puteți verifica fișierul extensie Icoane de fișiere (o furcă a proiectului Icoane cu brațe) care utilizează icoane din proiectul Font Awesome. Acesta se reduce la preferința personală în cele din urmă.

Cum să utilizați

Trebuie doar să instalați extensia și să reîncărcați brațele (F5).

6. Bara de instrumente Documente

Parantezele lipsesc file. Simplu și simplu. Extensia Bara de instrumente Documente adaugă această funcție. Toate fișierele care se află în secțiunea "activă" a barei laterale apar ca file în această extensie. Puteți să ascundeți și bara laterală și să utilizați numai bara de instrumente Documente pentru o interfață plăcută.

Cum să utilizați

Instalați extensia și reîncărcați brațele (F5).

7. Brațe Git

Totul încearcă să se integreze cu Git în aceste zile; este de departe cel mai popular sistem de control al versiunii (VCS). Parantezele Git sunt cu ușurință cele mai bune dintre extensiile de brațe similare. Are toate caracteristicile de care ai nevoie. Puteți efectua cu ușurință modificări din interiorul parantezelor, împingeți și trageți modificările cu un singur clic, vizualizați istoricul fișierelor și istoricul complet al comitetelor. Dacă sunteți bine cu Git, nu veți găsi probleme cu această Extensie.

Notă: Pentru a utiliza Brackets Git trebuie să aveți Git instalat pe computer. După instalarea extensiei, poate fi necesar să introduceți calea spre fișierul dvs. executabil Git (dacă nu este în calea implicită).

Cum să utilizați

Comandarea unui fișier folosind brațele Git

Folosind brațele Git este destul de drept înainte. Creați-vă dosarul local de replici Github în folderul proiectului din Console. Apoi deschideți un fișier, efectuați unele modificări și salvați-l. Apoi puteți să mergeți mai departe și să faceți clic pe pictograma Git din partea dreaptă, iar acest lucru va deschide panoul Ghețuri de la partea inferioară. Acesta va lista toate modificările pe care le-ați făcut în fișierele dvs.

Verificați fișierele pe care doriți să le comiteți, apoi faceți clic pe butonul Comit. Aceasta va deschide un pop-up care va afișa modificările efectuate. Introduceți mesajul dvs. Commit și faceți clic pe Ok. Și ați comis cu succes un dosar către Git direct de la Brackets!

După ce ați făcut clic pur și simplu pe butonul de apăsare (de asemenea, indică numărul de comitete nesolicitate, după cum puteți vedea în GIF de mai sus).

Configurarea setărilor

Deschideți panoul Ghețuri și faceți clic pe butonul Setări (al doilea din dreapta). Simțiți-vă liber să configurați Brațele Git oricum doriți.

Pentru a vizualiza istoricul fișierelor și al comitetelor

Doar faceți clic pe respectivele butoane pentru a vizualiza Istoricul fișierelor și Istoricul comitetelor listate frumos. Am menționat că poți schimba avatarul fie într-un avatar alb-negru, în avatar colorat, fie în Gravatar?

Istoria comitetului

8. Lint ALL Things

Lint TOATE lucrurile. Tot. Această extensie îți scarpină toate fișierele dintr-o dată. Foarte util atunci când aveți un proiect mare cu multe fișiere conectate. Toate erorile de scame apar bine într-un panou.

Cum să utilizați

Pentru a utiliza Lint ALL Things, trebuie doar să accesați fila Vizualizare și să faceți clic pe Lint whole Project .

9. Brațe Todo

Paranteze Todo este o prelungire mică care arată toate comentariile TODO într-un format de listă îngrijit. În mod implicit, acesta acceptă 5 etichete - TODO, NOTĂ, FIXME, SCHIMBĂRI și FUTURE. De asemenea, puteți marca comentariile ca fiind Realizate. În opțiunile de vizualizare puteți filtra comentariile după etichete. Parantezele Todo vă permit să definiți culori personalizate pentru etichete, precum și propriile etichete, în cazul în care vreți să deveniți creativi cu comentariile dvs.

Dacă lucrați la un proiect mare și trebuie să țineți evidența comentariilor din mai multe fișiere, puteți schimba domeniul de aplicare a căutării de la Brackets Todo. Doriți să excludeți anumite fișiere și foldere ca și folderele furnizorilor? Fără griji. Trebuie doar să adăugați calea în lista de excluderi. Puteți personaliza setările pentru fiecare proiect prin adăugarea unui fișier .todo în directorul de proiect rădăcină.

Puteți trece prin toate opțiunile de setări din documentația github.

Cum să utilizați

Pentru a utiliza Steagurile Todo, trebuie doar să adăugați un comentariu la codul dvs. cu o etichetă înăuntru. Numele etichetei trebuie să fie marcat cu majuscule, urmat de un colon (:). Pentru a vedea toate materialele Todo, trebuie doar să dați clic pe pictograma Todo din panoul de extensie din partea dreaptă.

Configurarea:

  • Pentru a permite comentariile lui Todo pentru HTML: Deschideți doar setările - faceți clic pe pictograma Todo → Setări (pictograma roată) - și faceți clic pentru a deschide fișierul .todo. În acest fișier, adăugați acest cod:
     {"regex": {"prefix": "(? :)"}} 

    Cum arată meniul de setări Todo
  • Pentru a modifica domeniul de căutare: adăugați acest cod în fișierul .todo:
     {"căutare": {"scope": "proiectul meu"}} 
  • Pentru a exclude orice extensie de fișier / folder / fișier din domeniul de căutare: Adăugați acest cod în fișierul .todo:
     {"căutare": {"scope": "proiectul meu", 

    "ExcludeFoldere": ["dosarul dvs."]

     "excludeFile": ["yourfile"] "excludeFile": [".yourextension"]]} 

10. Înfrumusețește-te

Îndrăgostiți face codul dvs. să arate bine. Repară spațiile, indentările și liniile.

Cum să utilizați

Este foarte ușor de utilizat Beautify. Tot ce trebuie să faceți este să selectați un cod> Clic dreapta > Înfrumusețare .

Alternativ, puteți să vă îndreptați spre fila Editați și să faceți clic pe " Îmbogățiți ".

Top