VSCode JS-ohjelmointiympäristön asennus (ES6->)

1. Asenna Git. Katso versio komentokehotteesta komennolla git --version, jolloin näet että asennus onnistui.

2. Asenna Nodejs (LTS). Katso sen jälkeen Noden ja npm:n versiot komennoilla node -v ja npm -v. Versioiden tulisi olla vähintään 18.x ja 8.x.

3. Asenna VSCode-editori. Aloitusnäytön wizardilla voit asentaa yhdellä linkin klikkauksella perustason Javascript-tuen.

4. Valitse VSCoden vasemmalla olevasta sivupalkista Extensions ja asenna seuraavat lisäosat ellei niitä ole jo asennettu: ESLint, Prettier - Code formatter, Code Runner, Commands ja One Dark Pro. Avaa File -> Preferences -> Settings -> Extensions -> Commands-Configuration ja valitse linkki Edit in settings.json ja lisää avautuvaan settings.json -tiedostoon tämä JSON -koodinpätkä. Se määrittää Commands -napit alapalkkiin, editorin fonttikoon ja teeman. Voit säätää sitä mieleiseksesi. Avaa File -> Preferences -> Settings -> Extensions -> Prettier ja laita rasti ruutuun kohtaan Prettier: Single Quote, jolloin lainausmerkit formatoidaan heittomerkeiksi.

5. Tee työpöydällesi kansio nimeltään koeprojekti. Mene VSCoden komentokehotteessa kansioon ja anna komento: npm init ja luo tyhjä package.json-tiedosto. Anna komento: npm i eslint eslint-config-google --save-dev. Komennolla asennetaan lokaalit paketit ESLintille ja Googlen ESLint -säännöstölle joilla tarkistetaan koodin laatu. Voit myös asentaa paketit globaaleiksi komennolla npm i -g eslint eslint-config-google. Tätä ei kuitenkaan ESLintin ohjeessa suositella.

6. Uudelleenkäynnistä VSCode ja kokeile toimintaa tällä es6koe -projektilla, jonka koodit voit laittaa edellä luomaasi kansioon. Huomaa että valmiissa projektissa on mukana valmis package.json -tiedosto, jota ei tarvitse enää käyttää, koska loimme sellaisen aiemmin itse.  Varmista että ESLint validoi koodin. Voit myös kokeilla Git-repositoryn luontia ja testaa Gitin toimintaa.

7. Kun jatkossa teet uusia omia JS-projekteja ilman valmista projektipohjaa (boilerplate), voit laittaa JS-projektisi kansioon tämän .eslintrc -konffitiedoston. Tarvittaessa voit muokata sitä. Se sisältää viittauksen Googlen säännöstöön jonka perusteella JS-koodi validoidaan, sekä joukon sääntöjä joilla tarkkaa validointia on helpotettu. Jos teet projektisi valmiiseen projektipohjaan (esim. Angular), et tarvitse yleensä omaa .eslintrc -tiedostoa, koska se tai vastaava tiedosto on jo valmiiksi mukana.

8. Typescript -tuki toimii tällä samalla ohjeella, koska ESLint hoitaa myös Typescriptin tarkistuksen.

9. JS-koodailu onnistuu myös ilman ESLint:iä esim. käyttämällä pelkkää Prettieriä, mutta ESLint:iä suositellaan. Voit valita ESLintille myös jonkin muun säännöstön kuin tässä käytetyn eslint-config-google:n.

10. Jos asennusten jälkeen ilmenee toimintaongelmia, saattaa VSCoden tai koko koneen uudelleenkäynnistäminen auttaa.