Domača » Oblikovanje spletnih strani » Kako prilagoditi kodo Visual Studio

    Kako prilagoditi kodo Visual Studio

    Visual Studio Code, nov Microsoftov odprtokodni urejevalnik kode ponuja razvijalcem veliko čudovitih funkcij olajšati proces urejanja izvorne kode. Poleg tega Visual Studio Code zagotavlja, da uporabnikom ne bo dolgčas, ko delajo z njim, saj jim to omogoča prilagodite več delov videza, kot so barve, pisave, razmiki in oblikovanje besedila, tako kot mnoge funkcionalnosti, kot je npr linting in pravila validacije.

    Na tem mestu bomo najprej pogledali kako spremeniti izgled delovnega prostora kode Visual Studio, potem vam bom pokazal, kako prilagoditi privzete nastavitve s pomočjo dveh JSON-oblikovane konfiguracijske datoteke.

    Kako nastaviti barvno temo na VS kodo

    Visual Studio Code vam omogoča nastavite barvno temo po meri za urejevalnika.

    Če želite uporabiti vnaprej pripravljeno temo, kliknite na Datoteka> Nastavitve> Barvna tema v zgornji menijski vrstici. Ko udariš “Vnesite”, Ukazna paleta se prikaže in prikaže spustni seznam tem, med katerimi lahko izbirate.

    Enak učinek lahko dosežete, če pritisnete F1 , da odprete ukazno paleto, in vnesite Nastavitve: Barvna tema vnosno polje.

    Ko preletite možnosti na spustnem seznamu, videz delovnega prostora se spreminja v realnem času, tako lahko hitro vidite, katera tema najbolje ustreza vašim potrebam.

    Izbiram “Visok kontrast” barvna tema, saj moje oči niso najboljše. Izgleda moj pogled.

    Kako namestiti temo iz VS Code Marketplace

    Če vam ni všeč nobena od barvnih tem, ki jih privzeto ponuja koda VS, lahko prenesete veliko drugih iz tržnice VS Code.

    Tukaj si lahko ogledate teme, ki jih trenutno ponuja Marketplace. Če želite namestiti temo s spletnega mesta Marketplace, pritisnite F1 v urejevalniku VS kode, da odprete ukazno paleto, nato vnesite ext install ukaz v polje za vnos, končno izberite Razširitve: Namesti razširitev na seznamu, ki se prikaže.

    Ko kliknete to možnost, se pojavi nov primerek ukazne palete. Vnesite »temo namestitve ext« ukaz v novo vnosno polje in ga boste dobite seznam vseh tem ki so na voljo na tržnici VS Code.

    Izbiram temo, imenovano “Komplet tematskih materialov”, in ga namestite s klikom na. Če želite imeti novo temo na seznamu Barvna tema, na istem mestu, kjer so druge privzete teme, morate to storiti ponovno zaženite kodo VS. Po ponovnem zagonu se nova tema pojavi na seznamu tem in nastavite jo lahko iz ukazne palete.

    Z novo temo materiala je moj urednik zdaj videti tako:

    Lahko se vrnete na prejšnjo temo (kot sem jaz, ker še vedno imam raje to temo) ali pa se lahko z drugimi temami poigrate še več, da vidite, katera je najbolj primerna za vas..

    Če želite, lahko tudi ustvarite temo po meri, in jo objavite na VS Code Marketplace z uporabo orodja za razširitev vsce.

    Spremeni nastavitve uporabnika in delovnega prostora

    Koda VS ne omogoča le, da nastavite temo po meri, temveč lahko tudi konfigurirate še veliko drugih nastavitev, kot so pravila za oblikovanje, uporaba različnih funkcij, poročila o zrušitvah, nastavitve HTTP, združitve datotek, pravila za vnašanje besedila in drugo..

    To lahko storite tako, da uredite dve konfiguracijski datoteki, oba v JSON formatu. Ne skrbite, ne potrebujete profesionalca, saj VS koda ponuja precej preprost in intuitiven način za hitro dodajanje prilagoditev.

    Najprej poglejmo, kakšna je razlika med obema konfiguracijskima datotekama. Koda VS ima dva področja (globalno in lokalni) za nastavitve, torej dve ločeni datoteki:

    1. globalno settings.json, v katerih veljajo konfiguracijska pravila za vsak delovni prostor
    2. povezane z delom .vscode / settings.json, ki je povezana samo s posameznim delovnim prostorom

    The globalno settings.json datoteko najdete v mapi, v kateri vaš operacijski sistem shranjuje vse druge konfiguracijske datoteke, povezane z aplikacijo, in sicer:

    • v sistemu Windows: % APPDATA% Uporabniški \ t
    • v Linuxu: $ HOME / .config / Code / Uporabnik / settings.json
    • v računalniku Mac: $ HOME / Knjižnica / Podpora za aplikacijo / Koda / Uporabnik / settings.json

    The povezane z delom settings.json Datoteka je shranjena v mapi trenutnega projekta. Privzeto ta datoteka ne obstaja, vendar takoj, ko dodate prilagojeno nastavitev delovnega prostora, VS koda ustvari a .vscode / settings.json datoteko naenkrat in v to postavi prilagojene konfiguracije za delovni prostor.

    Torej, kdaj uporabite settings.json datotek?

    Če želite, da VS koda uporablja vaše nastavitvene konfiguracije po meri vse svoje projekte, jih postavite v globalno settings.json mapa.

    Če želite, da so vaše nastavitve veljavne samo v vašem trenutni projekt, jih umestite v delovni prostor settings.json mapa.

    Nastavitve delovnega prostora preglasijo globalne nastavitve, zato bodite previdni.

    Kličejo se globalne nastavitve “Uporabniške nastavitve” v Kodeksu VS. Odprite jih bodisi s klikom na Datoteka> Nastavitve> Uporabniške nastavitve ali začnete vnašati izraz “Uporabniške nastavitve” v paleto ukazov (odprite jo s F1).

    Koda VS odpre dve okni drug poleg drugega: leva vsebuje vse možnosti, ki jih je mogoče konfigurirati, desna pa prikaže globalno settings.json mapa. Pravila za konfiguracijo po meri morate postaviti v to datoteko.

    Kot lahko vidite, vam ni treba storiti ničesar drugega, samo kopirajte nastavitve, ki jih želite spremeniti, z leve strani na desno in dodajte spremenjene vrednosti.

    Oglejmo si kratek primer (vendar lahko naredite kakršne koli druge spremembe glede na vaše individualne potrebe). Spremenil bom družino pisav, zmanjšal dolžino a zavihek od privzetih štirih presledkov do dveh, zmanjšajte največje število delovnih datotek z devetih na pet in spremenite eno od pravil za izdajanje CSS, ki se nanašajo na podvojene sloge iz "prezri" do "Opozorilo".

    Po kopiranju, moje globalno settings.json datoteka izgleda takole:

     // Postavite svoje nastavitve v to datoteko, da prepišete privzete nastavitve "editor.fontFamily": "Courier New", "editor.tabSize": 2, "explorer.workingFiles.maxVisible": 5, "css.lint.duplicateProperties" : "Opozorilo" 

    Po shranjevanju spremenjenega settings.json datoteka, videz mojega urejevalnika se takoj spremeni (na spodnjem posnetku zaslona je vidna samo sprememba družine pisav):

    Podobno lahko spremenite nastavitve delovnega prostora. Sedaj morate klikniti na Datoteka> Nastavitve> Nastavitve delovnega prostora v zgornji menijski vrstici za dostop do povezanega delovnega prostora .vscode / settings.json mapa.

    Nastavitve delovnega prostora imajo popolnoma enake nastavitve kot uporabniške nastavitve in lahko uporabite isto tehniko kopiranja. Obstajata samo dve razliki, področje (lokalno in ne globalno) in settings.json datoteko, v katero bodo shranjene vaše nastavitve po meri.