Domovská » Webový design » Jak přizpůsobit kód Visual Studio

    Jak přizpůsobit kód Visual Studio

    Kód Visual Studio, nový open source editor Microsoftu poskytuje vývojářům mnoho úžasných funkcí, které významně ovlivňují usnadnit proces úpravy zdrojového kódu. Kromě toho, Visual Studio kód také zajišťuje, že uživatelé nebudou nudit, když s ním pracovat, jak to umožňuje jim přizpůsobit několik částí svého vzhledu, jako jsou barvy, fonty, mezery a formátování textu, stejně jako mnoho dalších funkcí, jako například obložení a validaton pravidla.

    V tomto příspěvku se nejprve podíváme jak změnit vzhled pracovního prostoru Visual Studio Code, pak vám ukážu, jak lze pomocí výchozího nastavení upravit výchozí nastavení JSON-formátovaných konfiguračních souborů.

    Jak nastavit barevný motiv na VS kódu

    Kód Visual Studio umožňuje nastavit vlastní motiv barev pro editor.

    Chcete-li použít předem vytvořené téma, klepněte na tlačítko Soubor> Předvolby> Barevný motiv v horním menu. Když narazíte “Zadejte”, Příkazová paleta se zobrazí a zobrazí rozevírací seznam témat, ze kterých si můžete vybrat.

    Stejného efektu můžete dosáhnout, pokud stisknete tlačítko F1 otevřete příkazovou paletu a zadejte příkaz Předvolby: Barevný motiv do vstupního pole.

    Při převrácení možností v rozevíracím seznamu, vzhled pracovního prostoru se mění v reálném čase, takže můžete rychle zjistit, které téma nejlépe vyhovuje vašim potřebám.

    Já vybírám “Vysoký kontrast” barevné téma, protože moje oči nejsou nejlepší. Jak vypadá můj pohled.

    Jak nainstalovat téma z tržiště VS kód

    Pokud se vám nelíbí žádný z barevných motivů VS Code nabízí ve výchozím nastavení, můžete si stáhnout mnoho dalších z VS trhu Market.

    Zde se můžete podívat na témata, která má Marketplace v současné době. Pokud chcete nainstalovat motiv z Marketplace, stiskněte F1 přímo v editoru kódu VS, abyste mohli otevřít příkazovou paletu, zadejte příkaz ext instalace do vstupního pole, nakonec zvolte Rozšíření: Instalace rozšíření ze seznamu, který se objeví.

    Po klepnutí na tuto možnost se objeví nová instance příkazové palety. Zadejte "téma ext instalace" do nového vstupního pole a budete seznam všech témat které jsou dostupné na tržišti VS Code Marketplace.

    Zvolil jsem téma s názvem “Materiál Téma Kit”, a nainstalovat kliknutím na něj. Chcete-li mít nový motiv v seznamu Barevný motiv, na stejném místě, kde jsou ostatní výchozí motivy, musíte restartujte VS kód. Po restartu se nové téma zobrazí v seznamu motivů a můžete jej nastavit z příkazové palety.

    S novým motivem Materiál nyní můj editor vypadá takto:

    Můžete se vrátit k předchozímu tématu (jako jsem to udělal, protože stále dávám přednost tomuto tématu), nebo můžete hrát s některými dalšími tématy, abyste zjistili, která z nich je pro vás nejvhodnější.

    Pokud chcete, můžete také vytvořit vlastní motiv, a publikovat ji na trhu VS kódu pomocí nástroje pro správu rozšíření vsce.

    Změna nastavení uživatele a pracovního prostoru

    VS kód vám nejen umožní nastavit vlastní motiv, ale můžete také konfigurovat mnoho dalších nastavení, jako jsou pravidla formátování, použití různých funkcí, zprávy o selhání, nastavení protokolu HTTP, přidružení souborů, pravidla pro vytváření linií a další.

    To lze provést úpravou dvou konfiguračních souborů, a to jak ve formátu JSON. Nebojte se, nemusíte být profesionál, protože VS Code nabízí velmi přímočarý a intuitivní způsob rychlého přidávání přizpůsobení.

    Nejprve se podívejme, jaký je rozdíl mezi těmito dvěma konfiguračními soubory. VS kód má dva rozsahy (globální a místní) pro nastavení, tedy dva samostatné soubory:

    1. globální settings.json, , ve kterých jsou konfigurační pravidla platná pro každý pracovní prostor
    2. související s pracovním prostorem .vscode / settings.json, to souvisí pouze s individuálním pracovním prostorem

    globální settings.json soubor lze nalézt ve složce, kde váš operační systém ukládá všechny ostatní konfigurační soubory související s aplikací, resp.

    • ve Windows: % APPDATA% Kód Uživatelské nastavení.json
    • v systému Linux: $ HOME / .config / Code / User / settings.json
    • na počítačích Mac: $ HOME / Knihovna / Podpora aplikací / Kód / Uživatel / settings.json

    související s pracovním prostorem settings.json soubor je uložen ve složce aktuálního projektu. Ve výchozím nastavení tento soubor neexistuje, ale jakmile přidáte vlastní nastavení pracovního prostoru, vytvoří kód VS .vscode / settings.json najednou, a umístí do ní vlastní konfigurace specifické pro daný pracovní prostor.

    Takže kdy používáte settings.json soubory?

    Pokud chcete, aby kód VS používal vlastní pravidla konfigurace v Všechno své projekty, dát je do globálního settings.json soubor.

    Pokud chcete, aby vaše nastavení platilo pouze ve vašem stávající projekt, umístit je do pracovního prostoru settings.json soubor.

    Nastavení pracovního prostoru přepíše globální nastavení, buď opatrný.

    Zavolá se globální nastavení “Uživatelské nastavení” ve VS kódu. Otevřete je buď kliknutím na Soubor> Předvolby> Uživatelské nastavení nebo zadáním výrazu “Uživatelské nastavení” do Palety příkazů (otevřete ji pomocí F1).

    VS Code otevírá dva panely vedle sebe: levý obsahuje všechny možnosti, které lze konfigurovat, a pravý zobrazuje globální settings.json soubor. Do tohoto souboru musíte umístit vlastní pravidla pro konfiguraci.

    Jak vidíte, nemusíte dělat nic jiného, ​​stačí zkopírovat a vložit nastavení, která chcete změnit, zleva doprava a přidat upravené hodnoty.

    Podívejme se na krátký příklad (ale můžete provést jakékoliv další úpravy podle vašich individuálních potřeb). Změním rodinu fontů, zkrátím délku a kartu ze standardních čtyř mezer na dva, snižte maximální počet pracovních souborů z devíti na pět a změňte jedno z pravidel pro vkládání CSS, které se týkají duplicitních stylů z "ignorovat" na "Varování".

    Po vložení kopie, mé globální settings.json soubor vypadá takto:

     // Umístěte nastavení do tohoto souboru a přepište výchozí nastavení "editor.fontFamily": "Courier New", "editor.tabSize": 2, "explorer.workingFiles.maxVisible": 5, "css.lint.duplicateProperties" : "Varování" 

    Po uložení upraveného settings.json vzhled mého editoru se změní najednou (na obrázku níže je vidět pouze změna rodiny fontů):

    Nastavení pracovního prostoru můžete změnit podobně. Nyní musíte kliknout na Soubor> Předvolby> Nastavení pracovního prostoru v horní liště nabídek získáte přístup k pracovnímu prostoru .vscode / settings.json soubor.

    Nastavení pracovního prostoru mají přesně stejné možnosti konfigurace jako nastavení uživatele a můžete použít stejnou techniku ​​vkládání kopií. Existují pouze dva rozdíly, rozsah (místní namísto globálního) a settings.json soubor, do kterého budou uloženy vlastní konfigurace.