Atom, kodredigeraren från Github, ökar i popularitet dag efter dag. Utvecklare föredrar denna kodredigerare eftersom den är lätt, den har en låg inlärningskurva och den kan utökas med en mängd användbara Atom-paket.

Till en början användes Atom som ett internt verktyg för Github, men senare släpptes det som ett verktyg med öppen källkod för allmänheten. Samhället reagerade snabbt och det har nu ett blomstrande ekosystem av användare och bidragsgivare.

Som en färdig redigerare för flera plattformar fungerar Atom på OS X, Windows och Linux. Den har smart autokomplettering, användbart för dem som snabbt vill skriva ren kod, och den har en bekväm filläsare där du snabbt kan öppna och lägga till filer.

Om du strävar efter att bli en Atom-poweranvändare, här är en lista över de bästa Atom-paketen som kommer att öka din produktivitet och göra din kodning mycket enklare.

Fortsätt att läsa mer om detta ämne i den här artikeln skapad av vårt team på wpDataTables, WP-plugin nummer 1 för att skapa tabeller och diagram.

Ta reda på vilka Atom-paket som är värda att använda och varför.

De bästa Atom-paketen för att slutföra din kodningskonfiguration

Vissa säger att Atom är den bästa allmänna kodredigeraren på marknaden. Det är verkligen jämförbart med sådana som Sublime Text och Notepad++, med sina egna fördelar. Kodeditorn är packad med alla möjliga funktioner som förbättrar kodningen, bland vilka vi bör nämna:

Det är plattformsoberoende – oavsett vilket operativsystem du använder så fungerar Atom bara
Den har en inbyggd pakethanterare – om du vill installera de bästa Atom-paketen behöver du inte hantera dem
Smart automatisk kompletteringsfunktion — du kan skriva kod mycket snabbare med den här funktionen
Filsystemsökning — säg adjö till att bläddra igenom filer för länge, eftersom du kan göra allt inom ett enda fönster
Flera rutor — du kan dela upp Atoms gränssnitt i flera rutor
Enkelhet — Atoms största styrka är att den är väldigt enkel att använda

Som du kan säga är Atom redan utsmyckad med allt du behöver för att få kodning. För mer specialiserade behov kan du vända dig till community-bidragspaket, som kommer att förklaras i nästa avsnitt.

Vilka är de bästa Atom-paketen och varför behöver vi dem?

Atom-paket är externa program och kodbitar som lägger till extra funktioner till huvudprodukten och på så sätt förbättrar dess kapacitet. Med Atom kallas ett paket ibland även för en "plugin" eller "extension".

Genom att lägga till Atom-paket till huvudprogrammet blir Atom mycket effektivare och hjälper dig att göra mer med mindre ansträngning. Alla användare kan göra sina egna val vad gäller vilka Atom-paket som ska användas.

Det är enkelt att ladda ner och installera paketen och de kan avsevärt förbättra användarupplevelsen av huvudprogrammet. Många av dem kanske inte gäller ditt arbetsflöde eller språken du arbetar med, så du bör bara installera de bästa Atom-paketen för dig.

Men först, låt oss titta på hur man installerar ett Atom-paket.

Hur man installerar Atom-paket

När du installerar ditt första Atom-paket är det bäst att läsa stegen noggrant. Du kommer sannolikt att lära dig dem utantill och behöver inte använda den här listan varje gång. När du har valt ut de bästa Atom-paketen för dig, här är två sätt att installera dem:

Klicka på Arkiv > Inställningar. Detta kommer att visa inställningsvyn. Klicka här på Installera och skriv namnet på paketet du planerar att installera. En genväg för inställningsvyn är ctrl + ,(ctrl och komma) på PC och cmd + på Mac.
Du kan använda kommandopaletten på samma sätt. Få åtkomst till den genom att trycka på ctrl+ Shift + P på PC eller cmd+ Shift + P på Mac. Skriv "installera paket" här. Sedan kan du använda inställningsvyn enligt ovan.

Vissa paket ingår som standard med Atom. De kallas Core Packages och kan inaktiveras. Det rekommenderas dock att inte inaktivera dem, eftersom de påverkar redigerarens övergripande beteende. De andra paketen du kommer att installera kommer att listas under Gemenskapspaket.

En lista över de bästa Atom-paketen att installera direkt

Atom är mångsidig, och det skulle vara synd att inte utöka det med nya funktioner bara några klick bort.

Som sagt, det finns över 8 000 paket där ute och att fatta ett beslut kan vara väldigt svårt om du inte vet exakt vad du vill ha.

För att hjälpa dig i din sökning, se vår lista över de bästa Atom-paketen nedan:

Emmet

Emmet är ett av de bästa Atom-paketen eftersom det är universellt användbart på många språk.

Det är ett kodavsnittsverktyg som hjälper frontendutvecklare att snabbt skapa HTML och CSS, och det kan också användas för att skapa anpassade kodavsnitt för allt annat. För att göra det använder Emmet förkortningar som konverteras till längre textsträngar.

Fråga Stack

Ingen utvecklare tycker att det är bekvämt att byta från webbläsaren till redigeraren och vice versa under hela dagen. Ask Stack Overflow är ett paket som låter dig söka efter Stack Overflow och få dina kodexempel direkt i Atom, utan att behöva leta igenom svaren för att hitta dem själv.

git-skyll

Ett annat av de bästa Atom-paketen, git-blame låter dig växla kommentarer i Atom-redigeraren. För att göra det behöver du bara trycka på ctrl + B eller högerklicka på din fil och välj sedan Git Blame.

Se till att du gör detta i rätt fil; Annars kan du byta fel objekt eller komprimera dina mappar i en sidofält med trädvy.

Linter

Detta är ett paket som inte gör mycket på egen hand, men det ger en grund som du kan använda inom Atom för att lägga till linter-plugins snabbare. Den har stöd för de flesta språk och den fungerar med HTML, HAML, JSON, CSS, SCSS, Java och mer.

Linter har plugins för back-end-språk också. Det finns en fullständig lista på paketets hemsida.

Sammantaget används linters för att förbättra kodens kvalitet och minska antalet fel.

git-tidsmaskin

Ibland kan det vara till stor hjälp att ha en bild av alla dina tidigare handlingar precis framför dig. Det är därför git-time-machine förtjänar att vara med i listan över de bästa Atom-paketen på marknaden.

Den låter dig se den visuella handlingen för dina filbekräftelser, och den är också interaktiv. Du kan klicka på tidsdiagrammet och se commits inom ett specifikt tidsintervall.

Atom försköna

Rensa kod är mycket lättare att gå igenom och korrigera om några buggar påträffas. Att göra det läsbart utan att kräva mycket ansträngning är möjligt med Atom Beautify, ett Atom-paket som kräver ett enda klick för att rensa upp hundratals rader kod.

De som arbetar i större team kan tycka att detta paket är mycket användbart, eftersom koden kommer att formateras på ett standardsätt som alla kan läsa utan problem. Paketet stöder olika språk, inklusive HTML, CSS, Python, Ruby, C och mer.

Turbo JavaScript

Om du använder Atom för att koda i JavaScript kan det här paketet inte saknas i din lista. Det låter dig använda JavaScript-kodavsnitt som förbättrar ditt arbetsflöde och optimerar din kod.

Dessa utdrag fungerar bra för ECMAScript 6, och de är mycket lätta att lära sig eftersom deras namn är intuitiva, korta och catchy. Ett exempel skulle vara "om" som står för ett helt "om"-block.

språk-flytande

Front-end-utvecklare som använder Shopifys mallspråk Liquid kan använda sig av language-liquid för att markera sin syntax.

Atom har ett inkluderat markeringsalternativ som standard, men det är inte tillgängligt när du använder Liquid. Det är här språk-vätskan kliver in och räddar användarna från att slösa timmar på att kontrollera sin kod.

Om du använder ett annat språk som behöver extra stöd för syntaxmarkering, försök att söka efter ett liknande paket med ett annat språknamn.

Markera valda

På samma sätt som syntaxmarkering, men med en annan funktion, används Highlight Selected för att peka ut förekomsten av ett specifikt ord i din kod.

Du kan välja vilket ord som helst genom att dubbelklicka på det och Markera vald kommer att visa dig alla andra platser där ordet förekommer. Enkelt men ändå extremt bekvämt!

Hej, visste du att data också kan vara vackert?

wpDataTables kan göra det så. Det finns en bra anledning till varför det är WordPress-plugin nummer 1 för att skapa responsiva tabeller och diagram.

Ett faktiskt exempel på wpDataTables i naturen

Och det är verkligen lätt att göra något så här:

Du tillhandahåller tabelldata
Konfigurera och anpassa den
Publicera det i ett inlägg eller sida

Och det är inte bara snyggt, utan också praktiskt. Du kan skapa stora tabeller med upp till miljontals rader, eller så kan du använda avancerade filter och sökning, eller så kan du gå vilda och göra det redigerbart.

"Ja, men jag gillar Excel för mycket och det finns inget sådant på webbplatser". Ja, det finns. Du kan använda villkorlig formatering som i Excel eller Google Sheets.

Sa jag att du också kan skapa diagram med dina data? Och det är bara en liten del. Det finns många andra funktioner för dig.

Teletyp

Teletype förtjänar sin plats i listan över de bästa Atom-paketen eftersom det ger något nytt till bordet: låter dig och ditt team samarbeta i en arbetsyta.

Teletype låter dig dela din kod med en annan programmerare och ger dem tillgång till att redigera den i realtid. I vissa fall är detta mycket användbart eftersom nybörjare programmerare uppmuntras att skugga mer erfarna programmerare och lära sig deras sätt att hantera ett projekt.

Teletype kan också användas för att göra teambaserade samarbeten, så det är inte begränsat till att dela kod med en enda person, utan med flera. Detta paket är ett resultat av GitHub-teamets kreativitet och innovation.

Sedan 2017 är Teletype bland favoritpaketen för många utvecklare där ute, och uppmuntrar koncept som parprogrammering och social kodning.

Advanced-open-fil (av Osmose)

Advanced Open File är ett Atom-paket som hjälper användare att öppna filer och bläddra i mappar enklare. Du kan också skapa nya i Advanced Open File, vilket minskar tiden som behövs för att göra det i Atom. Du kommer åt den genom att trycka på Alt + cmd/ctrl + O.

Mindre än snedstreck

De som använder HTML mer jämfört med andra språk bör ge Less Than-Slash ett försök. Från de bästa Atom-paketen skiljer Less Than-Slash sig genom sin enkelhet och effektivitet.

Paketet lägger till en avslutande HTML-tagg efter att du skrivit </. Dessutom kan paketet känna igen vilken tagg som kräver stängning och den lägger till den automatiskt samtidigt som den ignorerar taggar som eller liknande.

Du kan också ange alla taggar som du föredrar att ignoreras i paketets inställningspanel. Dessutom kan du dra nytta av alternativet returmarkör, som skickar markören till början av den avslutande taggen, vilket gör omskrivningen mindre krånglig.

Arkivikoner

Atom är programmerad att visa filnamnet i trädvyn när du öppnar redigeringsfönstret. Detta upplevs ibland som ett besvär, med tanke på att vissa människor föredrar att veta namnet på filen de arbetar med i filikonen.

Som namnet antyder är File Icons Atom-paketet som gör precis det. Det är en liten förändring med stor effekt, så du bör prova och se hur ditt arbetsflöde förbättras.

Panellayout Plus

Står du inför problem med att organisera rutor i Atom? Page Layout Plus låter dig styra fördelningen av varje ruta, vilket också ger dig möjlighet att använda genvägar. Med hjälp av genvägarna kan du hoppa mellan kolumner eller ställa in layouter.

Git-Plus-paket

Att vidta åtgärder i Gitis ganska svårt eftersom du alltid behöver byta till terminalen. Git-Plus hjälper dig att utföra Git-åtgärder utan att behöva byta för att göra det. Det är baserat på kortkoder och du behöver bara trycka på cmd/ctrl + Shift + H. Alla Git-kommandon kan köras med detta paket.

Pigment (av abe33)

Inom webbdesign är färgkoder allt. Pigments är ett bekvämt paket som skannar din fil och upptäcker de befintliga färgkoderna som sedan visas. Pigment täcker HEX, RGB och HSL.

Om du arbetar med färgomvandlingsfunktioner som LESS eller Stylus CSS kan Pigments hjälpa dig också, eftersom det har färdiga funktioner för det. Du kan anpassa markörtypen eller ställa in olika färgord för varje fil.

Färgväljare

När vi pratar om de bästa Atom-paketen när det gäller färghantering, förtjänar Color Picker en plats här. Du kan justera färgvärden mycket snabbare i en CSS-fil, vilket är en användbar funktion för dem som arbetar i webbdesignbranschen.

Färgväljaren kommer att dyka upp på skärmen genom att trycka på cmd/ctrl + Shift + C. Att ta reda på vilka färger du använder med sådan lätthet minskar tiden som krävs för att justera nyanser.

Minikarta (med atom-minikarta)

För dem som är bekanta med Sublime Text är en minikarta en användbar funktion för utvecklare som gillar att se en förhandsvisning av sitt filinnehåll i kodredigeringsfönstret. Att ha en av dessa på skärmen hjälper utvecklare att behålla sin riktning och fokus.

Minimap är ett paket för Atom som låter dig göra detsamma. Förutom dess huvudfunktioner kan du också visa bokmärken, lintermarkörer och pigmentfärger.

TODO-Show

Vill du ha alla TODO-, FIXME- och CHANGED-kommentarer listade på din skärm? Om ja, använd TODO-Show. Det är ett coolt paket som är väldigt praktiskt för utvecklare som föredrar att skriva sina anteckningar direkt i koden.

Bland de bästa Atom-paketen verkar detta vara ett av de mest användbara. Tänk på att du även kan skapa anpassade kommentarer utöver de förgjorda.

Projektledare

Att snabbt växla mellan projekt är inte Atoms starka sida. Det är därför du bör prova detta paket som låter dig byta mycket enklare.

Spara dina projekt med kommandopaletten genom att skriva i Project Manager: Save Project. Sedan, när du har sparat dem, kan du filtrera dina projekt och enkelt växla mellan dem.

Atomflikar exponerade

Detta Atom-paket ger dig möjligheten att ta över öppna filer i programmet. Om du är bekant med Macs Mission Control är det ganska likt. Paketet kommer att visa de aktiva rutorna och en förhandsvisning av varje flik.

Slutliga tankar om de bästa Atom-paketen

Även om den här listan borde ge dig tillräckligt att tugga på, är den knappast uttömmande för alla de bästa Atom-paketen som finns. Kom ihåg att det finns över 8 000 av dem, så ta dig tid att hitta de som passar bäst för de språk du använder.

Atom är tillräckligt kraftfull utan alla dessa paket, men dessa lättinstallerbara Atom-paket som är tillgängliga gratis kommer att utöka sina funktioner för att göra det mer bekvämt att använda.

Om du gillade att läsa den här artikeln om bästa Atom-paket, bör du kolla in den här om Sublime Text-teman.

Vi skrev också om några relaterade ämnen som Sublime Text-plugins och hur man blir en frontend-utvecklare.

Inspelningskälla: wpdatatables.com