VS Coden asennus ja hyödylliset asetukset

01Mikä VS Code on ja miksi sitä käytetään?

Visual Studio Code on Microsoftin kehittämä ilmainen ja avoimeen lähdekoodiin perustuva koodieditori. Se on kevyt, toimii samalla tavalla Windowsissa, macOSissa ja Linuxissa ja sopii tuhansien lisäosien ansiosta lähes mihin tahansa kieleen HTML:stä Pythoniin.

Sisäänrakennettu terminaali, Git-integraatio, älykäs koodin täydennys ja virheenkorjain tulevat samassa ikkunassa. Siksi siitä on tullut oletuseditori web-kehittäjille, opiskelijoille ja yrittäjille, jotka tekevät sivustonsa pieniä muutoksia itse.

Vaikka nimi on samankaltainen, se ei ole sama tuote kuin Visual Studio. Visual Studio on suuriin .NET-projekteihin suunnattu, paljon raskaampi kehitysympäristö; VS Code on nopeasti käynnistyvä, lisäosilla kasvava editori.

Jos olet koneella, johon et voi asentaa mitään, voit tehdä pieniä muutoksia selaimessa toimivalla vscode.dev-versiolla. Terminaali ja useimmat lisäosat toimivat kuitenkin täysin vain työpöytäversiossa; tämän oppaan vaiheet koskevat työpöytäasennusta.

02Asennus Windowsissa, macOSissa ja Linuxissa

Virallinen latausosoite on code.visualstudio.com; älä lataa asennusohjelmaa muilta sivustoilta. Valitse käyttöjärjestelmääsi sopiva tapa.

Windows

User Installer asentaa vain sinun tilillesi pyytämättä ylläpitäjän oikeuksia ja on suositeltu vaihtoehto useimmille käyttäjille. Valitse asennuksen aikana Add to PATH sekä Explorerin kontekstivalikon ”Open with Code” -vaihtoehdot; voit sitten avata kansion suoraan editorissa napsauttamalla sitä hiiren oikealla.

winget install -e --id Microsoft.VisualStudioCode

macOS

Siirrä lataamasi sovellus Applications-kansioon. Jotta voit käyttää komentoa code terminaalista, avaa editorissa komentopaletti näppäimillä Cmd+Shift+P ja suorita komento Shell Command: Install 'code' command in PATH.

brew install --cask visual-studio-code

Linux

Debian- ja Ubuntu-pohjaisissa järjestelmissä voit asentaa sivustolta .deb-paketin, Fedoran kaltaisissa .rpm-paketin. .deb-paketti lisää Microsoftin pakettivaraston järjestelmään päivityksiä varten. Snapia käyttävissä jakeluissa yksi komento riittää.

# Ladatulla .deb-paketilla (Ubuntu / Debian)
sudo apt install ./code_*.deb

# Snap ile
sudo snap install code --classic

03Miten VS Coden kieli vaihdetaan?

Käyttöliittymän kielen vaihtamiseksi riittää asentaa Microsoftin virallinen kielipaketti; tässä esimerkkinä turkin kielen Turkish Language Pack -lisäosa. Kirjoita lisäosien paneelissa (Ctrl+Shift+X) ”Turkish” ja asenna; vahvista, kun editori ehdottaa uudelleenkäynnistystä. Muille tuetuille kielille menetelmä on sama.

Kielen vaihtamiseksi myöhemmin suorita komentopaletissa komento Configure Display Language ja valitse kieli luettelosta. Koska suurin osa internetin esimerkeistä on kirjoitettu englanninkielisillä valikkonimillä, jotkut kehittäjät jäävät tietoisesti englanninkieliseen käyttöliittymään; tämä on täysin henkilökohtainen valinta.

code --install-extension MS-CEINTL.vscode-language-pack-tr

04Hyödylliset lisäosat ensiasennuksessa

Lisäosia on paljon, mutta vähän ja oikeita lisäosia on parempi: jokainen lisäosa kasvattaa käynnistysaikaa ja muistinkäyttöä. Verkkokehitykseen suosittelemme aluksi alla olevaa listaa; voit asentaa ne myös komentoriviltä lisäosien tunnisteilla.

• Tarkista ennen lisäosan asennusta julkaisijan nimi ja latausmäärä; varo samannimisiä väärennettyjä lisäosia.
• Poista lisäosat, joita et käytä, tai ota ne käyttöön vain asianomaisessa työtilassa.

code --install-extension esbenp.prettier-vscode
code --install-extension dbaeumer.vscode-eslint
code --install-extension EditorConfig.EditorConfig

# Kurulu eklentileri listele
code --list-extensions

05Suositellut VS Code -asetukset

Voit muuttaa asetuksia käyttöliittymästä (Ctrl+, ) tai muokata settings.json-tiedostoa suoraan komentopaletin komennolla Preferences: Open User Settings (JSON). Alla olevat asetukset ovat hyvä lähtökohta useimpiin verkkoprojekteihin.

Tehokkain asetus on muotoilu tallennettaessa: aina kun tallennat tiedoston, Prettier siistii koodin, ja sisennyskiistat katoavat.

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "files.autoSave": "onFocusChange",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.eol": "\n"
}

Projektikohtaiset asetukset

Jos säännöt vaihtelevat projektista toiseen, kirjoita asetukset projektikansion tiedostoon .vscode/settings.json. Kun tiedosto lisätään repositorioon, kaikki tiimissä työskentelevät noudattavat samoja muotoilusääntöjä.

Järjestyksen luominen profiileilla

Jos käytät eri töihin eri lisäosakokoelmia, profiili-ominaisuus helpottaa työtäsi. Esimerkiksi ”Web”-profiilissa Prettier ja ESLint ovat käytössä, ”Python”-profiilissa vain Python-lisäosat. Profiilit luodaan vasemmassa alakulmassa olevan hammasratas-kuvakkeen Profiles-valikosta, ja niitä voi vaihtaa kansion mukaan. Näin jokaisessa projektissa ladataan vain tarvitsemasi lisäosat ja editori käynnistyy nopeammin.

WSL ja etäyhteys

Jos työskentelet Windowsissa Linux-työkaluilla, Microsoftin WSL-lisäosa yhdistää VS Coden suoraan Linux-ympäristön tiedostoihin; terminaali, lisäosat ja Git toimivat Linux-puolella. Samasta perheestä oleva Remote - SSH -lisäosa puolestaan antaa muokata palvelimen tiedostoja kuin ne olisivat paikallisella tietokoneellasi.

Asetusten synkronointi

Jos käytät useampaa tietokonetta, ota käyttöön Settings Sync vasemman alakulman tilikuvakkeesta. Microsoft- tai GitHub-tililläsi asetukset, lisäosat ja pikanäppäimet synkronoituvat automaattisesti.

06Git-integraatio ja sisäänrakennettu terminaali

VS Code tunnistaa tietokoneellesi asennetun Gitin automaattisesti. Vasemmalla olevassa versionhallinta-paneelissa (Ctrl+Shift+G) näet muuttuneet tiedostot, tarkastelet rivikohtaisia eroja, kirjoitat commit-viestin ja tallennat yhdellä napsautuksella. Repositorion lähettämisen GitHubiin olemme kuvanneet yksityiskohtaisesti oppaassamme projektin lataaminen GitHubiin.

Sisäänrakennettu terminaali avautuu pikanäppäimellä Ctrl+` ja käynnistyy suoraan projektikansiossa. Jos haluat Windowsissa vaihtaa oletuskomentotulkin PowerShellistä Git Bashiksi, käytä terminaalipaneelin pudotusvalikon vaihtoehtoa Select Default Profile.

• Jos Gitiä ei ole asennettu, paneeli näyttää varoituksen; asenna ensin Git ja käynnistä editori uudelleen.
• JavaScript-projekteissa voit ajaa npm-komennot tässä terminaalissa, kun Node.js-asennus on valmis.
• Uuden React-projektin aloittamiseen oppaamme Vite React -asennus on hyvä seuraava askel.

07Aikaa säästävät pikanäppäimet

Muutaman pikanäppäimen opettelu vähentää merkittävästi hiireen tarttumista. macOSissa käytetään Ctrlin sijaan Cmd-näppäintä ja Altin sijaan Option-näppäintä.

08Yleiset ongelmat ja ratkaisut

VS Code toimii yleensä ongelmitta; useimmat ongelmat johtuvat lisäosista tai PATH-asetuksesta. Jos editori on hidastunut, näet komentopaletin komennolla Developer: Show Running Extensions, mikä lisäosa kuormittaa.

Jos komentoa code ei tunnisteta terminaalissa, suorita Windowsissa asennusohjelma uudelleen Add to PATH -valinnalla, macOSissa toista Shell Command -komento. Jos muotoilu tallennettaessa ei toimi, oletusmuotoilijaa ei yleensä ole valittu; napsauta tiedostoa hiiren oikealla ja tee Prettieristä oletus valikosta Format Document With.

Verkkoprojektissa editoriasetusten lisäksi tulos on tärkeä: puhdas ja johdonmukainen koodi helpottaa myös nopeus- ja suorituskykyoptimoinnin sekä UI/UX-suunnittelun ylläpitoa. Aurora Yazılımin verkkosivujen suunnittelun projekteissa työskentelemme samalla järjestyksellä.