10 fantastiska konsoler som du verkligen behöver

Brackets.io släppte version 1.2 nyligen, med några fantastiska nya funktioner som du kan läsa om på deras blogg. Vi har sammanställt en lista med 10 av de bästa och mest användbara parentesförlängningarna där ute (i ingen särskild ordning), tillsammans med kompletta instruktioner för varje tillägg.

Fästen förlängningar

1.Kod Vikning

Till skillnad från många andra IDE: er och kodredigerare har parenteser inte ett alternativ för kodfällning tillgängligt som standard. Med kodfällning kan du enkelt kollapsa stora delar av din kod i en enda rad. Kodfällningstillägget är tillgängligt på Github och från Brackets tilläggshanterare.

Hur man använder

För att fälla alla kapslade taggar klickar du bara på nedåtpilen till vänster om överordnade taggen som visas ovan. Samma princip för Javascript eller något annat format. Klicka bara på nedåtpilen till vänster om överordnade element för att fälla alla kapslade uttalanden i en rad. För att expandera klickar du bara på plustecknet.

Linjenumren för de vikta linjerna är dolda, så det är lätt att upptäcka vikta linjer när du koncentrerar dig på koden.

2. Lorem Pixel

Det finns gott om sätt att generera platshållare-text, men främre webbutvecklare behöver ofta platshållarbilder. Istället för att försöka skapa en tom platshållarbild använder du Lorem Pixel-förlängningen. Det låter dig infoga underbara platshållarbilder i valfri storlek. Den coola delen om Lorem Pixel är att den låter dig välja vilken kategori du vill ha en bild från.

Om det inte är tillräckligt bra ändras platshållarnas bilder varje gång du laddar om sidan! Bilder kan ofta störa färgscheman, så Lorem Pixel ger dig också ett "gråskala" -alternativ för att endast använda bilder med platshållare. Denna tillägg drivs av lorempixel.com och är tillgänglig från Brackets extensions manager. Använda Lorem Pixel

Hur man använder

När du har installerat Lorem Pixel-förlängningen visas Lorem Pixel-logotypen - en kontrollerad kvadrat - i förlängningsfönstret (rutan till höger med Live Preview-knappen). Klicka på logotypen för att få fram en inställningsruta. Ställ in önskad bildstorlek och önskad bildkategori. Om du vill ha gråskalabilder, kolla alternativet gråskala. Antingen kopiera länken till urklippet och använd den efter behov eller sätt i den aktuella markörpositionen.

3. Autoprefixer

Att lägga till leverantörsprefix till din kod är drudgery. Autoprefixer-tillägget kan spara dig mycket tid (och mycket arbete!) Eftersom det automatiskt lägger till de nödvändiga leverantörsprefixerna till din kod. Den behöver inte någon konfiguration och uppdaterar dina prefix varje gång du sparar din kod. Du kan också välja kod och automatiskt prefix om du vill.

Hur man använder

För att använda Autoprefixer börjar du bara skriva prefix-fri kod. Tillägget lägger automatiskt till prefixkod så fort du sparar. För att automatiskt prefixa en markerad kod väljer du först koden och sedan Redigera flik ⇒ Val av automatisk prefix.

Autoprefixer låter dig också lägga till anpassade prefix i dess inställningar. Så här går du till tilläggsinställningarna: Redigera ⇒ Autoprefixerinställningar.

För att ha vacker, kaskad, förinställd kod, aktivera Visuell kaskad alternativet i tilläggsinställningarna.

4. Förhandsvisning av markering

Markdown är vackert markeringsspråk för vanlig text som lätt kan konverteras till HTML. Markdown-förhandsvisning ger den återgivna Markdown direkt under textversionen. Det låter dig välja mellan två olika stilar, Github Flavored Markdown och Standard Markdown.

Det finns tre teman du kan välja för förhandsgranskningsfönstret - Ljus, mörk och klassisk. Förhandsvisning av nedladdning har också ett synkroniseringsalternativ (aktiverat som standard) Tillägget kan laddas ner från Github eller från Brackets extensions manager.

Hur man använder

Öppna en .md eller a .prissänkning fil. Om du har installerat Markdown Preview, M ↓  knappen ska visas till höger. Klicka på den så ser du renderad Markdown. För att ändra temat eller avaktivera rullningssynkronisering klickar du bara på kugghjulsikonen i det övre högra hörnet i avsnittet Förhandsvisning av nedladdning.

5. parentes ikoner

Det är alltid kul att krydda din kodredigerare med filikoner. Brackets Icons lägger till färgglada ikoner, baserade på filtyp, till alla filer som listas i sidofältet. Det har ikoner för de flesta filtyper, och du kan posta ikonförfrågningar på Github-sidan.

Bonus Tips:

Brackets Icons använder ikoner från Ionicons-projektet. Du kan också kolla tillägget File Icons (en gaffel för projektet Brackets Icons) som använder ikoner från Font Awesome-projektet. I slutändan kommer det till personliga preferenser.

Hur man använder

Installera bara tillägget och ladda in parentes (F5) igen.

6. Dokumentverktygsfält

Konsoler saknar flikar. Vanligt och enkelt faktum. Dokumentverktygsfältet lägger till denna funktion. Alla filer som finns i det "aktiva" avsnittet i sidofältet visas som flikar i detta tillägg. Du kan också dölja sidofältet och bara använda dokumentverktygsfältet för ett trevligt gränssnitt.

Hur man använder

Installera förlängningen och ladda in parentes (F5).

7. Konsoler Git

Allt försöker integreras med Git idag; Det är det överlägset mest populära versionskontrollsystemet (VCS). Brackets Git är lätt det bästa bland liknande Brackets Extensions. Den har alla git-funktioner du behöver. Du kan enkelt göra ändringar inom parentes själv, trycka och dra ändringar med ett enda klick, visa filhistorik och total åtagningshistorik också. Om du har det bra med Git hittar du inga problem med den här utvidgningen.

Notera: För att använda Brackets Git måste du ha Git installerat på din dator. När du har installerat tillägget kan du behöva ange sökvägen till din Git-körbara fil (om den inte finns i standardvägen).

Hur man använder Begär en fil med hjälp av Brackets Git

Att använda Brackets Git är ganska rakt fram. Gör din lokala Github-repo-mapp till projektmappen i parentes. Öppna sedan en fil, gör några ändringar och spara den. Sedan kan du gå vidare och klicka på Git-ikonen till höger och detta öppnar upp fönstret Brackets Git längst ner. Den visar alla ändringar du har gjort i dina filer.

Kontrollera vilka filer du vill begå och klicka sedan på knappen Kommit. Detta öppnar en popup som visar de ändringar som gjorts. Ange ditt kommitmeddelande och klicka på Ok. Och du har framgångsrikt begått en fil till Git direkt från parentes!

Efter att ha begått klickar du bara på knappen (det visar också antalet osynkroniserade åtaganden, som du kan se i GIF ovan).

Konfigurera inställningar 

Öppna fönstret Brackets Git och klicka på knappen Inställningar (andra från höger). Du kan konfigurera Brackets Git oavsett om du gillar det.

Visa fil- och åtagningshistorik

Klicka bara på respektive knappar för att visa din filhistorik och åtagningshistorik vackert listade. Nämnde vi att du kan byta avatar till antingen en svartvit avatar, en färgad avatar eller din Gravatar? Åtagande historia

8. Lina ALLA saker

lint ALLT saker. Allt. Detta tillägg linser alla dina filer på en gång. Mycket användbart när du har ett stort projekt med massor av anslutna filer. Alla luddfel dyker upp i ett fönster.

Hur man använder

För att använda Lint ALL Things, gå bara till Se  fliken och klicka Lint hela projektet.

9. parentes Todo

Brackets Todo är en snygg liten förlängning som visar alla TODO-kommentarer i ett snyggt listformat. Som standard stöder det 5 taggar - TODO, NOT, FIXME, CHANGES och FUTURE. Du kan också markera kommentarer som klar. I visningsalternativen kan du filtrera kommentarer efter taggar. Med parentes kan du även definiera anpassade färger för taggar och egna taggar, om du någonsin vill bli kreativ med dina kommentarer.

Om du arbetar med ett stort projekt och behöver hålla reda på kommentarer från flera filer kan du ändra räckvidden för Brackets Todos sökning. Vill du utesluta vissa filer och mappar som leverantörsmappar? Inga problem. Lägg bara till sökvägen i uteslutningslistan. Du kan anpassa inställningarna för varje projekt genom att lägga till en .todofil i rotprojektkatalogen.

Du kan gå igenom alla inställningsalternativ i github-dokumentationen.

Hur man använder

För att använda Brackets Todo, lägg bara till en kommentar till din kod med en tagg inuti. Etikettnamnet måste ha stora bokstäver, följt av en kolon (:). Klicka på Todo-ikonen i den högra förlängningsfönstret för att se alla Todos.

Konfigurera:

• För att tillåta Todos för HTML-kommentarer: Öppna bara inställningarna - Klicka på Todo-ikonen → Inställningar (växellikon) - och klicka för att öppna .todo-filen. Till den här filen lägger du till koden:

  "regex": "prefix": "(? :)" 

  Hur Todo-inställningsmenyn ser ut

• Så här ändrar du sökomfånget: Lägg till den här koden till .todo-filen:

  "search": "scope": "myproject"

• Så här utesluter alla fil / mapp / filändelser från sökomfånget: Lägg till den här koden till .todo-filen:

  "search": "scope": "myproject",

  “ExcludeFolders”: [“din mapp”]

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

10. Försköna

Försköna gör att din kod ser bra ut. Det fixar mellanslag, intryck och linjer.

Hur man använder

Det är väldigt lätt att använda Beautify. Allt du behöver göra är att göra Välj lite kod> Högerklicka > Försköna.

Alternativt kan du gå över till Redigera fliken och klicka på 'Försköna'.

SE Också: 20 bästa Emmet-tips för att hjälpa dig att koda HTML / CSS Crazy Fast