Kotisivu » Web-suunnittelu » Visual Studio -koodin mukauttaminen

    Visual Studio -koodin mukauttaminen

    Visual Studio -koodi, Microsoftin uusi avoimen lähdekoodin editori, tarjoaa kehittäjille monia mahtavia ominaisuuksia, jotka ovat merkittävästi helpottaa lähdekoodin muokkausta. Lisäksi Visual Studio Code varmistaa, että käyttäjiä ei tylsistyä, kun he työskentelevät sen kanssa muokata useita sen ulkoasun osia, kuten värit, fontit, etäisyys ja tekstin muotoilu, aivan kuten monet toiminnot, kuten pölyämistä ja validointisäännöt.

    Tässä viestissä tarkastelemme ensin Visual Studio Code -työtilan ulkoasun muuttaminen, Sitten näytän sinulle, miten voit muokata oletusasetuksia kahden avulla JSON-muotoillut kokoonpanotiedostot.

    Väriaseman asettaminen VS-koodiin

    Visual Studio -koodin avulla voit aseta mukautettu väriteema editorille.

    Voit asettaa esivalmistetun teeman käyttöön napsauttamalla Tiedosto> Asetukset> Väriteema valikosta. Kun osut “Tulla sisään”, komentopaletti avautuu ja näyttää avattavan luettelon niistä aiheista, joista voit valita.

    Voit saavuttaa saman vaikutuksen, jos painat F1 avaa komentopaletti ja kirjoita Asetukset: Väriteema komennon syöttökenttään.

    Kun siirrät vaihtoehdot avattavasta luettelosta, työtilan ulkonäkö muuttuu reaaliaikaisesti, joten voit nopeasti nähdä, mikä teema sopii tarpeisiisi parhaiten.

    Minä valitsen “Korkea kontrasti” väriteema, koska silmäni eivät ole parhaita. Nähdään näkemykseni.

    Teeman asentaminen VS-koodimarkkinoilta

    Jos et pidä mihinkään VS-koodin tarjoamista väriteemoista oletuksena, voit ladata monia muita VS-koodimarkkinoilta.

    Täällä voit tarkastella markkinapaikan nykyisiä teemoja. Jos haluat asentaa teeman Marketplace-sivustosta, osoita F1 VS-koodieditorin sisällä, jotta voit avata komentopaletin, kirjoita sitten ext-asennus komennon syöttökenttään, valitse lopuksi Laajennukset: Asenna laajennus vaihtoehto luettelosta, joka avautuu.

    Kun napsautat tätä vaihtoehtoa, uusi komentorivipaletti tulee esiin. Kirjoita "ext install theme" komento uuteen syöttökenttään saat luettelon kaikista teemoista jotka ovat saatavilla VS-koodimarkkinoilta.

    Valitsen kutsutun teeman “Materiaaliteemapaketti”, ja asenna se napsauttamalla sitä. Jos haluat, että uusi teema on Väriteema-luettelossa, samassa paikassa, jossa muut oletusaiheet ovat käynnistä VS-koodi uudelleen. Uudelleenkäynnistyksen jälkeen uusi teema näkyy teemaluettelossa, ja voit asettaa sen komentopaletista.

    Uudella materiaaliteemalla editori näyttää nyt tältä:

    Voit palata edelliseen teemaan (kuten minäkin, koska pidän silti mieluummin tätä teemaa) tai voit toistaa joitakin muita teemoja, jotta näet, mikä on sinulle sopivin.

    Jos haluat, voit myös luo mukautettu teema, ja julkaise se VS-koodimarkkinoilla käyttämällä vsce-laajennuksenhallintatyökalua.

    Muuta käyttäjän ja työtilan asetuksia

    VS-koodi ei salli vain mukautetun teeman asettamista, mutta voit myös määritä monia muita asetuksia, kuten muotoilusäännöt, eri ominaisuuksien käyttö, kaatumisraportit, HTTP-asetukset, tiedostoyhdistelmät, nukkaussäännöt ja paljon muuta.

    Voit tehdä tämän muokkaamalla kahta konfigurointitiedostoa, molemmat JSON-muodossa. Älä huoli, sinun ei tarvitse olla ammattilainen, sillä VS-koodi tarjoaa melko yksinkertaisen ja intuitiivisen tavan lisätä mukautuksiasi nopeasti.

    Katsotaanpa aluksi, mikä ero on näiden kahden kokoonpanotiedoston välillä. VS-koodilla on kaksi ulottuvuutta (maailmanlaajuinen ja paikallinen) asetuksia varten, joten kaksi erillistä tiedostoa:

    1. maailmanlaajuinen settings.json, jossa konfigurointisäännöt ovat voimassa jokaiselle työtilalle
    2. työtilaan liittyvä .vscode / settings.json, se liittyy vain yksittäiseen työtilaan

    maailmanlaajuinen settings.json tiedosto löytyy kansiosta, jossa käyttöjärjestelmä tallentaa kaikki muut sovellukseen liittyvät kokoonpanotiedostot:

    • Windowsissa: % APPDATA% \ koodi \ Käyttäjä \ settings.json
    • Linuxissa: $ HOME / .config / Koodi / Käyttäjä / settings.json
    • Macissa: $ HOME / Kirjasto / Sovellustuki / Koodi / Käyttäjä / asetukset.json

    työtila liittyvä settings.json tiedosto tallennetaan nykyisen projektin kansioon. Oletuksena tämä tiedosto ei ole olemassa, mutta heti, kun olet lisännyt mukautetun työtilan asetuksen, VS-koodi luo .vscode / settings.json tiedosto kerrallaan, ja asettaa siihen mukautettuja työtilakohtaisia ​​kokoonpanoja.

    Joten milloin käytät settings.json tiedostot?

    Jos haluat, että VS-koodi käyttää mukautettuja kokoonpanosääntöjäsi kaikki hankkeet, laita ne globaaliksi settings.json tiedosto.

    Jos haluat, että asetukset ovat voimassa vain nykyinen projekti, sijoita ne työtilaan settings.json tiedosto.

    Työtilan asetukset ohittavat yleiset asetukset, joten ole varovainen.

    Yleisiä asetuksia kutsutaan “Käyttäjäasetukset” VS-koodissa. Avaa ne joko napsauttamalla Tiedosto> Asetukset> Käyttäjäasetukset valikosta tai kirjoittamalla lauseke “Käyttäjäasetukset” osaksi komentopalettia (avaa se F1: llä).

    VS-koodi avaa kaksi ruutua vierekkäin: vasemmassa on kaikki asetukset, jotka voidaan määrittää, ja oikeanpuoleinen näyttää yleisen settings.json tiedosto. Sinun on asetettava mukautetut kokoonpanosäännöt tähän tiedostoon.

    Kuten näette, sinun ei tarvitse tehdä mitään muuta, kopioi vain muutettavat asetukset vasemmalta puolelta oikealle ja lisää muutetut arvot.

    Katsokaamme lyhyt esimerkki (mutta voit tehdä muutoksia yksilöllisten tarpeiden mukaan). Muutan kirjasinperhettä, pienennän a kieleke oletusarvoista neljästä tilasta kahteen, pienennä työskentelytiedostojen enimmäismäärää yhdeksästä viiteen, ja vaihda yksi CSS-nukkaussäännöistä, jotka koskevat päällekkäisiä tyylejä "jättää huomiotta" että "Varoitus".

    Kopioinnin jälkeisen liittämisen jälkeen maailmanlaajuinen settings.json tiedosto näyttää tältä:

     // Aseta asetukset tähän tiedostoon, kun haluat korvata oletusasetukset "editor.fontFamily": "Courier New", "editor.tabSize": 2, "explorer.workingFiles.maxVisible": 5, "css.lint.duplicateProperties" : "Varoitus" 

    Kun olet tallentanut muokatun settings.json tiedosto, editorin ulkonäkö muuttuu kerralla (alla olevassa kuvassa vain fontin perheen muutos on näkyvissä):

    Voit muuttaa työtilan asetuksia samalla tavalla. Nyt sinun täytyy klikata Tiedosto> Asetukset> Työtilan asetukset päävalikkorivillä, jos haluat käyttää työtilaa .vscode / settings.json tiedosto.

    Työtilan asetuksilla on täsmälleen samat kokoonpanovaihtoehdot kuin Käyttäjäasetukset, ja voit käyttää samaa kopiointitekniikkaa. On vain kaksi eroa, soveltamisala (paikallinen sijasta globaali) ja settings.json tiedosto, johon mukautetut kokoonpanot tallennetaan.