Katsaus käyttöliittymäkehittäjien Visual Studio -koodiin

Olipa olet koodin aloittelija vai kokenut kehittäjä, koodieditori on välttämätön osa työtäsi. Ongelma, varsinkin jos olet aloittelija, on se, että IDE: lle on paljon vaihtoehtoja. Ja monilla heistä on samanlaiset ominaisuudet, toiminnot ja jopa käyttöliittymä. Tämän seurauksena oikean IDE: n valitseminen saattaa todella viedä enemmän ajattelua ja ajattelua.

Jos kysymyksesi on nyt: “minkä koodieditorin kanssa minun pitäisi aloittaa?”, Vastaisin sitten: “Se riippuu, ystäväni.” Tietyn IDE: n valinta riippuu merkittävästi muutamasta tekijästä: millainen kehittäjä olet, millaisia ympäristöistä, joissa työskentelet pääasiassa, tai onko sinulla yksinoikeus sisäänrakennetulla ominaisuudella, jota tarvitset ehdottomasti saadaksesi töitä tehtyä.

Sanoisin, että tapa valita yksi on kokeilla ja tutkia niitä kaikkia ja valita sitten mikä sopii sinulle parhaiten.

Oikean koodieditorin valitseminen

Kuten suurin osa aloittelijoista, aloitin Notepad ++: lla ensimmäisenä koodieditorina. Tämä on ehkä yksi yksinkertaisimmista IDE-laitteista, joita olen kokeillut. Myöhemmin, kun tarpeeni alkoivat vaatia edistyneempiä toimintoja toimittajalta, kokeilin haarukoita, Atomia ja sitten Visual Studio -koodia.

Kun kohtuullinen määrä kokeiluja, VSCode tuli suosikkini. Se teki minuun vaikutuksen nykyaikaisella käyttöliittymällä, laajalla laajennusten saatavuudella sekä upeilla ominaisuuksilla, kuten sisäänrakennettu Git ja pääte.

Tämän blogin päätarkoitus ei ole verrata erilaisia ​​IDE: itä, vaan keskustella kokemuksestani VSCode: n kanssa. Joten tässä viestissä aion:

  • näytä lyhyt johdanto VSCodeen
  • esittele asennetun tietyn teeman
  • keskustele hyödyllisistä laajennuksista, joita käytän
  • näytä sinulle, kuinka hyödynän VSCode-ominaisuuksia työnkulun parantamiseksi.

Mennään siihen!

Mutta ensin, mikä on VSCode joka tapauksessa?

Visual Studio Code (VSCode) on Microsoftin kehittämä lähdekoodieditori, jota voidaan käyttää Windowsissa, macOS: issa ja Linuxissa. Se on ilmainen, avoimen lähdekoodin ja tarjoaa tukea virheenkorjaukseen sekä sisäänrakennettua Git-version hallintaa, syntaksin korostuksia, katkelmia ja niin edelleen. VSCode-käyttöliittymä on helposti muokattavissa, koska käyttäjät voivat vaihtaa eri teemoihin, pikanäppäimiin ja asetuksiin.

VSCode julistettiin alun perin vuonna 2015 avoimen lähdekoodin projektiksi, jota ylläpidettiin GitHubissa ennen julkaisua verkkoon vuotta myöhemmin. Siitä lähtien Microsoftin koodieditori on saanut suosiota kehittäjien keskuudessa.

Stack Overflow 2018 -kehittäjäkyselyssä VSCode arvioitiin suosituimmaksi kehitysympäristöksi. Yli 35% yli 100 000 vastaajasta ilmoitti käyttävänsä sitä. Upeampana on, että tämä luku on noin 39 prosenttia verkkokehitysalalla.

Ja päivittämällä kuukausittain päivitykset, käyttäjät voivat odottaa nauttivansa vieläkin paremmasta kokemuksesta - virheenkorjauksia, vakautta ja suorituskyvyn parannuksia vaaditaan usein.

Teema: Väri ja kirjasin

Jos olet kuin minä ja välität IDE-teemastasi, sopivan fontin ja teeman värin löytäminen on erittäin tärkeää. Pidän henkilökohtaisesti tummaa teemaa ja vihaan VSCode: n oletuskonsolifonttiä Windowsissa.

Joten Monokai-väriteema ja FiraCode-fontti ovat nykyiset valintani. Tämä yhdistelmä tuo korkean kontrastin, jonka pidän erittäin miellyttävänä työskennellä.

  • Asenna teema valitsemalla asetuskuvake => Väriteema => Valitse haluamasi teema
  • Löydä FiraCode-asennusohjeet täältä.
  • Voit myös tutustua OneDarkProon, joka on toinen hieno tumma teema: Laajennuksissa (Ctrl + Shift + X Windowsissa) etsi OneDarkPro, napsauta Asenna ja valitse se väriteemasta.

Hyödyllisiä laajennuksia (Laajennukset => Haku => Asenna)

Nämä ovat joitain suosikkilaajennuksistani:

  • Kaunista: Kaunista koodia paikallaan ja tee koodisi paremmin luettavissa
  • Bracket Pair Colorizer: sallii haarukoiden tunnistamisen väreillä
Värit (ja {erotetaan oikein?
  • ESLint: pakollinen laajennus Reaktorin tai JavaScriptin kehittäjille yleensä. ESLint-sovellusta käytetään ongelmien ja kirjoitusvirheiden löytämiseen koodistasi, ja sen avulla voit merkitä kyseisen kirjoitusvirheen. Se ehdottaa myös ratkaisuja.
  • HTML-katkelmat: lisää rikkaan kielen tuki HTML-merkinnöille, kuten automaattisen sulkemisen tunnisteet.
  • JavaScript (ES6) -koodinpätkät: melko itsestään selvä
  • Live-palvelin: käynnistä paikallinen palvelin, jolla on reaaliaikaiset latausominaisuudet HTML- tai PHP-sivustollesi
  • Markdown Preview Enhanced: suorita live-palvelin merkintätiedostollesi.
  • Materiaalikuvakkeen teema: tarjoaa kuvakkeita, jotka perustuvat Googlen materiaalisuunnitteluun. Aktivoi napsauttamalla Setting => File Icon Theme => Select Material Icon Theme
  • Mukavampi: muotoile kauniisti JavaScript / TypeScript / CSS-koodi.

Muokkaa käyttöliittymääsi

Voit mukauttaa melkein kaiken, koodisi kirjasinperheestä ja fonttikokosta rivikorkeuteen:

  • Siirry kohtaan Käyttäjäasetukset (Ctrl +,)
  • Etsitään avainsanoja, jotka liittyvät haluamaasi mukautukseen
  • Napsauta asetusten vasemmalla puolella olevaa Muokkaa-painiketta ja valitse Korvaa asetuksissa
  • Valitsemasi asetuksen arvon muuttaminen.

Asetin nykyisessä asetuksessani fontSize arvoon 14, lineHeight arvoon 22 ja tabSize arvoon 3 henkilökohtaisen mieltymykseni (ja hyvän luettavuuden vuoksi).

Asiat, joita toivon tuntevanani alusta alkaen

Näiden teemojen ja laajennusten lisäksi haluaisin kertoa teille, kuinka käytän VSCode-sovelluksen hienoja ominaisuuksia tuottavuuden lisäämiseen. Nämä ovat kaikki asioita, joita en tiennyt aloittelijana, ja jotka olisivat olleet erittäin hyödyllisiä hyödyntämällä ja helpottamalla työnkulkua.

Integroidut päätteet

On tavallaan väistämätöntä, että mitä enemmän aikaa olet ohjelmistojen kehittämisessä, sitä tärkeämmäksi terminaalista tulee. JavaScriptin kehittäjänä asennan päätelaitteita pakettien asennukseen, kehityspalvelimen ajamiseen tai jopa muutosten tekemiseen nykyisessä arkistossani GitHubiin.

Aluksi hoitin pääosin noista tehtävistä Windows Command Prompt tai Git Bash kanssa. Jos käytät Windowsia, saatat tietää, kuinka tyhmä ja ärsyttävä CMD voi olla. Git Bash on mukava työkalu, mutta sovellusten välillä vaihtaminen työskennellessäsi ei ole oikeastaan ​​miellyttävä kokemus.

VSCode todella ratkaisee tämän ongelman minulle fantastisella päätelaitteellaan. Ja hieno asia on, että voit helposti asettaa sen toimimaan samalla tavalla kuin Git Bash, mutta aivan VSCode: n sisällä! Sitten sinulla on mahtava yhdistelmä.

Päästäksesi VSCode-päätteeseen, käytä Ctrl + `(1-näppäimen vasen puoli). Sitten terminaali aukeaa.

Täältä voit tehdä tonnia hienoja asioita, kuten luoda uuden terminaalin tai tappaa olemassa olevan. Voit myös jakaa ne näkyviin sekä sivutiedot.

On hienoa, että useita päätteitä on rakennettu suoraan koodieditoriin, eikö niin?

Lähteen hallinta (Git)

Kun työskentelet arkistossa ja joudut jatkuvasti tekemään muutoksia, löydät normaalisti päätelaitteen toteuttamaan viimeisimmät muutokset, eikö niin? No, VSCode tarjoaa sinulle upean sisäänrakennetun työkalun versioiden hallintaan.

Napsauttamalla vasemmassa paneelissa olevaa Git-kuvaketta tai käyttämällä Ctrl + Shift + G (Windows), pääset helposti lähdeohjaukseen. Täällä voit tehdä kaikki Git-jutut. Niin kätevä, eikö niin?

Kuinka kaikki nämä asiat parantavat työnkulkuani - ja miten ne voivat myös parantaa sinun omaasi?

Suhteellisen pitkän ajan kuluttua VSCode-työskentelystä uskon vakaasti, että sen tärkein arvo perustuu sen all-in-one-ympäristöön. Kaikki tarpeeni ja tehtäväni työnhakijana Front-end-kehittäjänä on hoidettu hienosti ja virheetömästi.

Näiden etujen selkeyttämiseksi anna minun käydä läpi normaalin työnkulun.

Oletetaan, että sain ideoita Reaktin luoman uuden musiikkisovelluksen parissa. Aloitan yleensä projektin luomalla tyhjän kansion - joten luon uuden kansion nimeltä music_react. Sen jälkeen voin heti avata projektin VSCode-sovelluksessa valitsemalla hiiren kakkospainikkeella.

Kun olen töissäni, voin nopeasti luoda tiedoston ja kansiot pikakuvakkeilla vasemmassa paneelissa.

Tässä projektissa haluan käyttää luo-reagoi-sovelluksen alustamista. Siksi minun on ehkä asennettava paketti - ei iso asia. Avaan terminaalini kirjoittamalla Ctrl + `. Hämmästyttävää, että pääte navigoi automaattisesti tarkkaan hakemistooni. Hakemistoja ei enää tarvitse muuttaa.

Kun olet kirjoittanut komentoriville asentaaksesi npm-paketin, minun tarvitsee vain odottaa, kunnes kaikki riippuvuudet on asennettu.

Haluan myös julkaista projektini GitHubissa, joten minun pitäisi todennäköisesti alustaa Git-arkisto. Kun paketit on asennettu, kirjoitan Git-alustuskomennon myös suoraan päätelaitteeseen.

Kun Git on asennettu onnistuneesti, voin sitoutua kaikki odottavat muutokset oikealle vasemman paneelin Source Control -lähteeseen.

Sitten voin jatkaa projektin työskentelyä normaalisti. Lisäksi voin siirtää kaikki muutokset GitHubiin päätelaitteelta, jos haluan.

Käärimistä

Joten se on normaali työnkulku VSCode-ympäristössä. Ymmärrän, että tämä vaihtelee huomattavasti sen mukaan, minkä tyyppinen kehittäjä olet. Taustakehittäjällä voi olla täysin erilainen työnkulku kuin minun.

Jos olet kuitenkin edistyksellinen kehittäjä, joka on juuri tutustumassa VSCodeen, ja haluat tarkistaa sen ennen tutustumista siihen, toivon, että tämä artikkeli antaa sinulle käsityksen ja auttaa parantamaan tuottavuutta. Loppujen lopuksi suurin inspirointini tämän pienen ohjeen kirjoittamiseen on, koska en oikeasti löytänyt perusteellista katsausta VSCode-aloitteesta uusille tulokkaille. Seurauksena on, että tämä blogi voi toivottavasti tuoda sinulle arvoa.

Viimeiseksi, jos asennuksesi on erilainen kuin minun tai on olemassa suuria laajennuksia, jotka mielestäsi ovat mukavia saada, älä epäröi jakaa kommentteja. Olen innoissani kuulevani sinusta!

Se on tämän blogin loppu! Kiitos lukemisesta! Jos pidät siitä, paina

Tervehdykää SM: ssä: Facebook, Twitter, LinkedIn tai henkilökohtainen sivusto.

Pysy ajan tasalla tulevia tech-blogeja