Share
En kodredaktör är brödet och smöret av alla webbutvecklareens karriär. Det är den enda fasetten av en kodarens verktygskedja som är uppskattad, men också vald med extrem passion och beslutsamhet. Det här är inte en artikel om vilken kodredigerare som är mest populär, eller vad som gör en bättre än nästa; Syftet med denna artikel kommer att vara för dem som har valt Atom som kodredigerare och visar hur man gör det fantastiskt för vardagligt arbete.
Emmet LiveStyle är det första dubbelriktiga redigeringsverktyget för realtid för CSS, LESS och SCSS-filer.
Atompaketet är tillgängligt här och kräver ingen speciell inställning: starta bara Atom och Google Chrome och du är redo för redigering i realtid..
"LiveStyle använder sina egna implementeringar av LESS och SCSS preprocessorer, skrivna i ren JavaScript. Till skillnad från officiella preprocessors implementeringar med sourcemaps, ger LiveStyle rätt käll-till-resultat mappings, variabel och mixin omfång, felåterställning och delvis kompilering. "
En favoritfunktion hos mig är "Remote View" och skapar en offentligt tillgänglig URL som pekar på din lokala sajt. Använd den här webbadressen för att förhandsgranska på alla internetanslutna enheter eller webbläsare med omedelbara uppdateringar i realtid från Atom och DevTools.
För att behärska detta paket rekommenderar jag starkt att du tittar igenom dokumentationen och starta guiden för att säkerställa att den uppfyller behoven för ditt specifika sammanhang och självklart att du känner dig bekväm innan du använder den.
Har du någonsin velat använda en färgplockare medan du kodade? Ha ingen rädsla för att Color Picker har din rygg. Color Picker läser för närvarande HEX, HEXa, RGB, RGBa, HSL, HSLa, HSV, HSVa, VEC3 och VEC4 färger och kan konvertera mellan format.
Denna lilla djävul inspekterar också Sass och LESS färgvariabler som en supermysig. Öppna bara färgplockaren med markören på den variabel du väljer och det kommer att se upp definitionen för dig. Du kan klicka på den angivna definitionen och gå direkt till var den är definierad.
Om färgplockaren inte är din kopp te kan du kanske ge pigment ett försök. Pigment är ett paket för att visa färger i projektfiler. Pigment kommer att skanna källfiler i dina projektkataloger som letar efter färger och kommer att bygga en palett med dem alla (ganska smarta).
Med rörelse som begärs i vårt arbete är det trevligt att ha verktyg som hjälper till med processen.
Den bezier kurva redaktören är en spelväxlare för rörelse och interaktiva utvecklare letar efter den perfekta lättnadskombinationen. Välj mellan ett flertal lättnader som visar deras resultat live eller skapa ditt eget genom att dra handtagen i den lättillgängliga visualiseraren.
Vill du gömma filer från ditt projekt som inte behöver vara engagerade i din repo eller visas för dig medan du arbetar? I Atom s paket fliken, sök "träd-vy" och under dess inställningar markera rutan för Dölj ignorerade namn för att ta bort globalt ignorerade filer från din trädvy, eller kombinera med Dölj VCS-ignorerade filer. Dessa VCS-filer är de som styrs av din .gitignore. De globalt ignorerade filerna är sådana som .DS_Store, till exempel.
När förbättringar av din visuella navigering kan göras föreslår jag att det görs, och det är därför jag älskar filikoner.
Det här paketet ger dina filer en fin liten ikon med lite färg för att hjälpa till att hitta, och i allmänhet får sakerna att bli läckra. Det ger dig även möjlighet att anpassa storlek, färg nyanser, byta ikoner och tilldela ikoner genom filtillägg.
Tycker du inte om att hoppa mellan kommandoraden och din redaktör för att göra förpliktelser? Detta GitHub-paket är nu buntat med alla versioner av Atom 1.18 och senare.
Njut av möjligheten att gräva, scenera, begå, trycka, dra, lösa konflikter och till och med se dragförfrågningar om GitHub direkt från inuti Atom. För att öppna det här fönstret lägger du markörens dödpunkt på din redaktör på höger sida och letar efter en flik med en pil. Bom!
Jag är en stor fan av den här eftersom det gör att man tittar på filen som är en vind. Inom Atom har du tillgång till din historia om ett spårat Git-projekt; plus det är allt visuellt.
Git Time Machine gör att titta över filen diffs kul igen och mindre rörig än att försöka inspektera via kommandoraden. Det visar en visuell plot av förbindelser med den aktuella filen över tiden och du kan klicka på tidslinjen eller svänga över ett märke och se alla förpliktelser för ett visst tidsintervall. Du har möjlighet att återställa kompletta filer eller körsbärsvallinje för rad. Det är ett fantastiskt paket som ingår i Atom-arbetsflödet.
Att söka efter webbläsarsupport har aldrig varit enklare och allt gjort direkt från Atom tack vare Kan jag använda paketet.
Skriv "kan jag använda" från din kommandotolett (Cmd + Skift + P) Och börja skriva in egenskapen eller sökordet du behöver för stöd i ditt projekt. Ett mycket effektivt sätt att använda den här tjänsten vs att använda webbläsaren.
Paket är inte det enda alternativet du måste göra Atom mer magisk än standardinstallationen. Det finns många fler alternativ som kan hittas direkt från kärninställningarna för att göra skrivkoden till en trevlig upplevelse.
Under Atom s inställningar visa att du kan ange dina förpackningsinställningar.
De Mjuk omslag alternativet kommer att linda in linjer som är för långa för att passa i ditt nuvarande fönster. Om det här alternativet är avaktiverat blöder linjerna bort från sidan av skärmen så att du måste rulla fönstret horisontellt för att se resten av innehållet.
Alternativet "Sök och ersätt" har funnits i kodredigerare för alltid och av goda skäl. För att söka inom din aktuella fil kan du trycka på cmd + f, skriv sedan din söksträng och tryck på stiga på (eller cmd + g eller den Hitta nästa knappen) flera gånger för att cykla igenom alla matchningar i den filen.
De Hitta och ersätta panelen innehåller också knappar för att växla fallkänslighet, utföra regelbunden expression matchning och scoping sökningen till val. Du kan också hitta och ersätta genom hela ditt projekt om du anropar panelen med cmd + chift + f.
Atom har kommandot atom - portabel som tillhandahåller ett kommandoradsparameteralternativ för inställning av bärbart läge. Jag har personligen haft fruktansvärd tur med detta alternativ och uppriktigt sagt är docsna på detta ämne fortfarande mycket behov av en omskrivning.
"Portabelt läge är mest användbart för att ta Atom med dig, med all din anpassade inställning och paket, från maskin till maskin. Det kan ta form av att hålla Atom på en USB-enhet eller en molnlagringsplattform som synkroniserar mappar till olika maskiner, som Dropbox. "
Mitt förslag är att symbolisera din ~ / .Atom katalog till Dropbox (eller annan tjänst, plats etc.) och kalla det en dag. Det här är katalogen som lagrar alla dina inställningar, paket, konfigurationer och sådant som gör Atom personlig för din användning. Du kan fortfarande installera Atom från vilken som helst maskin, precis som du normalt skulle, förutom att du använder .atom som en symlink hänvisad till en annan plats du väljer.
Om det bärbara läget eller användningen av symlink-tricket inte lockar kan du överväga att ge synkroniseringsinställningarna ett steg. Detta Atom-paket kommer att synkronisera inställningar, nyckelkartor, användarstilar, init-script, utdrag och installerade paket över Atom-instanser.
Om du vill tillämpa en anpassad stiländring utan att skapa ett helt tema kan du lägga till dina anpassade stilar till styles.less filen i din ~ / .Atom katalog.
För att öppna den här filen i Atom-redigeraren välj Atom> Stylesheet. Det enklaste sättet att se vilka klasser som finns att använda är att inspektera DOM manuellt med utvecklarverktygen via kommando + alternativ + i på samma sätt som du gör för Chrome.
Jag har bara skrapat ytan om paket, plugins och så vidare, men om du har ytterligare förslag, kommentarer eller tankar uppmanar jag dig att lämna en kommentar nedan och eventuella relevanta länkar som är relevanta för denna diskussion. Om du är stor på listor än definitivt checka det här repet på GitHub som heter Awesome Atom; En kurerad lista över underbara Atom-paket och resurser. Som en tidigare Sublim användare har jag varit helt nöjd med mitt val att flytta till Atom och det kommer att fortsätta att vara min redaktör för val under överskådlig framtid. Lycklig kodning!
Accentsconagua