8 Tehokkaat Visual Studio -koodilaajennukset Front-end-kehittäjille

Vaikka Microsoft julkaisi ensimmäisen vakaan version Visual Studio Code: sta, sen tehokkaasta koodieditorista vasta muutama kuukausi sitten, maaliskuussa 2016, sillä on jo useita laajennuksia, jotka voivat ottaa koodauskokemuksen seuraavaan tasoon. viralliset Visual Studio -koodilaajennukset ovat isäntänä Visual Studio Code Marketplace -ympäristössä, joista monet voivat olla suuri apu web-kehittäjille.

Tätä viestiä varten testasin joukon VS-koodin laajennuksia, jotka liittyivät etukäteen kehitykseen, ja tein luettelon niistä, jotka löysin eniten intuitiivinen, helppokäyttöinen ja kätevä. Se ei ole lopullinen luettelo. Selaa markkinapaikkaa itsellesi ja katso, mitä muuta se voi tarjota sinulle, varsinkin kun monet suuret laajennukset ovat vielä tulossa.

VS-koodilaajennusten asentaminen

Laajennuksen asentaminen on melko yksinkertaista Visual Studio -koodissa, kuten voit tee se koodieditorissa. VS-koodimarkkinoilla jokaisella laajennuksella on oma sivu, ja voit löytää komennon, johon voit asentaa annetun laajennuksen tämän sivun yläreunassa.

Komento alkaa aina ext-asennus termi. Asenna laajennus vain Lehdistö CTRL + P VS-koodin sisällä käynnistää Quick Open -paneelin, kopioi tämä komento siihen ja lopulta käynnistä koodieditori uudelleen tehdä uusi laajennus.

8 Tehokkaat Visual Studio -koodilaajennukset

1. HTML-pätkät

   Jos haluat kirjoittaa HTML-koodin usein Visual Studio -koodissa, HTML-koodinpidennykset voivat olla kätevä työkalu lisää HTML-sovelluksen tukevan tuen. Vaikka VS-koodilla on HTML-pohjainen tuki, kuten syntaksin väritys, HTML-katkelman laajennus tietää paljon enemmän.

   

   Luultavasti tämän laajennuksen hyödyllisin piirre on se kun kirjoitat HTML-tunnisteen nimen (ilman aloituskulman kiinnikettä), HTML-pätkät nopeasti näyttää luettelon käytettävissä olevista vaihtoehdoista lyhyt tiedot kustakin.

   

   Kun napsautat tarvitsemasi elementtiä, HTML-koodinpätkät lisäävät koko HTML5-tunnisteen yleisimmillä ominaisuuksillaan. Jos esimerkiksi haluat lisätä asiakirjan linkin (ankkuritunnisteen), kirjoita vain VS-koodiin, valitse oikea vaihtoehto ponnahdusikkunassa, ja HTML-pätkät lisäävät tarvittavat leikkaa editoriin ilman vaivaa.

   Tämän laajennuksen tekijä kiinnittää huomiota myös poistamaan vanhentuneet elementit, joten jos haluat käyttää HTML-tunnistetta, jota et löydä ponnahdusikkunassa, kannattaa tarkistaa, onko se edelleen voimassa vai ei.

2. HTML CSS -luokitus

   HTML CSS Class Completion voi olla hyödyllinen laajennus, jos tarvitset monia CSS-luokat hankkeessa. Usein tapahtuu meille kehittäjille, että olemme ei ole täysin varma luokan tarkasta nimestä, mutta se vain istuu mielemme takana passiivisena tietona.

   Tämä älykäs laajennus antaa ratkaisun tähän ongelmaan noutaa kaikkien CSS-luokkien nimet nykyisessä työtilassa ja näyttää luettelon niistä.

   

   Oletetaan, että haluat luoda sivuston käyttämällä Zurb-säätiötä, ja haluat käyttää pientä verkkoa. Et muista, miten luokat on nimetty, mutta tiedät, että niillä on semanttisia nimiä.

   HTML CSS Class Completionin avulla sinun tarvitsee vain aloittaa sanan kirjoittaminen pieni, ja käytettävissä olevat vaihtoehdot näkyvät näytössä kerralla, joten voit helposti valita haluamasi.

   

3. Näytä selaimessa

   Näytä selaimessa on yksinkertainen, mutta tehokas laajennus Visual Studio -koodille. Se voi helpottaa etupään kehitystä antamalla sinulle mahdollisuuden tarkastele nopeasti työsi tuloksia selaimessa koodauksen aikana. Voit avata HTML-tiedoston oletusselaimessasi suoraan VS-koodista painamalla CTRL + F1 pikanäppäin.

   Huomaa, että Näytä selaimessa tukee vain HTML: ää, joten jos haluat nähdä sivustosi, sinun täytyy avata HTML-tiedosto. Sinä ei voi suoraan käyttää selainta CSS- tai JavaScript-tiedostosta.

   

4. Debugger for Chrome

   Microsoftin itse rakensi Chrome-virheenkorjausohjelman, ja se on tällä hetkellä neljänneksi ladatuin Visual Studio -koodilaajennus.

   Debugger for Chrome mahdollistaa vianmääritys Google Chromeissa poistumatta koodieditorista. Tämä tarkoittaa, että sinun ei tarvitse työskennellä selaimen näkemänsä transpiloidun JavaScriptin kanssa, mutta voit suorita virheenkorjaus suoraan alkuperäisistä lähdetiedostoista. Katso tämä demo nähdäksesi, miten se toimii.

   

   Laajennuksella on jokainen ominaisuus, joka tarvitsee kunnollisen debuggerin, kuten katkaisukohdan asetus, muuttuva katselu, askel, kätevä debug-konsoli, ja monet muut (katso ensimmäisen julkaisun ominaisuusluettelo).

   Jos haluat käyttää tätä laajennusta, sinun on käynnistettävä Chrome etäkäyttötarkoitus käytössä, ja perustaa oikea launch.json tiedosto. Jälkimmäinen voi kestää jonkin aikaa, mutta löydät yksityiskohtaiset ohjeet GitHubista siitä, miten se tehdään oikein.

5. JSHint

   Visual Studio Code -sovelluksen JSHint-laajennus yhdistää suositun JSHint JavaScript -liittimen suoraan koodieditoriin, joten voit ilmoitettava virheistäsi heti, kun olet sitoutunut niihin. Oletuksena JSHint-laajennus käyttää linterin oletusasetuksia, joita voit muokata kokoonpanotiedoston avulla.

   

   Tämän laajennuksen käyttö on melko yksinkertaista, koska JSHint merkitsee virheet punaisella ja ilmoitukset vihreällä alleviivalla. Jos haluat lisätietoja asioista, siirrä vain alleviivattujen osien yli, ja JSHint lyö merkinnän ongelman kuvauksella kerralla.

   

6. jQuery-koodinpätkät

   jQuery-koodinpätkät voivat nopeuttaa huomattavasti Visual Studio -koodin etupään kehitystä, koska sen avulla voit nopeasti kirjoittaa jQueryn ilman syntaksihäiriöitä. jQuery-koodinpätkät tällä hetkellä on noin 130 saatavilla olevaa katkelmia voit vedota kirjoittamalla oikean liipaisimen.

   

   Kaikki jQuery-koodinpätkät, mutta yksi alkaa JQ etuliite. Yksi poikkeus on func käynnistää sen lisää nimettömän toiminnon editoriin.

   Tämä kätevä laajennus on kätevä apu, kun et ole täysin varma oikeasta syntaksista, ja haluat säästää aikaa tarkistaa asiakirjat. Se helpottaa myös helposti käytettävissä olevien asetusten selaamista.

   

7. neitsytkammio

   Bower VS -koodilaajennus voi tehdä Web-kehitystyönkulun intuitiivisemmaksi integroimalla Bower-paketinhallinnan Visual Studio -koodiin.

   Jos laitat tämän laajennuksen käyttöön ei tarvitse siirtyä edestakaisin päätelaitteen ja editorin välillä, mutta voit helposti suorittaa pakettien hallintatehtävät Visual Studio -koodin sisällä.

   

   Bower-laajennus johtaa sinut projektin luomiseen bower.json tiedosto, ja voit myös asentaa, poistaa, hakea, päivittää paketteja, hallita välimuistia ja suorittaa monia muita tehtäviä (katso koko ominaisuusluettelo).

   Sinä pystyt Pääset Boweriin liittyviin komentoihin käynnistämällä komentopaletti painamalla F1, konekirjoitus “neitsytkammio” tulopalkkiin napsauttamalla “neitsytkammio” -vaihtoehto avattavasta luettelosta, ja valitse oikea Bower-komento.

   

8. Git-historia

   Git-historia mahdollistaa noudata Git-projektin muutoksia Visual Studio -koodin sisällä. Tämä laajennus on erityisen hyödyllinen, kun haluat osallistua isompaan Github-projektiin, ja tarvitset tavan tarkistaa muut muut kehittäjät.

   Voit asentaa Git History -laajennuksen tarkastella historiaa koko tiedostosta, tai a erityisesti linja sen sisällä. Voit myös vertaa aiempia versioita sama tiedosto.

   

   Voit käyttää Git-historiaan liittyviä komentoja, jos kirjoitat sanan “git” osaksi komentopalettia (F1), valitse “git” avattavasta luettelosta ja valitse lopuksi tarvittava komento. Ota huomioon, että sinun on avattava tiedosto josta haluat nähdä historian, ennen kuin voit suorittaa mitään toimia.