HTML fájl létrehozása

Üdvözlet a Bookamba-nál. A mai cikk témája & #; A Sublime Text 3 szerkesztő telepítése és konfigurálása, az analógia és a nagyszerű szöveg alapján 2 Ez az utasítás is illeszkedik.

A mai lecke alatt telepítjük a szükséges csomagokat a különbségteljes szöveghez, amely segít nekünk munkánkban a helyszínek elrendezésével, felgyorsítja az elrendezési folyamatot, és kényelmesebbé teszi az elrendezést. Vizuális témát fogunk létrehozni, amely véleményem szerint nagyon hasonlít a zárójelek szerkesztőjének kialakításához, trükkös és sok beállítással rendelkezik.

Állítsa be a Sublime szerkesztőt is. Konfigurálom, milyen kényelmes vagyok. Ön, viszont konfigurálhat valamit az ízlésedhez. A legtöbb beállítás, amit használni fogok, kommentálok erre, ha a magam alátámasztja, akkor nem lesz nehéz.

Elkészítettem a pluginok, a csomagok és azokat, amelyeket ma hozunk létre.
Először is, természetesen a sublime text 3-ot telepítünk, erre, ezáltal követi a Hab linket és töltse le az operációs rendszer verzióját. A telepítés után az első dolog, amit telepítek a csomagkezelő panel & #; Csomagvezérlés, erre, menjünk a hivatalos csomagvezérlő honlapra, és hajtsunk végre a Hab Hab telepítési utasításokat

Amint láthatjuk, hogy telepítse csomag ellenőrzés, mi kell kattintani a billentyűzeten a következő CTRL + billentyűkombináció), annak érdekében, hogy kezdeményezi a Sublime szerkesztő konzolt, majd másolja és illessze be a kódot a konzolon jelenik meg a oldalt a fül számára Sublime Text 3

Miután a csomagkezelő telepítve van, folytassa a csomagok telepítését, amelyek segítenek az elrendezésben. Nem úgy teszem, mintha a listám ideális, és nincs többé kiegészíteni. Csak azokat a csomagokat és témákat szétszereljem, amelyeket magam használok. Örülök, hogy észrevételei maradtak erre a hozzászólásra, javaslataival a csomagokról, amelyeket nem tartottam.

Így itt van az általam használt csomagok listája

• Hangya
• Javascript Nodejs Sniplets
• Fakeimg Placeholder Snippet
• Színes kiemelő
• Html5
• Terminál
• Sass
• Anyag téma

HOGY A SZÁLLÍTÁSI SZÁMÍTÁSOK SZÁMÁRA 3

Mielőtt ezeket a csomagokat telepítené, tegyük meg egy percig, és megmutatom neked, hol vettem őket, és hol tudod olvasni, amit tudnak. A HACK Control HAB csomagkezelő hivatalos honlapján, a főoldalon közvetlenül a legnépszerűbb csomagok listáján, a népszerűség és a TD csomagok listája látható. Természetesen van egy keresés mindez. Ha például írja be az Emmet keresést, láthatja az Emmet szót tartalmazó csomagok listáját. A legnépszerűbbet fogjuk bekapcsolni, közel 3 millió alkalommal. Az Emmet Package oldalon olvashatja a Reedmi beállítást és telepítést. Például a telepítési referencia, meg van írva, hogy telepíteni Emmet, meg kell kezdeni a csomagkezelő és írási Emmet, majd nyomja meg az ENTER és a telepítésnél. Ezután ismét, ugyanazon az oldalon láthatjuk a HAB-csomag fejlesztői hivatalos honlapját, ha elmész, itt olvashatunk, hogy mit kell ezt a csomagot, és az összes információhoz kapcsolódó információ. Például futtathat egy demo videót, és megnézheti, hogy az Emmet hogyan van elrendezve, és milyen hatalom van a funkcionalitásában.

Ugyanazon az elvben feltétlenül feltárhatja az összes többi csomag, plugin és téma információit.

A Sublime Text 3 csomag telepítése

Most kezdjük el a csomagok telepítését. A szerkesztő ablakban nyomja meg a CTRL + SHIFT + P gombot, a Funkciólista ablak megnyitásához. Ezután írja be a csomagvezérlés beírását: Telepítse a csomagot, várjuk a csomagkezelőt a betöltött, és most bemutatjuk az első plug-in & # nevét; Emmet és nyomja meg az Enter billentyűt. A szerkesztő alján csomagok telepítésekor a lebegő látható, ez a kijelölés, hogy a csomag telepítve van. Amint eltűnik, a csomag megállapítható. Néha egy csomag telepítése után egy szöveges fájl segít súgó- vagy csomagbeállításokkal. Ebben az esetben általában csak ahhoz, hogy bezárja ezt a fájlt.

Ezután ugyanezt tesszük a következő & # csomagokkal;

Hogyan kell konfigurálni a sublime szöveget 3

A terület, hogyan telepítettük mindent, amire szüksége van, konfiguráljuk a környezetet & #; Egyedi szerkesztő beállítások. Először menjünk a Beállítások menübe – Beállítások. Itt a bal oldali ablakban megfigyelhetjük az összes rendelkezésre álló szerkesztő beállítások alapértelmezés szerint. A jobb oldali ablakban felülbírálhatjuk ezeket a beállításokat, mivel kényelmes számunkra.

A beállítások így néz ki:

1 2 3 4 5 6 7 nyolc kilenc tíz tizenegy 12 13 tizennégy 15 16 17 tizennyolc 19 húsz 21 22 23 24 25 26 27

{ “Fold_buttons”: hamis, “betűméret”, “Highlight_line”: igaz, “Emlékezet_full_screen”: igaz, “Show_encoding”: igaz, “Tab_Size”: 4, “Word_Wrap”: hamis, “Margó”: 5, “Mindig_show_minimap_viewport”: igaz, “Bold_Folder_labels”: igaz, “Font_Options”: [“Gray_antialias”, “subpixel_antialias”], // a retina Mac Windows “Indent_guide_options”: [“RUND_NORMAL”, “RUND_ACTIVE”], // Jelölje ki az aktív francia bekezdést “Line_padding_bottom”, “Line_padding_top”, “Overlay_scroll_bars”: “Engedélyezve”, “Color_scheme”: “Csomagok / anyagi téma / Schemes / Habe”, “Téma”: “Habe-Theme”, “Material_theme_accent_cyan”: igaz, “Material_theme_bullet_tree_indicator”: igaz, “Material_theme_Compact_sideBar”: igaz, “material_theme_small_tab”: igaz, “Material_theme_tabs_autowidth”: igaz, }

Csodálkozzunk, hogy egy vagy egy másik beállítást használtam.

& #; Fold_buttons & #;: hamis
Alapértelmezés szerint a sublime, a bal oldali számok közelében vannak olyan háromszögek és #; Ha kiválasztja a Kódrészt, akkor kattintson a háromszögre, és összeomolhat egy vagy egy másik kód kódot. Azt hiszem, ez a beállítás, amikor az elrendezés & #; kényelmetlen és felesleges, így kikapcsolom.

& #; font_size & #;: 12
Itt azt hiszem, minden tiszta, ez a betűméret a szerkesztőben.

& #; Kiemelés_lin & #;: igaz
A villanyszövet megvilágítása, amelyen a kocsi található.

& #; Emlékezzen_full_screen & #;: igaz
Ha abban a pillanatban, amikor becsukta a szerkesztőt, a teljes képernyőn telepítette, akkor a következő alkalommal, amikor megnyitja a nagyszerű szöveget, teljes képernyős módban nyílik meg.

& #; Show_encoding & #;: igaz
Ha ezt az opciót igazba telepíti, a panel jobb alsó sarkában megjelenik egy karakterlánc, amelyben elolvashatja az aktuális fájlkódolást. Ez nagyon kényelmes, különösen akkor, ha a harmadik féltől származó bővítményeket, a fejlesztők, ami lehet összetéveszteni vagy inattentively fájl mentése néhány kódolási görbe. Ez természetesen nagyon ritkán található. De személyesen, csak nyugodtabb látom, hogy az összes olyan fájl, amellyel az UTF-8-at dolgozom, és minden rendben van (:

& #; tab_size & #;: 4
Amikor megnyomja a fület egy francia bekezdés megjelenik. Úgy tetszik, hogy az alapértelmezés szerint ez a francia bekezdés négy szóközzel egyenlő, úgy érzem, hogy olyan kényelmesnek érzem, hogy értékeljék a kód blokkjait, és nem egyesülnek.

& #; Word_Wrap & #;: FALSE
Ha ezt az opciót hamis, a hosszú sorok nem kerülnek át a következő sorba. Vagyis vízszintes görgetés jelenik meg. Az elrendezésben kényelmesnek tűnik.

& #; margin & #;: 5
A kód korrekciója a szerkesztő szélénél.

Az alábbi lista a beállításokat ajánljuk az anyag alkalmazásával Theme téma fejlesztők, hogy el lehet olvasni a projekt weboldalán, a Hathouse HAB, ezek a beállítások között a következő tulajdonságokkal alábbiakban ismertetjük.

& #; mindig_show_minimap_viewport & #;: igaz
A kód csökkentett másolatának függőleges görgetési háttérvilágításában jelenítse meg. Mennyire kényelmes, ezt a funkciót használtam, és Yuzay neki. Ha ezt nem tetszik, akkor kikapcsolhatja

& #; Bold_folder_labels & #;: igaz
Az oldalsávban, ahol megjelenik a mappák és a projektfájlok listája, a szöveg több zsírt és fényesebbé teszi.

& #; Font_options & #;: [& #; Gray_antialias & #; & #; subpixel_antialias & #]
Ajánlott betűtípus beállítások

& #; indent_guide_options & #;: [& #; RUND_NORMAL & #; & & #; Draw_active & #;
Ez a beállítás szükséges ahhoz, hogy a szerkesztő fehér pontozott függőleges vonalat jelenítsen meg a kódblokk bal oldalán, a kocsi belsejében. Ismét valaki olyan kényelmes. Személy szerint segítem ezt a beállítást, hogy vizuálisan láthassa, hogy melyik szekcióban vagyok, különösen, ha a blokkok nagyok.

& #; Vonal padding alsó és #:
& #; line_padding_top & #;:
Ez a két beállítás felelős a kódvezetékek között a fenti és az alábbiakban.

& #; Overlay scrolllars & #;: & #; engedélyezett & #;
Ez a beállítás véleményem szerint a scrolllars elrejtése / leképezése alapértelmezés szerint.

Általában, amikor dolgozik a kódot, hogy ez egy elrendezés vagy írásban valamilyen backend, a legfontosabb dolog kényelmes, egyikük az, hogy a legtöbb kódok a képernyőn, illetve a gördítősáv, Sidbar és A menü, ideális esetben elrejti egyáltalán. Mert csak beavatkoznak velünk. De gyors hozzáférést biztosít számukra, egyszerűen a megfelelő beállításokat, kényelmes csak neked, hogy amit lehet, hogy hozzászokott a más szerkesztők.

Zavarodott, menjen tovább
& #; Color_scheme & #;: & #; csomagok / anyagi téma / rendszerek / habe & #;
& #; Téma & #;: & #; habe-theme & #;
Ez a két sor szükséges a téma és a színpaletta aktiválásához
Mivel telepítettük a témaanyag témát, aktiváljuk azt

Az alábbi beállítások közvetlenül kapcsolódnak a téma konfigurációjához, és a webhelyükön lévő funkcionalitásról olvashatók. Ez az, hogy tetszik ez a téma. Sok beállítással rendelkezik, amit külön lehet felvenni.

& #; Material_theme_accent_cyan & #;: igaz
A mappák és a lapok fő fényének megteremtése. Én együtt szimpatizálok ezzel a színnel, mert úgy néz ki, mintha a lehető legpontosabbnak tűnik))) Nem fogom mondani, hogy én vagyok rajongói zárójelek, de szeretem a designját, az Adobe nem fog feltalálni mindenféle huchry-fodrot

& #; anyag_theme_bullet_tree_indicator & #;: igaz
Ez a beállítás felelős az oldalsáv pontjának megjelenítéséért a jelenleg nyitott fájl bal oldalán, amely jelenleg szerkeszthető a szerkesztőben

& #; material_theme_Compact_sideBar & #;: igaz
& #; material_theme_small_tab & #;: igaz
Ez a két beállítás az oldalsávot és az ikonokat kissé kisebb, mint a szabvány, kompakt és gyönyörű.

& #; Material_theme_tabs_atowidth & #;: igaz
Automatikusan illeszkedik a szélesség lapokon, nyílt fájlokkal. Ismét megváltoztathatja a beállításokat, és duzzadhatja őket, mivel kényelmesebb.

Hadd emlékeztessem Önt arra, hogy az anyagi téma témák összes beállításainak listája olvasható a Hathabbab Hab hivatalos honlapján

Úgy gondolja, hogy mindent? De nem hiszem, most nézzük configure Emmet, felülírják Emmet mintát, erre megyünk a menü
Beállítások – Csomagbeállítások – Emmet – Beállítások Felhasználó és hozzáadja a következő kódot:

{ “Snippets”: { “HTML”: { “Rövidítések”: { “Script”: “Script típus = \” szöveg / JavaScript \ “”, “Script: SRC”: “Script típus = \” szöveg / JavaScript \ “src = \” \ “”, “Forma”: “űrlap művelet = \” $ {1: #} \ “módszer = \” $ {2: Post} \ “”, “Form: Get”: “űrlap akció = \” $ {1: #} Method = \ “get \” “, “Forma: Post”: “Forma Action = \” $ {1: #} \ “módszer = \” Post \ “”, “A”: “egy href = \” $ {1: #} \ “”, } } } }

Személy szerint bosszantom, hogy az Emmetben lehetetlen egy űrlapot telepíteni a posztdal vagy a módszerrel, és ami a legfontosabb, amikor az űrlapot vagy a linkeket forgatja, hogy az Emmet nem helyezi a dugókat a cselekvésre és a href-re egy rács formájában érvényes html lenne. Minden, mentés és zárt

Hogyan kell konfigurálni az autoformatting kódot a Sublime-ben

Menjen a menübe
Beállítások – Kulcskötések

Itt analógiával a környezet beállításaival láthatja az alapértelmezett összes gyorsbillentyű bal oldali listáját. Néhányat felülbírálunk.

[ {“Keys”: [“Ctrl + E”], “Command”: “toggle_side_bar”}, {“Billentyűk”: [“ALT + SHIFT + F”], “COMMAND”: “REINDENT”}, ]

Személy szerint van egy kulcskombináció Ctrl + E Társítva a Word Explorer))), és összegyűjtem a bal oldali sávot a mappák és a projektfájlok listájával pontosan a gyorsbillentyűk megnyomásával. Ismét nem úgy teszem, mintha ez az egyetlen igazi lehetőség, csak akkor, ha személyesen kényelmesen. Alapértelmezés szerint a fenékben vannak olyan kombinációk, amelyek felelősek az oldalsáv fordításáért és kibontakozásáért, de kényelmesebb számomra, hogy ilyen kombináció.

A második beállítás személyesen kapcsolódik az IDE NetBeans-hez, amelyben a kódot kell igazítani a kulcskombinációhoz ALT + SHIFT + F Emiatt előnyben részesítem és ugyanazt a kombinációt használom a fenékben. Az egyetlen különbség az, hogy annak érdekében, hogy dolgozzunk, mielőtt kiemeljük a kódolandó kód kódját.

És az utolsó dolog, amit csinálunk & #; Ez elrejti a menüt, erre, menjen a View – elrejtése menü menüjére, amely után a menü elrejti, és a hozzáféréshez most meg kell adnunk a bal oldali alt

Ez az egész, a beállítás befejeződött, hogy minden változás hatályba lépjen, és helyesen működik, indítsa újra a szerkesztőt. Emlékeztet arra is, hogy ez a link olvassa el a cikket egy rövid elemzésről a ma telepített összes csomag funkcionális funkciójáról.

Hogyan lehet menteni és átutalni egy másik számítógépre az összes nagyszerű szöveget 3 Beállítások

Végül, aki a végére olvasható. Természetesen van egy olyan kérdésed, amely minden hosszú és kényelmetlenséget konfigurálja, amikor újratelepíti az operációs rendszert, vagy ha egy másik laptopra vagy számítógépre költözik. Ne kétségbeesés, ezek a beállítások elegendőek ahhoz, hogy egyszerre elvégezzék a számítógépet a számítógépről egy számítógépre. Ehhez elég ahhoz, hogy menjen a preferenciákhoz – Böngészés Csomagok menüben, az összes telepítéssel rendelkező mappa megnyílik, menjen a gyökérkönyvtárba, és másolja az összes mappát, miközben megmenti őket valahol az archívumban a felhőben.

Az új telepítéssel a Sublime telepítése után, és a Preferences menübe fog menni – Böngészési csomagok, az elérési út különböző lesz, hogy megjelenjen a helyi beállításokkal, előzetesen módosítani kell a beállításokat. Ehhez csak lépjen tovább a Beállítások menübe – beállításokhoz, és adjon hozzá egy üres megjegyzést jobbra, Mentse el, miután a sublime létrehoz egy mappát egyéni beállításokkal. Ezen manipulációk után átmásolhatja a mappát a korábban tárolt beállításokhoz.
Minta mappa elérési útvonalak felhasználói beállítások a Sublime Text 3 különböző operációs rendszerhez az egyértelműség érdekében
MacOS: ~ / Könyvtár / Alkalmazás Támogatás / Sublime Szöveg 3 /
Win:% AppData% \ sublime szöveg 3 \
Nix: ~ /.Config / sublime-text-3 /

Ez minden, köszönöm az olvasást, és igen & #; Wellkell egy részletes videó ezen a cikkben (: