Dodaci. Sublime text 3 plugins javascript postavke

// echo get_the_post_thumbnail(get_the_ID(), "relatedthumbnail"); // prikazati moju veličinu sličice?>

Poštovani, dosta je već napisano o Sublime Textu. U svom blogu sam pisao o Sublime Text 2. Sada je Sublime Text 3 već napustio alfa verziju (alfa znači novu i izuzetno nestabilnu verziju), te je prešao na beta (beta još uvijek nije stabilan, ali je već namijenjen za testiranje , nakon beta verzije obično dolazi zvanično izdanje). I odlučio sam da u potpunosti razumijem Sublime Text 3 (u daljem tekstu ST3).

Ako ćete instalirati SublimeText3 onda je ovo najkompletnije uputstvo za vas. Ovdje ću opisati sve što se tiče ovog uređivača, a on zaista može puno toga.

Prvo sam uklonio ST2 i sve njegove tragove iz sistema. Također sam uklonio node.js i npm koji su bili upareni s njim. Pošto namjeravam ponovo postaviti kompilaciju manjih, a zatim i saas datoteka, korektno i kompetentno, kroz sublim. Ali više o tome kasnije.

Dio 1. Instaliranje i konfiguriranje Sublime Texta 3

Preuzmite i instalirajte Sublime Text 3

Ako već niste svjesni, Less je CSS preprocesor baziran na JavaScriptu. Ovo je kod koji se kompajlira u CSS. Postoje različiti načini da se manje kompajlira u css: Grunt, Guard i Less.app. Međutim, možda ne želite ili ne trebate koristiti dodatne alate i želite sve raditi ispravno u uređivaču koda. U nastavku sam dao uputstva koja su prikladna za korisnike Windowsa (sam sam uradio instalaciju koristeći ga, a takođe i za Mac OS.)

  1. Instaliranje Node.js
  2. Instalirajte NPM (instaliran sa Node.js)
  3. Instalirajte manje globalno. Otvorite Windows konzolu i unesite npm install less -gd
  4. Instalirajte dodatak Less2Css i SublimeOnSaveBuild

Otvorite ST3 postavke: Preferences → Settings - Default i dodajte red na kraj:

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

Hajde da otvorimo bilo koji .less fajl i pokušamo da ga sastavimo. Samo izvršite promjene u datoteci i pritisnite Ctrl+S.

Ako dođe do greške: Nije moguće protumačiti argument clean-css… To se dogodilo jer je clean-css dodatak bio odvojen i nije uključen u manje paket. Stoga se mora instalirati zasebno. Hajde da instaliramo. Idemo do konzole i pišemo:

Npm install -g less-plugin-clean-css

SASS je još jedan predprocesor za CSS. On postaje sve popularniji i već je ispred manje u smislu široke upotrebe.

  • Instaliranje Ruby
  • Pokrenite konzolu i instalirajte Ruby Gem gem install sass
  • Instaliranje dodatka Sass za Sublime Text
  • Instaliranje dodatka Sass Build za Sublime Text
  • Instalirajte dodatak SublimeOnSave za Sublime Text
    (razgovarali smo o ovom dodatku u gornjim uputstvima)

Sada dodajmo postavke u postavke Sublime Text – zadano:

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

Takođe, ne zaboravite da otvorite .sass datoteku i izaberete sistem gradnje u Alati → Izgradi sistem → SASS komprimovan Sada, kada sačuvate .sass fajl, .css će biti preveden.

Jade je predprocesor za pisanje html koda, i kao less ili sass za css, čini pisanje html markupa bržim i lakšim (za iskusne programere). Kako instalirati i konfigurirati njegov rad.

  • Node.js mora biti instaliran sa npm-om (obično u paketu sa čvorom)
  • Idite na konzolu i instalirajte jade naredbom npm install jade --global
  • Instalirajte dodatak Jade Build u Sublime Text
  • U Sublime Textu otvorite .jade datoteku i odaberite Jade build system
  • Ako pratite sva uputstva u ovom postu, onda ću u Sublime postavkama dodati red o Save On Build sa ekstenzijom jade i sada će izgledati ovako "filename_filter": ".(sass|scss|jade)$" ,
  • Instalirajte dodatak Jade u Sublime

Nakon ovih manipulacija, jade fajlovi se kompajliraju.

Ako nema isticanja koda Jade, onda idite u donji desni ugao ST, i najvjerovatnije piše Plain Text, kliknite na taj natpis, a zatim odaberite Jade highlighting. Sada će pozadinsko osvetljenje raditi.

Pravi set dodataka može poboljšati performanse u bilo kojoj aplikaciji. Ako ste web programer koji radi sa Sublime Text 3 Package Ccontrol, toplo preporučujemo da pažljivo pročitate dodatke o kojima se govori u ovom članku:

  • Kontrola paketa ;
  • HTMLPretify ;
  • Emmet ;
  • Bracket Highlighter ;
  • jQuery ;
  • Case Conversion.

Kontrola paketa

Ovaj dodatak olakšava pronalaženje, instaliranje i ažuriranje drugih paketa. Prvo ga treba instalirati. Ovo će olakšati rad sa svim ostalim dodacima.

Kako instalirati

  1. Pratite ovaj link https://packagecontrol.io/installation i kopirajte naredbu, koja će izgledati otprilike ovako:
  1. Pritisnite Ctrl - povratak (; `) da otvorite Sublime Text Console:
  1. Zalijepite naredbu i pritisnite Enter.
  1. Nakon što pokrenete naredbu, vidjet ćete malo iskačuće upozorenje:
  1. Kliknite na "OK".
  2. Zatvorite i ponovo pokrenite Sublime Text.
  3. Unesite naredbu za kontrolu paketa da vidite sve naredbe:

Koristit ćemo Package Control Sublime Text za preostale dodatke.

HTMLPrettify

Uzima dugačke nizove HTML-a, CSS-a, JavaScript-a i JSON-a i formatira ih tako da ih možete čitati umjesto da pokušavate da shvatite gomilu kucanja.

Kako instalirati

  1. Pritisnite Ctrl-Shift-P u Windowsima da otvorite "Command Panel".
  2. Unesite naredbu za kontrolu paketa da vidite sve naredbe. Odaberite Kontrola paketa: Instalirajte paket. Na ekranu će se pojaviti meni dostupnih dodataka:
  1. Unesite HTMLPrettify:
  1. Kliknite na HTML-CSS-JS Prettify. Ovaj naziv je malo drugačiji, ali je isti dodatak.

Emmet

Ovaj dodatak se nekada zvao Zen Coding. Omogućava vam pisanje HTML i CSS kratkih kodova. Na primjer, upisivanjem sljedećeg:

#page>div.logo+ul#navigation>li*5>a(stavka $)

A pritiskom na taster tab dobićete:

Nakon što instalirate Emmet koristeći Sublime Text Package Control, ponovo pokrenite Sublime Text.

Da bi Emmet radio, morate postaviti sintaksu za dokument. Inače neće raditi:

Sada provjeri. Unesite sljedeće:

nav#menuSystem.navMenu.isOpen>div#hotelLogo>div.navMenuIcon.logoIcon+div#arrowPointer+ul#navMenuMain>li.navMenuItem.navMenuItem$$$*2>div.navMenuIcon(Item $)(Item $)+a

I pritisnite tab. dobit ćete:

Trebat će vam dosta vremena da naučite sve dostupne skraćenice. Ovo će vam omogućiti da pišete HTML kod mnogo brže.

BracketHighlighter

Dodatak ističe zagrade i oznake. Nakon instalacije koristite Instalacija Sublime Text Package Control Možete kliknuti bilo gdje u JavaScript ili HTML kodu i vidjeti otvaranje i zatvaranje zagrada u lijevoj koloni:

JQuery

Dodatak jQuery naglašava ispravnu sintaksu jQuery metode i pruža isječke koda za njegovo dovršavanje:

Case Conversion

Omogućava vam prebacivanje između snake_case , camelCase , PascalCase itd. Nakon instaliranja dodatka pomoću kontrole paketa (ukucajte " pic" za brzi pristup Instalacijskom paketu), probaj.

Idite na službenu web stranicu Sublime Texta u odjeljku Preuzimanje i preuzmite najnoviju verziju programe za vas operativni sistem Skinuo sam 64-bitni program. Pokrećemo ga i provjeravamo da li sve radi. Inače, program nije besplatan i ako ne kupite ključ, onda nema ograničenja osim natpisa "neregistriran" u naslovu i nenametljivog skočnog prozora s upozorenjem nakon određenog vremenskog perioda (jednom na svakih pola sata - sat).

Hajde da instaliramo Russifier

Raspakujte preuzetu arhivu i kopirajte sve datoteke sa ekstenzijom .sublime-menu (osim fascikle "backup") u jedan od sledećih foldera (u zavisnosti od vašeg operativnog sistema):

Ako na navedenoj putanji ne postoji folder "Default", onda ga morate kreirati.

Postavimo automatski prekid reda

Otvorite Preferences → Settings - Custom

Dodajte sljedeću liniju:

"word_wrap": istina

Borba protiv kodiranja u fajlovima

Ponovimo Preferences → Settings - Custom. Potrebno je zamijeniti

"fallback_encoding": "Zapadni (Windows 1251)",

na ovu liniju:

"fallback_encoding": "Ćirilica (Windows 1251)",

Instaliranje kontrole paketa

Kontrola paketa je neophodna za proširenje funkcionalnosti Sublime Text 3 editora raznim dodacima.

Idite na web stranicu i pogledajte upute za instalaciju. Ili idite u uređivač, pritisnite tipke: Ctrl + ~, u komandnoj liniji koja se pojavi unesite sljedeću instalacijsku naredbu:

import urllib.request,os,hashlib; h = "2915d1851351e5ee549c20394736b442" + "8bc59f460fa1548d1514676163dafc88"; pf = "Kontrola paketa.sublime-package"; ipp = sublime.installed_packages_path(); urllib.request.install_opener(urllib.request.build_opener(urllib.request.ProxyHandler())); by = urllib.request.urlopen("http://packagecontrol.io/" + pf.replace(" ", "%20")).read(); dh = hashlib.sha256(by).hexdigest(); print("Greška pri validaciji preuzimanja (dobio %s umjesto %s), pokušajte ručno instalirati" % (dh, h)) if dh != h else open(os.path.join(ipp, pf), "wb" ).write(by)

Postavljanje shema boja

Ponovo pritisnite Ctrl+Shift+P i otkucajte daylerees - themes.

Dodatno

Za pristup FTP-u morate instalirati "SFTP"

Još jedna zanimljiva karakteristika je "Goto-CSS-Declaration". Kada kliknete na klasu, ona prikazuje ovu klasu u datoteci stila.

Višeplatformski uređivač teksta.

Kratak vodič za početnike za rad u uzvišenom i u polju layouta. Ovdje se prikupljaju sve najpotrebnije i najvažnije stvari. (Slijedite linkove da pronađete više ako je potrebno)

Razmotrit ćemo ga za Layout on Pug / Less, gdje nam nije potrebna velika funkcionalnost za otklanjanje grešaka. Stoga, ovaj uređivač (po mom mišljenju) pobjeđuje svoje konkurente i po brzini i po funkcionalnosti.

1. Instaliranje programa i kontrola dodataka (Package Control)

  1. Instalirajte Sublime Text 3. Ovdje je sve jednostavno - skinuti i lansirati.
Sada pritiskamo ctrl/⌘+shift+p ili u meniju (Alat > Komandna paleta).

Ovdje možemo preuzeti, instalirati, izbrisati, pregledati dodatke itd.

2. Postavke programa:

  1. Koristimo razmake umjesto tabulatora.
    "translate_tabs_to_spaces": istina
  2. Veličina kartice je 4 razmaka.
    "tab_size": 4

    Zašto pitate?
    Da ne biste slučajno pritisnuli razmak i jezičak i slomili sklop mopsa.
    I za ujednačenost rada u timu.

  3. Strings ne treba završavaju praznim znakovima.
    Za ovo koristimo dodatak TrailingSpaces .

- Možda se tu završavaju obavezna MustHave podešavanja. Pređimo na pojedinačne:

  1. Režim celog ekrana F11 + sakriti tablu menija (alt). Omogućava vam da maksimalno iskoristite monitor za rad i da vas ne ometa status OS panela.
  2. Zabrana preloma linija. Vjerovatno najbolja nekretnina od navedenih. Sprečava zabunu u sintaksi mopsa. Uvijek prikazuje očekivani kod i ugniježđenje bez obzira na veličinu ekrana. Horizontalno pomicanje se vrši pomoću shift + kotačić (ili touchPanel)
    "word_wrap": "false"
  3. Teme. Ne mogu ništa reći o ovome. Samo pronađite ono što vam se sviđa (po mogućnosti koristite tamnu shemu). Koristim "temu": "Material-Theme-Darker.sublime-theme".
  4. Isticanje sintakse. Pa, mislim da ovdje ne bi trebalo biti problema. Ako se pobrinete da se proširenje i isticanje podudaraju (mops za mopsa, a ne žad za mopsa)
  5. Prikaz → Bočna traka → Sakrij otvorene datoteke- Oslobađa prostor za stablo projekta. Zato što je ovo polje već duplicirano sa karticama i tri tačke na vrhu

3. Korisne prečice:

  1. U prvom pasusu ćemo reći da ćemo preskočiti sve standardne kombinacije, kao npr ctrl(⌘) + Z(⌘ - u daljem tekstu jednostavno ctrl). Otkaži, sačuvaj, ponovi, zatvori karticu, vrati karticu, itd...
  2. Možda je sljedeća najpopularnija kombinacija:
    crtl + P- Omogućava vam da pretražujete datoteke vašeg otvorenog projekta. Omogućava vam da se riješite ogromnog stabla otvorenih stilova.
  3. Sledeći po važnosti:
    ctrl+D- Traži kopije odabranog teksta. Idealno za višestruko uređivanje. I za traženje duplikata. Posebno u većim datotekama i velikim fragmentima. Za više kursora, držite ctrl i koristite miš.
  4. ctrl + L- Odabire cijelu liniju i omogućava vam da je potpuno izbrišete. Dobro radi zajedno sa ctrl+D.
  5. Traži… Pa, vjerovatno je prva stvar ctrl+F - pretraga datoteka. Druga i važnija stvar je da pretražite folder za više datoteka ctrl + shift + F (možete ga pozvati desnim klikom na folder i odabirom "Pronađi u folderu...") Savjetujem vam da ne uključujete " Famous Fat Man” folder u pretrazi
  6. ctrl + shift + gore/dolje- Pomiče liniju gore/dolje (zamjenjuje ih). Pogodan za rad sa stilovima i varijablama.
  7. Sada mali tutorijal kombinacije prečica na tastaturi. Vjerovatno ste vidjeli ove kombinacije odvojene zarezima. Pa sam vidio... i sada znam kako da ih koristim. Da biste to učinili, pritisnite ove kombinacije naizmjence (ne morate otpustiti tipku za opći mod)
    Evo nekoliko korisnih:
  8. ctrl + K, ctrl + 4- Sakriva sve grane čije je ugniježđenje veće od 4. Slično strelici za kolaps. ( ctrl + K, ctrl + J- otkriva sve što jeste)
  9. ctrl + K, ctrl + B- Skriva/prikazuje bočnu traku. (dobro radi sa F12)

Što vam omogućava da provjerite u vašem kodu sintaksičke greške. U nastavku se nalaze jednostavna uputstva za pretvaranje uređivača u punopravni IDE za web razvoj.

PAŽNJA! Članak opisuje postavljanje Sublime Text 3 (u daljem tekstu ST3) na Windows 7.

1. Zamislimo da ste već instalirali ST3 na svoj Win 7 i instalirali kontrolu paketa.

2. Sada morate instalirati dodatne pakete u ST3. Idemo na Preference -> Kontrola paketa -> Instaliraj pakete
I instalirajte sljedeće pakete:

  • SublimeLinter
  • SublimeLinter-html-tidy
  • SublimeLinter-csslint
  • SublimeLinter-jsl
  • SublimeLinter-jshint
  • SublimeLinter-php
  • SublimeLinter-phplint
  • JSHint

3. Postavite provjeru grešaka u HTML sintaksi
3.1. Preuzmite i stavite u bilo koji folder koji želite.
3.2. Dodajte putanju do ovog foldera! od tidy.exe do varijable srca korisnika Windowsa (PATH), čije se postavke nalaze u My Computer -> Properties -> Advanced system settings -> Varijable okruženja... -> Odaberite varijablu “PATH” -> Kliknite “Uredi” i dodajte putanju.
PAŽNJA! Obratite pažnju na tačku i zarez ";" nakon svake putanje i ne zaboravite je napisati, a također obratite pažnju na obrnutu kosu crtu.

4. Postavite provjeru grešaka u CSS sintaksi
4.1. Preuzmite i instalirajte node.js
4.2. Dodajte putanju do foldera (do foldera!) sa node.js u PATH (puta je otprilike sljedeća: C:\Users\User_name\AppData\Roaming\npm)! Ne zaboravite na tačku i zarez.
4.3. Instalirajte csslint. Da biste to uradili, pokrenite Windows komandnu liniju kao administrator i napišite: npm install -g csslint

5. Postavljanje provjere grešaka u JavaScript sintaksi
5.1. Ako niste uradili tačke 4.1. i 4.2. - mi to radimo.
5.2. Instaliramo jslint i jshint, da bismo to uradili izvodimo istu operaciju kao u paragrafu 4.3. Mi samo pišemo jslint i jshint umjesto csslint, respektivno.

6. Podešavanje provjere grešaka u PHP sintaksi
6.1. Nije za php u Denwera build-u!
6.2. (UPDATE) Činjenica je da mnogi (uključujući i mene) kao lokalni server postavili sebi Denwer. I Bog zna zašto (nisam ulazio u detalje), ali Denverov PHP nije prihvaćen od ST3, do kraja života. Može prikazati PHP greške na ST3 konzolu, ali i dalje neće biti isticanja sintakse.
P.S. Posebno sam dodao ovu tačku jer... na mnogim forumima pišu da instalirate PHP, konfigurišete ST3 pakete i bićete srećni. Ali sreća se ne dešava, jer... Stavka sa instalacijom PHP-a obično se odmah izostavi zbog nade u performanse (prikladnost) denwer-a.
6.3. Stoga, odmah idemo ovdje i preuzimamo PHP. Instaliranje PHP-a - samo raspakujte arhivu u bilo koju fasciklu i upišite putanju do ove fascikle u PATH (odeljak 3.2.)
6.4. Ako ste imali putanju do Denver PHP fascikle registrovanu u vašem PATH, obavezno je izbrišite.
7. Konfiguracijski fajl SublimeLinter.sublime.settings

POTREBNO JE ISPRAVITI PUT DO tidy.exe i php.exe

( "user": ( "debug": true, "delay": 0.25, "error_color": "D02000", "gutter_theme": "Paketi/SublimeLinter/gutter-themes/Circle/Circle.gutter-theme", "gutter_theme_excludes ": , "lint_mode": "background", "linters": ( "csslint": ( "@disable": false, "args": , "errors": "", "isključuje": , "ignoriraj": " ", "upozorenja": "" ), "hlint": ( "@disable": lažno, "args": , "isključuje": ), "htmltidy": ( "@disable": lažno, "args": , "isključuje": ), "jscs": ( "@disable": lažno, "args": , "isključuje": ), "jshint": ( "@disable": lažno, "args": , "isključuje": ), "jsl": ( "@disable": false, "args": , "isključuje": ), "php": ( "@disable": lažno, "args": , "isključuje": ), "phplint ": ( "@disable": false, "args": , "isključuje": ) ), "mark_style": "outline", "no_column_highlights_line": false, "passive_warnings": false, "paths": ( "linux" : , "osx": , "windows": ), "python_paths": ( "linux": , "osx": , "windows": ), "rc_search_limit": 3, "shell_timeout": 10, "show_errors_on_save": false, "show_marks_in_minimap": true, "sublimelinter": true, "sublimelinter_executable_map": ( "css": "čvor", "html": "Z:\\usr\\bin\\tidy.exe", //put do vašeg foldera sa tidy.exe, obratite pažnju na duple obrnute kose crte, one su obavezne "php": "C:\\Program Files\\PHP_5.6\\php.exe" //put do vašeg foldera sa php.exe ) , "syntax_map": ( "css": "css", "html (django)": "html", "html (rails)": "html", "html 5": "html", "js": " js", "php": "php", "python django": "python"), "warning_color": "DDB700", "wrap_find": istina ) )

8. Ponovo pokrenite Sublime Text
Dešava se da neki ljudi zaborave na mod za otklanjanje grešaka Sublimelintera. Da biste to omogućili, kliknite desnim tasterom miša bilo gde u oblasti za uređivanje ST3 -> SublimeLinter -> Debug Mode

mob_info