Visual Studio Code + Node.js Development

Saturday, March 05, 2016


U ovoj prezentaciji ću pričati o Visual Studio Code-u. Šta je on zapravo i šta tačno sa njim možemo raditi. Te ću pokazati par demo-a vezanih sa Node.js, Gulp, Git, Debugging...

VS Code je dizaniran i kreiran za lakši rad sa Web i Cloud aplikacijama, VS Code developerima nudi novi svježi način pristupa razvoju i alatima, kombinirajući lakoću i brzinu kod editora i inteligentni pristup preuzet od IDE-a. Ovo je prvi cross-platform alat u familiji Visual Studija, koji se izvršava nativno na Linuxu, OS X-u i Windowsu naravno.

VS Code je open-source, jako brz i snažan kod editor odličan za svakodnevnu upotrebu, osigurava odličnu kontrolu nad podešavanjima i veliku pomoć pri pisanju koda kao što su: autocomplite, syntax highlighting, bracket matching, ugrađeni i custom snipeti itd.. Naravno tu je i podrška za mnogo programskih jezika. Za ozbiljniju podršku u razvoju aplikacija tu je intellisense sa svim svojim velikim prednostima koje smo već upoznali u Visual Studio verzijama. Za sada najveća podrška je za Node.js sa TypeScriptom i JavaScriptom i ASP.NET 5 sa C# programskim jezikom. VS Code je odlično uklapa u vaše svakodnevne alate koji koristite. Out-of-the box integracija sa git source controlom, kao i bogato debugging okruženje za Node.js i ASP.NET web aplikacije. Te od nedavno sa potpunom podrškom za extenzije preko oficijalnog marketplace-a.

Pa da krenemo... zašto je Microsoft kreirao Visual Studio Code, ako pogledamo ovu sliku; na lijevoj strani imamo editore, a na desnoj IDE. Za one koji ne znaju a mislim da takvih ima malo ovdje IDE je Integrated development environment. Sa IDE je manje-više jasna priča oko razvoja, nakon što instalirate IDE i 90% stvari koje vam trebaju za razvoj aplikacije se nalaze u tom okruženju (bar je tako bilo do sada). Projekti su kreirani kroz različite wizarde, sva podešavanja koja su vam bila potrebna IDE je to za vas radio vaše je samo bilo da programirate. Jedna mana kod njih je njihova robusnost pa tako instalacija Visual Studija 2015 kod nekih opcija i varijanti zna zauzeti i do 25 gigabajta.

Kod kod editora je pričaju potpuno drugačija zato se na ovoj slici i nalaze skroz lijevo, kod editori su lightweight i jako su brzi.. primjer kod editora je notepad++, Sublime Text, Brackets, Atom...

Kao što na slici i vidimo ono što editore karakterizuje su: brzina, jednostavnost, lagana organizacija, podrška za mnogo programskih jezika, upravljanje sa tastature što uveliko ubrzava rad, dostupnost na mnogo platformi, integracija ostalih alata putem command prompta. 



Dok sa druge strane prednost IDE-a su: projekti, inteligentni pristup pisanja koda, organizacija i upravljanje kroz wizarde, UI dizajneri, mnogo alata za platformu za koju razvijate, refaktoring, debugging.

U čitavoj ovoj situaciji Microsoft je kreirao Visual Studio Code i postavio ga na mjesto kao što je i na slici pozicioniran, a to je mnogo bliže kod editorima, ali sa mnogo stvari koje karakterišu IDE, Bliže je svjetu editora, svojom brzinom i modularnošću i sa dosta moćnih stvari preuzetih od IDE-a. Također važno za napomenuti je i da je cross-platform i time je dostupan na svim platformama i jako je lagan za korištenje.

Visual Studio Code radi na principu projekata i prepoznaje razne projekt fajlove, odličnu podršku ima za csproj i json formate projekt fajlova, jako dobar refaktornig, intellisense, debugging, mogućnost izvršavanja taskova putem galpa (gulp) i grunta - kako bi smo mogli raditi build, različito kompajliranje ili deployment naših aplikacija i naravno podršku za git protokol out of the box.

Dok je od prednosti editora ostala brzina i podrška za različite jezike i ostale stvari koje su karakteristične za kod editore.

Visual Studio Code donosi novi način pristupa developmentu koji kombinira jednostavnost code editora sa potrebama developera za što kvalitetniji code-edit-debug procesom u developmentu.

Ovako trenutno izgleda ono što nam Visual Studio Code nudi:


Od runtime-a trenutno imamo podršku za node.js i ASP.Net 5, a programske jezike po podršci dijelimo na tri nivoa:

Basic ili osnovni su nabrojani na ovoj slici i za njih imamo osnovne stvari koje kod editor pruža a to je syntax highligthing, podudaranje zagrada, razmak, formatiranje koda itd.

Better- bolja podrška je za JavaScript, HTML, CSS, Less, Sass, json gdje već imamo podršku za intellisense, linting - analiza koda u real time, outline za pametan prikaz projekta na koje m radimo.

I najbolja podrška je za TypeScript i C# tu su sve predhodno nabrojane mogućnosti plus tu je i pretraga po referencama i refaktornig.

Što se tiče dijela oko source contol-a jedini i glavni je Git i ovim potezom Microsoft dokazuje koliko je iskreno krenuo u priču oko Open source-a, mogao je slobodno da na prvo mjesto stavi TFS, ali je krenuo sa gitom jer zna da je on dosta bliži developerima. Od task izvršavanja tu je podrška za gulp i grunt.

Kako je Microsoft kreirao Visual Studio Code?

VS Code nije napravljen od nule, nego se oslanja na tehnologiju elektorna, platforme za desktop aplikacije koje su kreirane korištenjem web tehnologija. Electron je kao i Visual Studio Code open source i kao takvi dostupni su na GitHub-u... Atom je također baziran na Electronu.

Skvrl (Squirrel) je iskorišten za dio oko automatskih updejta a First mate za nadogradnju podrške različitim jezicima. U slučaju da želite nadograditi podršku jezika kod VS Code-a to radimo preko text mate bundl-a. Electron a samim tim i VS Code je baziran na web tehnologijama i imaju odličnu podršku za cross-platform izvršavanje.

Code editor kod VS Code-a je Monaco editor. Monaco editor je od prije poznat onima koji su radili u Visual Studio Online-u, u kojem je omogućeno online editovanje web stranica koje su deployane na Azure. Monako je također i u Edge pretraživaču u ulozi developer toolsa i za editovanje koda na OneDrive-u. Tako da tehnologija koja se nekoliko godina uspješno izvršava u ovim online alatima je sada sastavni dio Visual Studio Code-a.

Monaco editor je mnogo više od text editora pa tako imamo implementirane sve ove stvari:

Te za najbolju podršku za JavaScript/TypeScript i C# brinu se TypeScript Server i Omni šarp.

Demo koraci:

  • Node.js & Express, npm install, code .
  • O code editor u VS Code-u (user settings, multiselect, organizacija prozora) TEXT
  • Simple intellisense za JavaScript i TypeScript (preko utils.js fajla)
  • Instalacija Typings-a za Node i Express preko Visual Studio Code i preko cmd
  • HTML i podrška za Emmet
  • CSS - LESS
  • Gulp kompajliranje LESS-a u CSS
  • Konfiguracija task-a da nam se builda automatski bez outputa
  • Debugging
  • Git primjer
TEXT: VS Code dolazi sa dvije defaultne theme i mnogo dodatnih, defaultne su dark i light. VS Code razumije project fajlove formata json i csproj, sa lijeve strane se nalazi view bar, na lijevoj strani imamo Explore, Search, Git i Debug opciju. U VS Code-u ne postoje prozori ili dijalozi u kojima vršimo podešavanja nego za to koristimo settings.json fajlove i to na dva načina: 

  • User settings
  • Workspace settings

User settings koristimo za globalno podešavanje dok workspace je specifično podešavanje za trenutni projekt na kojem radimo i također imamo podešavanja za keyboard shortcute. Svim opcijama i operacijama u VS Coud možemo pristupiti kroz Command pallete koji je dostupan sa kombinacojom tipki CTRL + Shift.

Jedna od zgodnih mogućnosti u kod editoru je multi select. U dependencijima ako želimo najnoviju verziju paketa koji koristimo potrebno je da dodamo znak tilda " ~ ". Kombinacijom tipki ALT + LM i kako prelazimo u nove redove primjetimo da se kursor nalazi na svakom predhodnom redu na koji smo kliknuli i time možemo da editujemo više redova odjendom. Slično kao i u VS-u stim da ovdje ne moraju biti u istoj liniji.

Organizacija prozora, možemo da poredamo do 3 prozora u jednom trenutku, to vršimo sa tipkama CTRL + 1/2/3. Ako raširimo jedan od njih do maximalne širine prelaskom na ostale primjećujemo da se na te prozore također primjenjuje identična širina za rad.

I zadnje ali i najbitnije VS Code ima jako dobar Debugging, ne kao onaj iz VS ali jako dobar sistem za debug je ugrađen u VS Code. Kao i u VS imamo standardne opcije: Play/Pause, Step over, Step into, Step out, Restart, Stop. Tu je odličan watch okvir u kojem možemo da pratimo stanje pojedinih varijabli ili objekata u našoj App.

Ovo je bio text moje prezentacije i predavanja koje sam imao na konferenciji Opennes2016 u Sarajevu, petog marta u Bosmalu tačnije u Academy387.

Slike sa konferencije:




Pozdrav! Almir Vuk | AV Development

You Might Also Like

0 comments