Egyéni kódrészletek hozzáadása az Atomhoz

Nem véletlen, hogy Atom, a Github által létrehozott forráskódszerkesztő népszerű a webes fejlesztői közösségben. Ez nem csak könnyen bővíthető több ezer Atom csomaggal, és a széles nyelvi támogatás, de szinte minden része testreszabható a felhasználó által.

Az Atom használatával A töredékek funkciója, a kódolási munkafolyamatot hatékonyabbá teheti ismétlődő kódrészletek újrafelhasználása csökkentheti munkájának ismétlődő részét. Ebben a bejegyzésben megmutatom, hogyan lehet használja az Atom beépített kódrészleteit, és hozzon létre saját egyéni részleteket.

Használja a beépített kódrészleteket

Alapértelmezés szerint Atom jön beépített kódrészletek, amelyek mindegyike egy hatályba egy bizonyos fájltípushoz tartozik. Például, ha egy fájlnál dolgozik .js kiterjesztés, csak a JavaScript hatóköréhez tartozó töredékek lesznek elérhetők.

Látni az összes rendelkezésre álló részlet az aktuális fájltípushoz nyomja meg az Alt + Shift + S billentyűt. Ha egy csomópontot választ ki a legördülő listából, és rákattint rá, az Atom a teljes részletet a szóvivőjébe további gond nélkül helyezi be.

Ha már ismeri a lehetőségeket, nem feltétlenül kell betöltenie az egész listát. Amikor begépel, az Atom egy automatikus kiegészítés eredménymezője fel, amely tartalmazza az adott hatókörhöz tartozó elérhető kódrészleteket és az eddig beírt karakterláncot.

Például, ha beírja a h karaktert a .html fájl, egy legördülő lista az összes beépített HTML-töredékkel h meg fog jelenni.

Ha bármelyik opcióra kattint, az Atom lesz illessze be a teljes HTML-címkét (például. ) és helyezze a kurzort a kezdő- és zárócímke közé.

Ha nem akarja a legördülő listában zavarni, ugyanazt az eredményt érheti el a gépeléssel h1, és megnyomja a Tab vagy Enter billentyűt - mindkét kulcsot helyezze be a teljes kódrészletet a kódrészlet előtagjához tartozik.

Egyéni kódrészletek hozzáadása

1. Keresse meg a konfigurációs fájlt

Saját egyéni kódrészletek hozzáadásához az Atom-hoz először meg kell találnia a a konfigurációs fájl neve snippets.cson az egy CoffeeScript objektum jelölés fájl.

Kattintson a Fájl> Kivágások… menüben, és az Atom megnyitja a snippets.cson fájl, amelyhez hozzáadhatod saját egyéni részleteit.

2. Keresse meg a helyes alkalmazási területet

Szükséged lesz négy dolog az egyéni részlet hozzáadása:

A a hatókör neve
A a kódrészlet neve
A előtag amely a töredék fogantyújaként fog működni
A a részletrészlet

A nevet, az előtagot és a részletrészletet (2-4) kizárólag Öntől függ, de szükség van rá keresse meg a hatókör nevét (1), mielőtt hozzáadná az egyéni részleteket.

Ha meg szeretné találni a szükséges alkalmazási kört, kattintson a gombra Fájl> Beállítások menü a felső menüsorban, majd keresse meg a csomagok fül között a Beállítások között. Itt futtasson keresést a szükséges hatókörre, például ha kódrészleteket szeretne hozzáadni a HTML nyelvhez, írja be HTML a keresősávba.

Kattintson a nyelvi támogatási csomag a kiválasztott nyelvre, és nyissa meg saját beállításait. Között Grammatikai beállítások, gyorsan megtalálhatja a hatókör nevét, amint az az alábbi képen látható.

Íme néhány olyan terület, amelyet az Atom projektjeiben használhat:

Egyszerű szöveg: .text.plain
HTML: .text.html.basic
CSS: .source.css
Sass: .source.sass
KEVÉSBÉ: .source.css.less
JavaScript: .source.js
PHP: .text.html.php
Piton: .source.python
Jáva: .source.java

Ne felejtsük el, hogy szükséged lesz rá pont hozzáadása.) a hatókör neve előtt annak használatához snippets.cson fájl.

3. Hozzon létre egysoros kódrészleteket

A létrehozásához a egysoros kódrészlet, hozzá kell adnia a hatókört, a nevet, az előtagot és a töredék testét snippets.cson fájl a következő szintaxis használatával:

 '.text.html.basic': 'Widget-cím': 'előtag': 'wti' body ':''

Ez a példa részlet a

címke a `Widget-title` osztályt a HTML hatókörre. Ezt a szintaxist követve hozzáadhat bármely más egysoros kódrészletet az Atom szerkesztőhöz.

Miután elmentette a konfigurációs fájlt írja be az előtagot és nyomja meg a Tab billentyűt, Az Atom beilleszti a hozzátartozó töredéket a kódszerkesztőbe. A kódrészlet neve (a példában `Widget-cím`) megjelenik az automatikus kiegészítés eredménymezőben.

4. Többsoros kódrészletek létrehozása

Többsoros kódrészletek használjon egy kicsit más szintaxist. Ugyanazokat az adatokat kell hozzáadnia, mint az egysoros kódrészletekhez - a hatókör, a név, az előtag és a részlet részleteit.

Itt különbözik az, hogy el kell helyezni a részletrészletet egy páron belül „”” (három kettős idézet).

 '.text.html.basic': 'Image Link': 'prefix': 'iml' body ': "" "     
 „””

Ha hozzá szeretne adni több egyéni részlet ugyanazon hatókörbe, adja meg a hatókör nevét csak egyszer, majd felsorolja a részleteket egyenként:

 '.text.html.basic': 'Widget-cím': 'előtag': 'wti' body ':'"Image Link": "előtag": "iml" body ":" ""     
 „””

5. Tabulátorok hozzáadása

Az egyéni kódrészletek használatát tovább könnyítheti hozzá a fül megáll a részletrészlethez. A tabulátorok jelzik azokat a helyeket, ahol a felhasználó a Tab gomb segítségével navigálhat. A tabulátor leállítása során elmentheti a szöveges navigációhoz szükséges időt.

Hozzáadhat tabulátorokat használni a $ 1, $ 2, $ 3,… szintaxis. Az Atom a kurzort az általa talált helyre helyezi $ 1, akkor ugorhat $ 2 a Tab billentyűvel, majd a $ 3, stb.

 '.text.html.basic': 'Image Link': 'prefix': 'iml' body ': "" "     
 „””

6. Adja meg az opcionális paramétereket

Atom lehetővé teszi adjunk hozzá további információkat a töredékeihez opcionális paraméterek. Ez a funkció akkor hasznos lehet, ha valaki más is használja a szerkesztőt, és szeretné tudni, hogy a töredék célja van, vagy ha olyan bonyolult egyedi részleteket tartalmaz, amelyekkel megjegyzéseket kell hozzáadni hozzájuk.

Az opcionális paraméterek értéke megjelenik az automatikus kiegészítés eredménymezőben ez akkor jön létre, amikor elkezdi az előtag írását. Az alábbi példában egy leírást adtam és a Több… hivatkozás az előzőre Widget-cím egyéni részlet:

 '.text.html.basic': 'Widget-cím': 'előtag': 'wti' body ':'"description": "Ezzel a részletgel hozzáadhat egy widget-címet az oldalsáv-widgethez." descriptionMoreURL ": 'http://hongkiat.com'

Amikor a felhasználó elkezdi az előtag írását WTI, az extra információk (leírás + link) az automatikus kiegészítés eredménymezőjének alján jelennek meg. Nézd meg a egyéb választható paraméterek hozzáadhat további információkat az egyéni részletekhez.