Úvodná » Vzhľad stránky » Ako prispôsobiť kód Visual Studio

    Ako prispôsobiť kód Visual Studio

    Visual Studio Code, nový open source editor spoločnosti Microsoft poskytuje vývojárom množstvo úžasných funkcií uľahčiť proces editácie zdrojového kódu. Okrem toho kód Visual Studio tiež zabezpečuje, že užívatelia nebudú nudiť, keď s nimi pracujú, pretože to im umožňuje prispôsobiť niekoľko častí jeho vzhľadu, ako sú farby, písma, medzery a formátovanie textu, rovnako ako mnoho funkcií, ako napríklad nepĺzne a validaton pravidlá.

    V tomto príspevku sa najprv pozrieme ako zmeniť vzhľad pracovného priestoru kódu Visual Studio, potom vám ukážem, ako prispôsobiť predvolené nastavenia pomocou dvoch JSON-formátované konfiguračné súbory.

    Ako nastaviť farebnú tému na kód VS

    Kód Visual Studio umožňuje nastavte vlastnú farebnú tému pre vášho editora.

    Ak chcete použiť predvolenú tému, kliknite na Súbor> Predvoľby> Tému farieb v hornom paneli ponuky. Keď narazíš “vstúpiť”, zobrazí sa paleta Command Palette a zobrazí rozbaľovací zoznam tém, z ktorých si môžete vybrať.

    Rovnaký efekt môžete dosiahnuť stlačením tlačidla F1 otvorte príkazovú paletu a zadajte príkaz Predvoľby: Tón farieb do vstupného poľa.

    Počas rolovania nad možnosťami v rozbaľovacom zozname, vzhľad pracovného priestoru sa mení v reálnom čase, takže môžete rýchlo zistiť, ktorá téma najlepšie vyhovuje vašim potrebám.

    Som chooe “Vysoký kontrast” farebná téma, pretože moje oči nie sú najlepšie. Tu je môj pohľad.

    Ako nainštalovať téma z VS kódového trhu

    Ak sa vám nepáči žiadna z farebných motívov, ktoré VS Code ponúka predvolene, môžete stiahnuť mnoho ďalších z VS Code Marketplace.

    Tu sa môžete pozrieť na témy, ktoré má v súčasnosti trhovisko. Ak chcete nainštalovať tému z Marketplace, stlačte F1 priamo do vášho editora kódu VS, aby ste otvorili príkazovú paletu, a potom napíšte ext install príkaz do vstupného poľa, konečne vyberte Rozšírenia: Inštalácia rozšírenia v zozname, ktorý sa objaví.

    Po kliknutí na túto možnosť sa objaví nová inštancia palety príkazov. Zadajte reťazec "ext install theme" príkaz do nového vstupného poľa a vy získate zoznam všetkých tém ktoré sú k dispozícii na trhu VS Code Marketplace.

    Vybral som tému nazvanú “Materiálová sada námetov”, a nainštalujte ho kliknutím na neho. Ak chcete mať novú tému v zozname Téma farieb, na tom istom mieste, kde sú ostatné predvolené témy, musíte reštartujte kód VS. Po reštartovaní sa nová téma zobrazí v zozname tém a môžete ju nastaviť z palety príkazov.

    S novým materiálovým motívom môj editor teraz vyzerá takto:

    Môžete sa vrátiť k predchádzajúcej téme (ako som to urobil, lebo stále preferujem túto tému), alebo si môžete zahrať ešte niečo s inými témami, aby ste zistili, ktorá z nich je pre vás najvhodnejšia.

    Ak chcete, môžete tiež vytvorte vlastnú tému, a zverejnite ho na VS Code Marketplace pomocou nástroja Správca rozšírení vsce.

    Zmeňte nastavenia používateľov a pracovného priestoru

    Kód VS vám neumožňuje iba nastaviť vlastnú tému, ale môžete tiež konfigurovať mnoho ďalších nastavení, ako sú pravidlá pre formátovanie, používanie rôznych funkcií, hlásenia o zlyhaní, nastavenia HTTP, združenia súborov, pravidlá lintingu a ďalšie.

    Môžete to urobiť úpravou dvoch konfiguračných súborov vo formáte JSON. Nebojte sa, nemusíte byť pro, pretože VS Code ponúka docela jednoduchý a intuitívny spôsob, ako rýchlo pridať svoje prispôsobenia.

    Spočiatku uvidíme, aký je rozdiel medzi týmito dvoma konfiguračnými súbormi. Kód VS má dva rozsahy (globálnej a miestna) pre nastavenia, teda oddelené súbory:

    1. globálne settings.json, v ktorých sú pravidlá konfigurácie platné pre každý pracovný priestor
    2. pracovného priestoru .vscode / settings.json, to súvisí len s jednotlivým pracovným priestorom

    globálnej settings.json súbor nájdete v priečinku, v ktorom váš operačný systém ukladá všetky ostatné konfiguračné súbory týkajúce sa aplikácie:

    • v systéme Windows: % AppData% \ Code \ User \ settings.json
    • na Linuxe: $ HOME / .config / Code / User / settings.json
    • na počítači Mac: $ HOME / Knižnica / Podpora aplikácií / Kód / Používateľ / settings.json

    Pracovný priestor súvisiace settings.json súbor je uložený v priečinku aktuálneho projektu. Štandardne tento súbor neexistuje, ale akonáhle pridáte vlastné nastavenie pracovného priestoru, vytvorí sa kód VS .vscode / settings.json Súbor naraz a umiestni do neho prispôsobené konfigurácie pracovného priestoru.

    Takže keď používate settings.json súbory?

    Ak chcete, aby kód VS používal vaše vlastné pravidlá konfigurácie všetko vaše projekty, vložte ich do globálneho settings.json súbor.

    Ak chcete, aby vaše nastavenia boli platné len vo vašom súčasný projekt, umiestnite ich do pracovného priestoru settings.json súbor.

    Nastavenia pracovného priestoru prekonávajú globálne nastavenia, buď opatrný.

    Globálne nastavenia sa volajú “Nastavenia používateľa” v kóde VS. Otvorte ich buď kliknutím na Súbor> Predvoľby> Nastavenia používateľa alebo začnite písať výraz “Nastavenia používateľa” do príkazovej palety (otvorte ju s F1).

    Kód VS otvorí dve tabuľky vedľa seba: ľavý obsahuje všetky možnosti, ktoré je možné nakonfigurovať a ten pravý zobrazuje globálne settings.json súboru. Na tento súbor je potrebné umiestniť vlastné pravidlá konfigurácie.

    Ako vidíte, nemusíte robiť nič iné, len skopírujte a vložte nastavenia, ktoré chcete zmeniť z ľavej strany doprava a pridajte upravené hodnoty.

    Poďme sa pozrieť na krátky príklad (ale môžete vykonať ďalšie úpravy podľa vašich individuálnych potrieb). Zmením rodinu fontov, zmením dĺžku a pútko z predvolených štyroch priestorov na dva, znížte maximálny počet pracovných súborov z deviatich na päť a zmeníte jeden z pravidiel CSS pre linting týkajúci sa duplicitných štýlov z "ignorovať" na "výstraha".

    Po vložení kópií, môj globálny settings.json súbor vypadá takto:

     // Umiestnite svoje nastavenia do tohto súboru, aby ste prepísali predvolené nastavenia "editor.fontFamily": "Courier New", "editor.tabSize": 2, "explorer.workingFiles.maxVisible": 5, "css.lint.duplicateProperties" : "výstraha" 

    Po uložení upraveného settings.json súbor, vzhľad môjho editora sa zmení okamžite (na snímke obrazovky je viditeľná len zmena rodiny písiem):

    Môžete zmeniť nastavenia pracovného priestoru podobne. Teraz musíte kliknúť na Súbor> Predvoľby> Nastavenia pracovného priestoru v hornom paneli s ponukou prístupu k pracovnému priestoru .vscode / settings.json súbor.

    Nastavenia pracovného priestoru majú presne rovnaké konfiguračné možnosti ako nastavenia používateľa a môžete použiť rovnakú techniku ​​vkladania kópií. Existujú len dva rozdiely, oblasť (lokálna namiesto globálnej) a oblasť settings.json do ktorého sa uložia vaše vlastné konfigurácie.