Se ei ole sattumaa, että Atomi, Githubin luoma lähdekoodieditori on suosittu web-kehitysyhteisössä. Se ei ole vain helposti laajennettavissa tuhansia Atom-paketteja, ja siinä on a laaja kielituki, mutta lähes jokainen osa on muokattavissa käyttäjä.
Vahvistamalla Atomin Lohkojen ominaisuus, voit tehdä koodauksen työnkulun tuottavammaksi toistuvat koodinpätkät voit vähentää työsi toistuvaa osaa. Tässä viestissä näytän sinulle, miten voit käytä Atomin sisäisiä koodinpätkiä, ja luo omia mukautettuja katkelmia.
Käytä sisäänrakennettuja koodinpätkiä
Oletuksena Atom tulee sisäänrakennetut koodinpätkät, joista jokainen on sidottu soveltamisalaan jotka kuuluvat tiettyyn tiedostotyyppiin. Jos esimerkiksi käsittelet tiedostoa, jossa on .js Laajennus, vain kyseiseen tiedostoon kuuluvat JavaScript-laajuiset katkelmat.
Nähdä kaikki käytettävissä olevat katkelmat nykyisen tiedostotyypin osalta paina Alt + Shift + S. Jos valitset katkelman avattavasta luettelosta ja napsautat sitä, Atom lisää täyden katkelman editoriinsi ilman muuta hässäkkää.
Jos olet jo tietoinen vaihtoehdoista, sinun ei tarvitse ladata koko luetteloa. Kun aloitat kirjoittamisen, Atom tulee näkyviin automaattisen täydennyksen tulokset -ruutu ylöspäin, joka sisältää käytettävissä olevat koodinpätkät, jotka kuuluvat tiettyyn laajuuteen, ja merkkijono, jonka olet kirjoittanut tähän mennessä.
Esimerkiksi, jos kirjoitat h merkki a .html tiedosto, pudotusvalikko, jossa on kaikki sisäänrakennetut HTML-koodinpätkät h ilmestyy.
Napsauttamalla mitä tahansa vaihtoehtoa Atom tulee liitä koko HTML-tunniste (esimerkiksi. ) ja sijoita kohdistin alku- ja sulkumerkkiin.
Jos et halua häiritä avattavasta luettelosta, voit saavuttaa saman tuloksen kirjoittamalla H1, ja lyömällä Tab tai Enter - molemmat avaimet aseta koko koodinpätkä kuuluvat katkelman etuliitteeseen.
Mukautettujen koodinpätkäiden lisääminen
1. Etsi kokoonpanotiedosto
Jos haluat lisätä omia mukautettuja koodinpätkiä Atomiin, sinun on ensin löydettävä konfigurointitiedosto kutsutaan snippets.cson tuo on CoffeeScript Object Notation tiedosto.
Klikkaa Tiedosto> Leikat ... yläreunassa, ja Atom avaa snippets.cson tiedosto, johon voit lisätä omia mukautettuja katkelmia.
2. Etsi oikea laajuus
Tarvitset neljä asiaa jotta voit lisätä mukautetun katkelman:
soveltamisalan nimi
katkelman nimi
etuliite joka toimii katkelman kahvana
osaa
Nimi, etuliite ja katkelman runko (2-4) riippuvat pelkästään teistä, kuitenkin löytää laajuuden nimi (1) ennen mukautettujen katkelmien lisäämistä.
Voit löytää tarvitsemasi laajuuden napsauttamalla Tiedosto> Asetukset valikkorivin valikosta, etsi sitten paketit välilehti Asetusten välillä. Suorita täältä haun laajuus, jota tarvitset, esimerkiksi jos haluat lisätä koodinpätkiä HTML-kieleen, kirjoita HTML hakupalkkiin.
Klikkaa kielen tukipaketti valittua kieltä ja avaa omat asetukset. Joukossa Grammatiset asetukset, voit nopeasti löytää soveltamisalan nimen, kuten alla olevassa kuvassa näkyy.
Seuraavassa on joitakin soveltamisaloja, joita haluat käyttää Atom-projekteissasi:
Tavallinen teksti: .text.plain
HTML: .text.html.basic
CSS: .source.css
Sass: .source.sass
VÄHEMMÄN: .source.css.less
JavaScript: .source.js
PHP: .text.html.php
Python: .source.python
java: .source.java
Älä unohda, että sinun täytyy lisää piste (.) soveltamisalan nimen edessä käyttää sitä snippets.cson tiedosto.
3. Luo yhden rivin koodinpätkät
Luo a yhden rivin koodinpätkä, sinun on lisättävä katkelman laajuus, nimi, etuliite ja kappale snippets.cson tiedostoa käyttäen seuraavaa syntaksia:
'.text.html.basic': 'Widgetin nimi': 'etuliite': 'wti' body ':''
Tämä esimerkkikappale lisää a tunniste widget-title luokka HTML-laajuuteen. Voit lisätä minkä tahansa muun yhden rivin koodinpätkän Atom-editoriin tämän syntaksin jälkeen.
Kun olet tallentanut määritystiedoston, kun olet kirjoita etuliite ja paina Tab-näppäintä, Atom liittää siihen liittyvän fragmentin rungon koodieditoriin. Leikkauksen nimi (esimerkissä Widget-otsikko) tulee näkyviin automaattisen täydennyksen tuloslaatikkoon.
4. Luo monilinjainen koodinpätkä
Monirivinen koodinpätkä käytä hieman eri syntaksi. Sinun täytyy lisätä samat tiedot kuin yhden rivin pätkät - laajuus, nimi, etuliite ja katkelman runko.
Tässä on erilainen se, että sinun täytyy sijoittaa katkelman runko parin sisällä """ (kolme kaksinkertaista lainausta).
Voit edelleen helpottaa mukautettujen koodinpätkäsi käyttöä lisäämällä välilehti pysähtyy katkelman runkoon. Välilehdet osoittavat paikat, joissa käyttäjä voi navigoida käyttämällä Tab-näppäintä. Kun välilehti pysähtyy, voit tallentaa tekstin navigoinnin ajan.
Voit lisätä välilehtiä käyttämällä $ 1, $ 2, $ 3,… syntaksi. Atom sijoittaa kohdistimen siihen paikkaan, jonka se löytää $ 1, sitten voit siirtyä $ 2 ja paina sitten Tab-näppäintä $ 3, ja niin edelleen.
Atomilla voit lisää lisätietoja käyttämällä katkelmia valinnaiset parametrit. Tämä ominaisuus voi olla hyödyllinen, jos joku muu käyttää myös editoria ja haluat kertoa heille katkelman tarkoituksen tai jos sinulla on niin monimutkaisia mukautettuja katkelmia, joita sinun tarvitsee lisätä muistiinpanoihin.
Valinnaisten parametrien arvot ovat näytetään automaattisen täydennyksen tulokset -ruutuun joka tulee esiin, kun aloitat etuliitteen kirjoittamisen. Alla olevassa esimerkissä lisäsin kuvauksen & a Lisää… linkki edelliseen Widget-otsikko mukautettu katkaisu:
'.text.html.basic': 'Widgetin nimi': 'etuliite': 'wti' body ':'"kuvaus": "Voit lisätä widgetin nimen tämän katkelman kanssa sivupalkkisi widgetiin." descriptionMoreURL: 'http://hongkiat.com'
Kun käyttäjä alkaa kirjoittaa etuliitteen WTI, ylimääräiset tiedot (kuvaus + linkki) tulevat näkyviin automaattisen täydennystuloksen laatikon alaosaan. Katsokaa muut valinnaiset parametrit voit lisätä ylimääräisiä tietoja mukautettuihin katkelmiin.
