Hoe stel ik inhoud in een tag in?

Gebruik hiervoor () haakjes, d.w.z. div+p(Hallo wereld) nadat we op Tab hebben gedrukt, krijgen we

Hallo wereld

Hoe voeg ik een ID-attribuut toe aan een tag?

Om de id in emmet in te stellen gebruiken we #, div#firs_id.first_class die we krijgen

Er is een ophoogfunctie, we moeten bijvoorbeeld de id van tag a vullen van 1 tot en met 5, hiervoor gebruiken we de volgende constructie div>a#$*5 waardoor alle id's van tag a gevuld worden met waarden van 1 tot 5

Ik zou ook willen toevoegen dat Emmet op dezelfde manier met CSS kan werken, alleen in Sublime Text moet de CSS-syntaxis worden geselecteerd, Emmet kent alle CSS-eigenschappen en schrijft gewoon de eerste letter van de eigenschap en drukt op Tab, of je kunt ook specificeer de eerste letter en de vereiste waarde, m20 + Tab levert bijvoorbeeld de volgende resultaatmarge op: 20px;

Als iemand ineens vragen heeft, stel ze dan in de reacties, ik beantwoord ze graag.

WAARSCHUWING: Wanneer de plug-in is geïnstalleerd, downloadt deze automatisch het vereiste PyV8-binaire bestand, dus u moet even wachten (zie bericht op de statusbalk). Als u problemen ondervindt met de automatische PyV8-lader, probeer deze dan handmatig te installeren.

Beschikbare acties

• Afkorting uitvouwen – Tab of Ctrl+E
• Interactief “Afkorting uitvouwen” - Ctrl+Alt+Enter
• Match tagpaar naar buiten – ⌃D (Mac) / Ctrl+, (pc)
• Match tagpaar naar binnen – ⌃J / Shift+Ctrl+0
• Ga naar Overeenkomend paar – ⇧⌃T / Ctrl+Alt+J
• Omloop met afkorting - ⌃W / Shift+Ctrl+G
• Ga naar Punt bewerken - Ctrl+Alt+→ of Ctrl+Alt+←
• Selecteer Artikel – ⇧⌘. of ⇧⌘, / Shift+Ctrl+. of Shift+Ctrl+,
• Schakel commentaar in - ⇧⌥/ / Shift+Ctrl+/
• Tag splitsen/samenvoegen - ⇧⌘" / Shift+Ctrl+`
• Tag verwijderen – ⌘" / Shift+Ctrl+;
• Afbeeldingsgrootte bijwerken - ⇧⌃I / Ctrl+U
• Wiskundige uitdrukking evalueren - ⇧⌘Y / Shift+Ctrl+Y
• Reflecteer CSS-waarde – ⇧⌘R / Shift+Ctrl+R
• Afbeelding coderen/decoderen naar gegevens:URL – ⇧⌃D / Ctrl+"
• Naam van tag wijzigen – ⇧⌘K / Shift+Ctrl+"

• Verhogen met 1: Ctrl+
• Verlagen met 1: Ctrl+↓
• Verhogen met 0,1: Alt+
• Verlagen met 0,1: Alt+↓
• Verhogen met 10: ⌥⌘ / Shift+Alt+
• Verlagen met 10: ⌥⌘↓ / Shift+Alt+↓

Ondersteuning voor extensies

Sneltoetsen overschrijven

Sublime Text is een geweldige teksteditor met veel functies en acties. De meeste van deze acties zijn gebonden aan sneltoetsen, dus het is bijna onmogelijk om handige plug-in-snelkoppelingen te bieden voor plug-ins van derden.

Als u niet tevreden bent met de standaardtoetsenbordindeling, kunt u individuele sneltoetsen uitschakelen met de voorkeur uitgeschakeld_keymap_actions van het bestand Emmet.sublime-settings.

Gebruik een door komma's gescheiden lijst met actienamen waarvan de standaardsneltoetsen moeten worden uitgeschakeld. Als u bijvoorbeeld de sneltoetsen Ctrl+E (“Expand Abbreviation”) en Ctrl+U (“Update Image Size”) wilt vrijgeven, moet u de volgende waarde instellen:

"disabled_keymap_actions": "expand_abbreviation, update_image_size"

U moet het bestand Default (Your-OS-Name).sublime-keymap raadplegen om actie-ID's op te halen (zoek naar args/action key).

Om alle standaardsnelkoppelingen uit te schakelen, stelt u de waarde in op alles:

"disabled_keymap_actions": "alles"

Niet dat als u een dergelijke actie uitschakelt en u uw eigen sneltoets maakt, u zou niet moeten gebruik de context emmet_action_enabled.ACTION_NAME omdat dit de sleutel is die actie uitschakelt.

Hoe u afkortingen kunt uitbreiden met Tab in andere syntaxis

Emmet breidt afkortingen alleen uit in beperkte syntaxis: HTML, CSS, LESS, SCSS, Stylus en PostCSS. De reden om de Tab-handler te beperken tot een beperkte syntaxislijst is omdat deze native Sublime Text-fragmenten verbreekt.

Als je wilt afkorten met Tab in andere syntaxis (bijvoorbeeld JSX, HAML enz.), moet je de instellingen voor je sneltoetsen aanpassen: voeg de opdracht expand_abbreviation_by_tab toe voor de tab-toets voor de vereiste syntaxis bereikkiezers. Om de huidige syntaxisbereikselector te krijgen, drukt u op ⇧⌃P (OSX) of Ctrl+Alt+Shift+P. Deze wordt weergegeven in de statusbalk van de editor.

Ga naar Voorkeuren > Sleutelbindingen - Gebruiker en voeg het volgende JSON-fragment in met de correct geconfigureerde scope-selector in plaats van het SCOPE_SELECTOR-token:

("sleutels": [ "tabblad" ], "command": "expand_abbreviation_by_tab" , // plaats door komma's gescheiden syntaxiskiezers waarvoor // je wilt de Emmet-afkortingen uitbreiden naar de "operand"-sleutel// in plaats van SCOPE_SELECTOR. // Voorbeelden: source.js, text.html - bron"context": [( "operand": "SCOPE_SELECTOR" , "operator": "equal" , "match_all": true , "key": "selector" ), // alleen uitvoeren als er geen geselecteerde tekst is("match_all": waar, "key": "selection_empty" ), // werkt niet als er actieve tabstops zijn("operator": "equal" , "operand" : false , "match_all" : true , "key" : "has_next_field" ), // werkt niet als de voltooiingspop-up zichtbaar is en jij // wil voltooiing invoegen met Tab. Als je dat wilt // breid Emmet uit met Tab, zelfs als de pop-up zichtbaar is --// verwijder deze sectie ( "operand" : false , "operator" : "equal" , "match_all" : true , "key" : "auto_complete_visible" ), ( "match_all" : true , "key" : "is_abbreviation" ) ] )

Tab-toetshandler

Met de Emmet-plug-in kunt u afkortingen uitbreiden met de Tab-toets, net als bij gewone fragmenten. Aan de andere kant kunt u, vanwege het dynamische karakter en de uitgebreide syntaxis, soms onverwachte resultaten krijgen. In dit gedeelte wordt beschreven hoe de Tab-handler werkt en hoe u deze kunt verfijnen.

Standaard werkt de Tab-handler in een beperkt aantal syntaxisbereik: HTML, XML, HAML, CSS, SASS/SCSS, LESS, PostCSS en tekenreeksen in programmeertalen(zoals JavaScript, Python, Ruby enz.). Het betekent:

• U moet uw document overschakelen naar een van de hierboven genoemde syntaxis om de afkortingen uit te breiden met de Tab-toets.
• Met de sneltoets Ctrl-E kunt u afkortingen overal uitbreiden, de reikwijdte ervan is niet beperkt.
• Wanneer u de afkorting uitbreidt binnen reeksen programmeertalen, wordt de uitvoer gegenereerd met een speciaal uitvoerprofiel met de naam line, dat uitvoer genereert als een enkele regel.

Om de Tab-toetshandler te verfijnen, kunt u de volgende instellingen gebruiken in het Emmet.sublime-instellingenbestand van de gebruiker:

• uitgeschakeld_tab_abbreviations_for_scopes - een door komma's gescheiden lijst met syntaxisbereiken waar de Tab-toetshandler moet worden uitgeschakeld. Als u bijvoorbeeld de handler binnen tekenreeksen van programmeertalen en HAML-syntaxis wilt uitschakelen, ziet uw instelling er als volgt uit:

"disable_tab_afkortingen_voor_scopes": "text.haml, string"

• uitgeschakeld_single_snippet_for_scopes - een door komma's gescheiden lijst met syntaxisbereiken waarbij de Tab-handler moet worden uitgeschakeld bij het uitvouwen van een enkele afkorting. Momenteel biedt ST geen API voor het verkrijgen van een lijst met native fragmenten. Dus als u bijvoorbeeld een php-afkorting probeert uit te breiden, wordt deze doorgegeven aan Emmet, die als resultaat geeft in plaats van PHP-blok zoals gedefinieerd in native ST-fragmenten. Als tijdelijke oplossing: als u een enkele afkorting probeert uit te breiden binnen het bereik dat is gedefinieerd in de instelling invalid_single_snippet_for_scopes, zal Emmet eerst naar de naam zoeken in zijn eigen fragmentencatalogus, daarna in de instelling bekende_html_tags en als deze niet wordt gevonden, kan ST deze afhandelen en breid de oorspronkelijke afkorting uit, indien deze overeenkomt.
• bekende_html_tags - een door spaties gescheiden lijst van alle bekende HTML-tags die worden gebruikt voor het opzoeken, zoals hierboven beschreven.

Als u niet tevreden bent met het gedrag van de Emmet-tabhandler, kunt u dit uitschakelen: voeg gewoon "disable_tab_abbreviations": true toe aan het Preferences.sublime-settings-bestand van de gebruiker.

Schakel het automatisch invoegen van leveranciersvoorvoegsels uit

Als uw workflow al een geautomatiseerde taak voor CSS-leveranciersvoorvoegsels bevat (zoals Autoprefixer), kunt u de automatische invoeging van leveranciersvoorvoegsels van Emmet uitschakelen door deze optie toe te voegen aan het Emmet.sublime-instellingenbestand van uw gebruiker: “json ( "preferences”: ( “ css.autoInsertVendorPrefixes”: false ) )

Hallo, er is al veel geschreven over Sublime Text. In mijn blog schreef ik over Sublime Text 2. Nu heeft Sublime Text 3 de alfaversie al verlaten (alfa betekent een nieuwe en extreem onstabiele versie) en is overgegaan naar de bèta (de bèta is nog steeds niet stabiel, maar is al bedoeld om te testen , na de bèta is er meestal een officiële release). En ik besloot Sublime Text 3 (hierna ST3 genoemd) volledig te begrijpen.

Als u SublimeText3 gaat installeren, dan is dit de meest complete instructie voor u. Hier zal ik alles beschrijven wat met deze editor te maken heeft, en hij kan echt veel.

Eerst heb ik ST2 en alle sporen ervan uit het systeem verwijderd. Ik heb ook node.js en npm verwijderd die eraan waren gekoppeld. Omdat ik van plan ben om de compilatie van minder en vervolgens saas-bestanden opnieuw in te stellen, correct en competent, via subliem. Maar daarover later meer.

Deel 1. Sublime Text installeren en configureren 3

Download en installeer SublimeText 3

Als u het nog niet weet: Less is een op JavaScript gebaseerde CSS-preprocessor. Dit is de code die naar CSS wordt gecompileerd. Er zijn verschillende manieren om less naar css te compileren: Grunt, Guard en Less.app. Misschien wil of hoef je echter geen extra tools te gebruiken en wil je alles goed doen in de code-editor. Hieronder heb ik instructies gegeven die geschikt zijn voor Windows-gebruikers (ik heb zelf de installatie ermee gedaan, en ook voor Mac OS.)

1. Node.js installeren
2. NPM installeren (geïnstalleerd met Node.js)
3. Wereldwijd minder installeren. Open de Windows-console en voer npm install less -gd in
4. Installeer de plug-in Less2Css en SublimeOnSaveBuild

Open de ST3-instellingen: Voorkeuren → Instellingen - Standaard, en voeg de regel toe aan het einde:

"lesscCommand": "/usr/local/share/npm/bin/lessc"

Laten we een willekeurig .less-bestand openen en proberen het samen te stellen. Breng gewoon wijzigingen aan in het bestand en druk op Ctrl+S.

Als er een fout optreedt: Kan argument clean-css niet interpreteren … Dit gebeurde omdat de clean-css-plug-in afzonderlijk was en niet was opgenomen in het less-pakket. Daarom moet het afzonderlijk worden geïnstalleerd. Laten we installeren. We gaan naar de console en schrijven:

Npm install -g less-plugin-clean-css

SASS is een andere preprocessor voor CSS. Het wint aan populariteit en loopt al voorop wat betreft wijdverbreid gebruik.

• Ruby installeren
• Start de console en installeer Ruby Gem gem install sass
• De Sass-plug-in voor Sublime Text installeren
• De Sass Build-plug-in voor Sublime Text installeren
• Installeer de SublimeOnSave-plug-in voor Sublime Text
  (we hebben over deze plug-in gesproken in de bovenstaande instructies)

Laten we nu instellingen toevoegen aan Sublime Text-instellingen – Standaard:

( "filename_filter": ".(sass|scss)$", "build_on_save": 1 )

Vergeet ook niet het .sass-bestand te openen en het bouwsysteem te selecteren in Extra → Bouwsysteem → SASS gecomprimeerd. Wanneer u het .sass-bestand opslaat, wordt .css gecompileerd.

Jade is een preprocessor voor het schrijven van HTML-code, en net als less of sass voor css, maakt het het schrijven van HTML-opmaak sneller en gemakkelijker (voor ervaren programmeurs). Hoe de werking ervan te installeren en configureren.

• Node.js moet worden geïnstalleerd met npm (meestal gebundeld met node)
• Ga naar de console en installeer jade met de opdracht npm install jade --global
• Installeer de Jade Build-plug-in in Sublime Text
• Open in Sublime Text het .jade-bestand en selecteer Jade build-systeem
• Als je alle instructies in dit bericht volgt, dan zal ik in de Sublime-instellingen de regel over Save On Build toevoegen met de jade-extensie en nu zal het er als volgt uitzien "filename_filter": ".(sass|scss|jade)$" ,
• Installeer de Jade-plug-in in Sublime

Na deze manipulaties worden de jade-bestanden samengesteld.

Als er geen Jade-codemarkering is, ga dan naar de rechter benedenhoek van ST, waar hoogstwaarschijnlijk Platte tekst staat, klik op die inscriptie en selecteer vervolgens Jade-markering. Nu zal de achtergrondverlichting werken.