Ok thought i would try out visual studio … but totally lost … as a editor it works … basic intellisense eg type in < gives me a option /div (not what i was expecting) dosent even finish it or add closing div … has got emmet so thats good as i want to learn how to use that… just installed html snippets so got that sorted so now can create div tags etc without having to type it all myself Nice.
So what i need help with is live preview (any preview lol) being googling and havent found anything of use.
one suggestion was installing node.js on computer then using command prompt after usning npm install -g live-server then type in live-server … all went ok until typing in live-server part which just brought up a error.
also being googling how to create a build process … no joy there either
im just used to using basic editor or brackets at moment use repl.it so this is way over my head.
so if anyone could a least get me up to speed on how to get live preview as i write the code i would be delighted i could post again then when i need to move on.
Try this;
https://basementmedia.no/2015/06/26/previewing-website-when-editing-in-visual-studio-code/
unfortunately thats the one i tried and got error when typing live-server
gives me a … unhandeled promise rejection warning … rejection id1
A bit of progress even though i got a error the line before show a http address with numbers so decided to try typing it into the web broweser and got connected … and it updates every time i hit save on my file. Late over here so will have another go at it tomorrow.
Any more info or advice id appreciate it thanks.
I’ll see what I can dig up tomorrow. Glad you got some headway.
Well after struggling obsessively (think 4 days lol) along i am 90% up and running ditched live-server because i got browserfi working (after a struggle … AVG anti virus kept putting it in the vault … but once i started running it with gulp had no problems)
Was it worth it … YES …
So what can i do and what have i done so far
well have access to Emmet and even though i know practically nothing about it its still makes writing html soooooooo much quicker eg div>div>ul>li*5 gives me a div containing a div containg a ul with 5 li … plus you can put in classes and id as well.
got live preview sorted as i said with browserfi … so my webpage updates my work on save …
got started with sass and got gulp to automatically convert to css … and will be adding more like minifying js css … optimizing images … adding autoprefixer …
It was tough going getting this far … I thought i would just watch a video showing the set up and that would be it … wrong … a bit of work is involved but worth it … it was just very confusing as i havent done anything like it before.
involved first installing node.js on laptop … checking to make sure i did it properly
then install Gulp on laptop … run check to make sure i did that properly
got a bit confused then as had to run npm init on folder for my project to create a package.json file … so things like this had me pulling out my hair … where as now i understand and wondering why i was confused lol…
next back to install gulp into project file
then create a gulpfile.js … eg open notebook save file as gulpfile.js into folder
then add some code to test out
Got that working now time for sass … had to download ruby installer onto laptop … install sass with ruby
then use npm install gulp-sass to project folder
then add more code to gulpfile to check that my task for converting the sass to css worked
more code then to gulpfile to watch for changes
download browserfi … sort out some problems
then npm install that to folder
add more code to gulpfile for that
did all this using comand prompt and and text files … and finally working
next then was just open folder with visual studio … open a terminal in visual studio … run gulp
which runs the gulpfile in background … start editing html and sass and watch it update on web browser …(added a watch to the html and javscript as well)
A lot of steps to go through but after four days im comfortable with it and will do it for a while more to let it sink in and then look at automating it.
wouldnt have being able to do this though without finding this site that walked me through the process … attaching link … so it might help others … im off to learn more and add some more tasks to gulp for a bit of practice.