Staňte sa mocným používateľom vznešeného textu

ako vložiť obrázok na iný obrázok vo photoshope

Diskutovať bude Wes Bos moderný pracovný postup a nástroje pre vývojárov frontendu o Vytvorte San Francisco 15. júla. Rezervovať stať sa zakladajúcim členom a získať 50-percentnú zľavu na vstupenky na všetky budúce generácie z celého sveta - na celý život!

Investovanie do nástrojov na vývoj webu je jednou z najdôležitejších vecí, ktoré môžete ako vývojár urobiť. Nielen, že vás zvýši produktivita, ale kvalita vášho kódu sa výrazne zvýši. V tomto článku sa zameriam na editor textov Sublime a pozriem sa na to, ako z neho môžete vyťažiť maximum.

Ovládnite paletu príkazov

Paleta príkazov je jednou z najužitočnejších a najsilnejších častí programu Sublime Text. Zatiaľ čo editor je možné používať pomocou myši a systému ponúk, takmer akýkoľvek príkaz v editore je možné spustiť otvorením palety príkazov (cmd + shift + P). Používanie klávesových skratiek alebo ponuky príkazov je vždy rýchlejšie.

Paleta príkazov používa „fuzzy vyhľadávanie“, čo znamená, že nemusíte zadávať názov celého hľadaného príkazu - ani celého slova. Stačí napísať niekoľko písmen, ktoré sú podobné tomu, čo hľadáte, a zoznam bude filtrovať možnosti. Napríklad filtre „ssx“ pre všetky dostupné príkazy Set Syntax, zatiaľ čo filtre „sx js“ pre všetky dostupné zvýrazňovače syntaxe JavaScriptu.

Otvorte paletu príkazov a uvidíte, čo je možné. Môžete zmeniť syntax dokumentu, premenovať súbor, vyvolať klávesové skratky a vložiť bežne používané kúsky kódu. Keď inštalujete novú funkčnosť prostredníctvom balíkov, príkazy a akcie, ktoré vystavujú, sa pridajú do palety príkazov. Uložte si pravidlo, že kedykoľvek chytíte myš a budete loviť cez vnorenú štruktúru ponuky, otvoríte paletu príkazov a odtiaľ spustíte príkaz!

Odpojte bočný panel

V programe Sublime Text existuje ďalšia paleta s názvom „Choď na čokoľvek“, ktorá umožňuje prejsť na ľubovoľný súbor, definíciu, funkciu, metódu, selektor, riadok alebo stĺpec v projekte. Ak chcete otvoriť položku Choď na čokoľvek, napíšte cmd + P a zobrazí sa výzva so zoznamom dostupných súborov. Fuzzy párovanie stále platí, takže môžeme napísať názov ľubovoľného súboru, ktorý hľadáme, a pred jeho otvorením rýchlo zobraziť jeho ukážku.

Najväčšou výhodou je, že nepotrebujeme skenovať na bočnom paneli súbor, ktorý chceme, ani nemusíme prehliadať hlboko vnorené priečinky. Preškolenie na nepoužívanie bočného panela je pomerne jednoduché a zaistí vám oveľa vyššiu produktivitu.

Balíčky

Jedným z dôvodov, prečo je program Sublime Text taký fantastický editor, je komunita, ktorá preň vytvára doplnky alebo „balíčky“. Rovnako ako v prípade každého softvéru, základná inštalácia pokrýva väčšinu funkcií, ale často ponecháva medzery v prípade konkrétnych typov pracovných postupov. Našťastie pre nás máme k dispozícii takmer 3 000 balíkov, ktoré pokrývajú všetko od integrácie FTP po pridanie užitočných útržkov kódu JavaScript.

Pre prístup k balíkom je potrebné najskôr nainštalovať Package Control (navštívte packageControl.io a postupujte podľa pokynov na karte „Inštalácia“). Ďalej otvorte paletu príkazov a zadaním príkazu „Install Package“ zobrazte zoznam dostupných balíkov.

Ktoré balíčky sú najlepšie? Závisí to od toho, aký typ vývojára ste. Ako frontendový vývojár patrí medzi moje obľúbené položky:

  • Zvýrazňovač farieb - zvýrazní farby RGB, Hex a
  • Premenné Sass / Less / Stylus vo vašom CSS. Už nemusíte hádať, akú farbu # D12028; je!
  • AutoFileName - poskytuje dokončenie priečinkov a súborov pri práci so značkami odkazov a cestami obrázkov
  • Emmet - najlepší spôsob písania HTML / Haml / Jade a CSS / SCSS / Stylus / Less
  • Odtokový žliabok JS Hint - Poskytuje varovania a chyby spojenia JavaScriptu v reálnom čase v žľabe editora

Integrujte Git

Ako vývojári webu sú Git a GitHub hlavnou súčasťou väčšiny našich pracovných postupov. Aj keď Sublime Text úplne nenahrádza potrebu príkazového riadku alebo grafického používateľského rozhrania GitHub, existuje niekoľko balíkov, ktoré pomáhajú pri používaní Gitu priamo z editora.

krok za krokom kreslenie človeka

Ako skúsenému používateľovi Gitu považujem tieto tipy za veľmi užitočné pre rýchlu orientáciu, aby som zistil stav môjho repo. Pre používateľov, ktorí sú v Gite nováčikom, sú tieto balíčky fantastickým spôsobom, ako vám pomôcť pri väčšom pohodlí s Gitom.

  • GitHub Open in Sublime - Prípona Chrome, ktorá ponúka jednoduchý spôsob otvorenia súboru na konkrétnom riadku priamo z GitHubu
  • GitSavvy - Balík pre Sublime Text 3, ktorý poskytuje podporu pre základné príkazy, ako sú init, pridanie, potvrdenie, zmena, pokladňa, ťahanie a tlačenie cez paletu príkazov. Taktiež zavádza funkcie pre inline difúziu, (ne) postupné blokovanie kódu, obviňovanie a prezeranie metadát potvrdenia. Snáď najužitočnejšou funkciou je informačný panel, na ktorom môžete získať vizuálny prehľad o stave celého úložiska a ktorý vám umožní vykonávať v úložisku ľubovoľný počet akcií.
  • Integrácia GitHub - umožňuje používateľom otvoriť GitHub priamo zo Sublime Textu a odkazovať na čísla vydaní v potvrdeniach bez opustenia editora
  • GitGutter - Pri úprave súborov tento balíček vloží do odkvapu vášho bočného panela malé ikony, ktoré označujú stav aktuálneho riadku. Zelené „plus“ pre nové riadky, fialový štvorec pre upravené riadky a červené šípky pre odstránené oblasti

Wes Bos bude diskutovať o modernom pracovnom postupe a nástrojoch pre frontendových vývojárov v San Franciscu

Wes Bos bude diskutovať o modernom pracovnom postupe a nástrojoch pre frontendových vývojárov v San Franciscu

Získajte lepšie zvýraznenie syntaxe

Balík ColorHighlighter vo vašom CSS podčiarkne alebo zvýrazní hexadecimálne kódy, hodnoty RGBA a premenné preprocesora

Balík ColorHighlighter vo vašom CSS podčiarkne alebo zvýrazní hexadecimálne kódy, hodnoty RGBA a premenné preprocesora

Zvýrazňovače syntaxe sú zodpovedné za zmenu farieb vášho kódu. Ak používate niektorý z integrovaných, pravdepodobne ste si všimli, že pri práci s modernými jazykmi, ako sú CSS3 alebo JavaScript, je treba veľa požadovať.

Pretože predvolené zvýrazňovače výrazne zaostávajú za funkciami najnovšieho jazyka, je najlepšie nainštalovať si nasledujúce. To je dôležité, pretože mnohé z ľahko nájditeľných zvýrazňovačov - napríklad CoffeeScript a SCSS - už nie sú udržiavané a chýba im úplná jazyková podpora.

Vylepšite vizualizáciu

Väčšina z nás by mohla Sublime Text používať kdekoľvek medzi štyrmi a ôsmimi hodinami denne, a hoci sa často budeme zaoberať estetikou webového rozhrania, väčšina vývojárov nevenuje žiadnu pozornosť vylepšeniu rozhrania nášho editora. Celý vizuál by som mohol vyplniť vizuálnymi vylepšeniami, ale nasledujúce nastavenia budú mať najväčší vplyv na vašu každodennú produktivitu kódovania.

Najskôr do svojho súboru nastavení, ktorý je k dispozícii v časti Predvoľby> Nastavenia - Používateľ (cmd +,), vložte nasledujúce položky.

MacBook Pro pevný obal 15 palcov
{ 'caret_style': 'solid', 'wide_caret': true, 'highlight_line': true, 'highlight_modified_tabs': true, 'line_padding_bottom': 1, 'line_padding_top': 1, 'bold_folder_labels': true }

Nastavením caret_style na solídny a wide_caret na hodnotu true získate pekný veľký a odvážny striech. Považujem to za užitočné pri spárovaní s highlight_line, pretože vám to umožní rýchlo nájsť v dokumente miesto, kde sa nachádzate pri prepínaní kontextu medzi editorom a prehliadačom.

Hlúpym omylom, ktorý všetci robíme, je zabudnutie uložiť našu prácu pred spustením alebo obnovením nášho kódu. Nastavením hodnoty highlight_modified_tabs na hodnotu true získate vizuálnu indíciu, keď je karta v neuloženom „špinavom“ stave. Predvolená téma Sublime Text zmení farbu textu na vašej karte na oranžovú, ale ostatné témy vám poskytnú žltý kruh v rohu karty.

JSHint Gutter poskytuje spätnú väzbu o chybách, potenciálnych problémoch a štylistických nesprávnych postupoch v reálnom čase

JSHint Gutter poskytuje spätnú väzbu o chybách, potenciálnych problémoch a štylistických nesprávnych postupoch v reálnom čase

Rýchle čítanie a grokovanie kódu je zručnosť, ktorú si zdokonalili mnohí dobrí vývojári. Nastavením parametra line_padding_bottom a line_padding_top na hodnotu 1 umožníme medzi riadkami kódu trochu polstrovania alebo zvýšenia výšky riadku. Aj keď sa na vašu obrazovku zmestí menej kódu, umožní to ľahšie čítanie a pomôže vám sústrediť sa na kód, ktorý máte k dispozícii.

Nakoniec, ak používame bočný panel, nastavenie bold_folder_labels na true pomôže vizuálne odlíšiť súbory a priečinky, čo umožní ľahšie pochopenie rozloženia vnorených priečinkov projektu.

Použite nastavenia špecifické pre projekt

Môžeme zoskupiť viac priečinkov kódu a vytvoriť tak „projekt“ - takže namiesto otvárania všetkých konkrétnych priečinkov pri každej práci na projekte stačí otvoriť súbor „.sublime-project“. Skutočná sila projektov v Sublime Text prichádza, keď začneme používať nastavenia špecifické pre projekt. Všetky nastavenia, ktoré by sme normálne použili v našom hlavnom súbore „Preferences.sublime-settings“, môžu ísť do nášho súboru „.sublime-project“. Do priečinka projektu môžete pridať konkrétne nastavenia pre typ odsadenia, ignorované súbory a priečinky a dokonca aj farebné schémy.

Vďaka nastaveniam špecifickým pre projekt môžete zdieľať súbor .sublime-project so svojím tímom. Osvedčeným postupom je skontrolovať súbor vo svojom Git repo, pretože to umožní celému tímu udržiavať konzistentné nastavenia a synchronizovať ich vo viacerých počítačoch.

Záver

Vznešený text, hoci má jednoduchý vzhľad, je jedným z najsilnejších textových editorov v okolí. Ako vývojár kvalita vášho kódu veľmi závisí od toho, ako dobre svoje nástroje používate. Investícia do editora vám pomôže stať sa lepším a rozhľadenejším vývojárom.

Tento článok sa zaoberá niekoľkými najlepšími funkciami, ktoré program Sublime Text ponúka - ale začína iba tu. Existujú stovky ďalších prispôsobení, vďaka ktorým editor dokonale zapadne do vášho pracovného toku. Odporúčam vám, aby ste sa naďalej učili, ako najlepšie používať Sublime Text - rovnako ako sa naďalej učíte programovacie jazyky.

Nemýľte sa s Wesovou reláciou moderný pracovný postup a nástroje pre vývojárov frontendu o Vytvorte San Francisco . Nestíhate to? Generate je v septembri tiež v Sydney a Londýne; viac podrobností nájdete tu . Tento článok bol pôvodne publikovaný v čísle 268 sieťový časopis .