Препоръчано, 2024

Избор На Редактора

10 Страхотни разширения, които наистина имате нужда

Brackets.io пусна наскоро версия 1.2 с някои нови нови функции, за които можете да прочетете в техния блог. Съставихме списък от 10 от най-добрите и най-полезни разширения на скоби (без конкретна поръчка), заедно с пълни инструкции за всяко разширение.

Разширения за скоби

1.Сгъване на кода

За разлика от много други разработчици и редактори на кодове, скобите не разполагат с опция за сгъване на кодове по подразбиране. С прегъване на код лесно можете да сгънете големи части от кода в един ред. Разширението за сгъване на кода е достъпно на Github и от мениджъра на разширенията на скобите.

Как да използвам

За да сгънете всеки вложен маркер, просто кликнете върху стрелката надолу вляво от родителския маркер, както е показано по-горе. Същият принцип за Javascript или друг формат. Просто кликнете върху стрелката надолу вляво от родителския елемент, за да сгънете всички вложени в един ред. За да се разшири, просто кликнете върху знака плюс.

Номерата на линиите на сгънатите линии са скрити, така че е лесно да забележите сгънати линии, когато се концентрирате върху кода.

2. Lorem Pixel

Има много начини за генериране на текст с резервни части, но уеб разработчиците на предния край често се нуждаят от изображения на контейнери. Вместо да се опитвате да създадете празно изображение на контейнер, използвайте разширението Lorem Pixel. Тя ви позволява да вмъквате прекрасни изображения на контейнери с произволен размер. Готината част от Lorem Pixel е, че ви позволява да изберете категорията, от която искате изображение.

Ако това не е достатъчно, изображенията на контейнера се променят всеки път, когато презареждате страницата! Изображенията често могат да разстроят цветовите схеми, така че Lorem Pixel също ви дава опция за сиворазпръскване, за да използвате само b / w изображения с резервни части. Това разширение се захранва от lorempixel.com и се предлага от мениджъра на разширенията на Brackets.

Използване на Lorem Pixel

Как да използвам

След като инсталирате разширението Lorem Pixel, логото Lorem Pixel - квадрат с отметка - се появява в прозореца за разширения (прозорецът вдясно с бутона Live Preview). Кликнете върху логото, за да изведете полето за настройки. Задайте желания размер на изображението и предпочитана категория изображения. Ако искате изображения в сиво, проверете опцията за сиво. Или копирайте връзката в клипборда и я използвайте според нуждите или вмъкнете в текущата позиция на курсора.

3. Автопрефиксър

Добавянето на префикси на доставчика към кода ви е тежко. Разширяването на Autoprefixer може да ви спести много време (и много работа!), Защото автоматично добавя необходимите представки на продавача към вашия код. Тя не се нуждае от никаква конфигурация и актуализира префиксите ви всеки път, когато запазвате кода си. Можете също да изберете код и да го поставите автоматично, ако искате.

Как да използвам

За да използвате Autoprefixer, започнете да пишете без кода. Разширението автоматично ще добави код с префикс веднага след като го запазите. За да префиксирате автоматично избрания код, първо изберете кода и след това Редактиране на раздела ⇒ Автоматичен избор на префикс.

Autoprefixer също ви позволява да добавяте персонализирани префикси в неговите настройки. За да преминете към настройките на разширението: Редактирайте Настройки за автоматична префикс.

За да имате красив, каскаден, предфиксиран код, активирайте опцията Visual каскада в настройките на разширението.

4. Markdown Preview

Markdown е прекрасен език за маркиране с обикновен текст, който лесно се конвертира в HTML. Markdown Preview дава рендирания Markdown точно под текстовата версия. Тя ви позволява да избирате между два различни стила, Github Flavored Markdown и Standard Markdown.

Има три теми, които можете да изберете за прозореца за предварителен преглед - Light, Dark и Classic. Markdown Preview има опция за превъртане на синхронизация (активирана по подразбиране). Разширението може да бъде изтеглено от Github или от мениджъра на разширенията на Brackets.

Как да използвам

Отворете .md или .markdown файл. Ако сте инсталирали Markdown Preview, бутона M ↓ трябва да се появи отдясно. Кликнете върху него и ще видите визуализираната Markdown. За да промените темата или да деактивирате синхронизирането на превъртане, трябва само да кликнете върху иконата на зъбно колело в горния десен ъгъл на секцията Преглед на отметката.

5. Икони на скоби

Винаги е забавно да подправите кода си с икони на файлове. Скоби Икони добавят цветни икони, въз основа на типа на файла, към всички файлове, изброени в страничната лента. Той има икони за повечето типове файлове и можете да публикувате заявки за икони на страницата Github.

Съвет за бонус:

Скоби Икони използват икони от проекта Ionicons. Можете също така да проверите разширенията File Icons (разделител на проекта Brackets Icons), който използва икони от проекта Font Awesome. В крайна сметка се свежда до лични предпочитания.

Как да използвам

Просто инсталирайте разширението и презаредете скобите (F5).

6. Панели с инструменти за документи

Скобите нямат табулатори. Обикновен и прост факт. Разширението на лентата с инструменти „Документи“ добавя тази функционалност. Всички файлове в секцията "активни" на страничната лента се показват като раздели в това разширение. Можете също да скриете страничната лента и да използвате само Documents Toolbar за приятен интерфейс.

Как да използвам

Инсталирайте разширението и презаредете скобите (F5).

7. Скоби Git

В наши дни всичко се опитва да се интегрира с Git; тя е най-популярната система за контрол на версиите (VCS). Скобите Git е лесно най-доброто при подобни разширения. Той разполага с всички функции, които ще ви трябват. Можете лесно да извършите промени от самите скоби, да натиснете и дръпнете промените с едно кликване, преглед на историята на файловете и общата история на предаване. Ако сте добри с Git, няма да откриете никакви проблеми с това разширение.

Забележка: За да използвате скоби Git, трябва да имате инсталиран Git на вашия компютър. След като инсталирате разширението, може да се наложи да въведете пътя към изпълнимия файл на Git (ако не е по подразбиране).

Как да използвам

Издаване на файл с помощта на Git

Използването на скоби Git е доста право напред. Направете вашата местна папка Github repo папката на проекта в Brackets. След това отворете файл, направете някои промени и го запазете. След това можете да продължите напред и да кликнете върху иконата Git отдясно и това ще отвори прозореца Brackets Git в долната част. Ще бъдат изброени всички модификации, които сте направили във вашите файлове.

Проверете всички файлове, които искате да фиксирате, и след това щракнете върху бутона Commit. Това ще отвори изскачащ списък с направените промени. Въведете съобщението си „Commit“ и кликнете върху „OK“. И вие успешно направихте файл в Git директно от Brackets!

След като извършите това, просто кликнете върху бутона (той също показва броя на несинхронизираните ангажименти, както можете да видите в GIF по-горе).

Конфигуриране на настройки

Отворете прозореца Brackets Git и кликнете върху бутона Настройки (втори отдясно). Чувствайте се свободни да конфигурирате скоби Git така или иначе ви харесва.

За да видите историята на файловете и командировките

Просто кликнете върху съответните бутони, за да видите красиво изброените историята на файловете и историята на извършените записи. Споменахме ли да промените аватара или на черно-бял аватар, или на цветен аватар, или на вашия Gravatar?

Извършване на история

8. Lint ALL Things

Lint ВСИЧКИ неща. Всичко. Това разширение включва всички файлове наведнъж. Много полезно, когато имате голям проект с много свързани файлове. Всички грешки на мъх се появяват добре в прозореца.

Как да използвам

За да използвате Lint ALL Things, просто отидете в раздела Изглед и кликнете върху Lint целият проект .

9. Скоби Todo

Скоби Todo е спретнато малко разширение, което показва всички коментари на TODO в чист формат. По подразбиране той поддържа 5 маркера - TODO, NOTE, FIXME, CHANGES и FUTURE. Можете също да маркирате коментарите като Готово. В опциите за изглед можете да филтрирате коментари по етикети. Скоби Todo ви позволява да дефинирате персонализирани цветове за етикети, както и вашите собствени тагове, в случай, че някога искате да получите творчески с вашите коментари.

Ако работите по голям проект и трябва да следите коментарите от множество файлове, можете да промените обхвата на търсенето на Todo на Brackets. Искате ли да изключите някои файлове и папки като папки на доставчици? Няма проблем. Трябва само да добавите пътеката в списъка за изключване. Можете да персонализирате настройките за всеки проект, като добавите .todo файл в директорията на основния проект.

Можете да преминете през всички настройки в документацията на github.

Как да използвам

За да използвате скоби Todo, просто добавете коментар към кода си с етикет вътре. Името на маркера трябва да е с главни букви, последвано от двоеточие (:). За да видите всички Тодо, просто кликнете върху иконата Тодо в прозореца на дясното разширение.

Конфигуриране на:

  • За да позволите Todo за HTML коментари: Просто отворете настройките - Кликнете върху иконата Todo → Настройки (икона на зъбно колело) - и щракнете, за да отворите файла .todo. За този файл добавете този код:
     {"regex": {"префикс": "(? :)"}} 

    Как изглежда менюто Настройки на Тодо
  • За да промените обхвата на търсенето: добавете този код в .todo файла:
     {"search": {"scope": "моят проект"}} 
  • За да изключите всяко разширение от файл / папка / файл от обхвата на търсенето: добавете този код в .todo файла:
     {"search": {"scope": "моят проект", 

    „Изключи папки“: [“твоята папка“]

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

10. Украсете

Beautify прави кода ви добър. Той фиксира интервали, отстъпи и линии.

Как да използвам

Много е лесно да се използва Beautify. Всичко, което трябва да направите, е да изберете някой код> Кликнете с десния бутон > Beautify .

Друга възможност е да преминете към раздела Редактиране и да кликнете върху „ Разкрасяване “.

Top