Hi everyone
I was wondering how does everyone develop and test JavaScript.Do you have browser open on one end of monitor and second half you have your editor and than keep refreshing your browser every time you make change to the code? That’s how I do it and was wondering if there is better way doing this.
I am learning/refreshing my skills in JS and there is a lot of editing saving refresh steps…
I’m a beginner on JS., To check my JS code I use the console on Google Chrome which you can access by pressing f12. To write code I use Visual studio code and I have an extension called live server which automatically refreshes your browser. So what I do is: I create an HTML file, link my Javascript file then right click on the html file, then click on open with live server. This automatically opens up a tab in chrome(the html file) then while i’m on that tab/page I click f12 to access the console which then shows me my Javascript code, so I’ll
do an edit of my code and every time I hit save on my JavaScript file live server updates the console and the code runs…this works for any other file you save(Html,CSS)
That is sound really good. I hoped not to download VS since its massive and it might be overkill since I am only using it for JS
I use a widescreen and keep my editor on one half and my browser on the other. Devtools usually just floats around.
I usually don’t refresh though, webpack dev server will listen for changes and automatically refresh. If you’re not using Webpack then I’m sure Browsersync still works, but I haven’t used it in many years.
Visual Studio Code is not the same thing as Visual Studio. VSC is a text editor and very lightweight with nearly the performance of SublimeText. It’s what everyone I know uses for development. I honestly couldn’t imagine not using it. It even does typechecking on vanilla JS.
I’ve come to enjoy the Brackets editor, that lets you set up a live-connection to Chrome and see your changes live. HTML and CSS are live at least. JavaScript changes wait for you to save before automatically showing the changes.
Nop Visual studio code is very light weight your machine will treat it like it’s not even there, it’s a perfect text editor, visually beautiful too!
One problem with VS Code is that it is not the best HTML editor (no WYSIWYG) and I see no extension available to help much.
Something else worth mentioning is that there are very many extensions for VS Code. VS Code alone cannot do much for developers; we need to install relevant extensions.
VS Code is available for Linux, in case that helps.
That’s because WYSIWIG HTML editors should be left in 2001 where they belong. lol
I actually disagree with this as well. While there are lots of really great extensions for VSC, it does a ton out of the box and most of the most useful stuff for JS/TS comes from the base install itself, not 3rd party extensions. It is far less reliant on extensions than either Atom or SublimeText.
If you’re interested, I use an extension called Setting Sync that uploads all my settings to gist. From there you can see a file called extensions.json which shows all my extensions I have installed. This is the entire config and extension list that I use for my day job working mostly in Typescript/React but also vanilla JS from time to time.
Basically the only one that has a major effect on my workflow is the ESLint extension.
Yes, this is indeed a very useful extension! :-) Another one you might check out is vscode-chrome-debug, which allows you debugging your page right from the editor (set breakpoints, inspect variables and everything). This is particularly nice in conjunction with the live server.
Of course, for more involved projects you’ll probably have a dedicated (webpack) dev server anyway as mentioned by @mawburn – especially when using one of the major frameworks. E.g. angular-cli, create-react-app and friends would create a pretty sophisticated setup including HMR and what have you… it does work very well out of the box too though.
You might actually consider that a good thing though. ;-) Personally I could never really get used to those IntelliJ IDEs for example, just because they felt kind of bloated to me; and since vscode has entered the scene I have never looked back. Also, again what @mawburn said.
Another thumbs up for vscode here. I had it recommended to me about 6 months ago, before that I used sublime text.
It comes with emmet built in, a simple ! and tab key and there’s your html template for you.
Installing extensions are a breeze, only occasionally you might need to click on the settings.json file to add a line and that is accessed easily from preferences and settings.
My few recommended extentions for starters would be liveserver, bracket pair colorizer 2 and Javascript (ES6) code snippets
With liveserver installed, it’s just a matter of clicking on the go-live button and a new tab is opened up in a browser. Click on save in your file and the page is updated.
bracket pair colorizer, does what it says and uses multiple colours to color matching open and closed brackets.
Furthermore it comes with a built in terminal, so if like me you are looking into node, express, webpack etc you can easily get your environment/boilerplate setup from within vscode — no need for opening a separate cmd prompt.
Would also recommend learning the hotkeys, they really are useful for editing your scripts.
Yes, this is indeed a very useful extension!
:-)Another one you might check out is vscode-chrome-debug, which allows you debugging your page right from the editor (set breakpoints, inspect variables and everything). This is particularly nice in conjunction with the live server.
Will be installing that, looks very useful.
Edit:
If you want to do a quick bit of lazy experimenting with code, snippets in chrome is quite good. F12 → Sources Tab and make a new snippet.
Perhaps you are thinking I was implying that many extensions are a bad thing. I was implying to not be frustrated if VS Code alone does not do everything you want it to do.
I did not say nor imply nor intend to imply that extensions are bad things. I said it so Stribor45 and anyone else is aware of extensions in VS Code and therefore expect it.
It’s worth adding Parcel.js to the mix here as an alternative to create-react-app or other complex webpack setup.
https://parceljs.org/
I use this in my projects to compile Vue or React apps, but it can be used to simply provide a quick dev server with live reload.
Simply create an index.html, add relevant imports to JS or CSS files and then start the parcel dev server with parcel index.html.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.