I am a huge fan of Microsoft's Visual Studio Code. I identified this source code editor as a near "must have" when taking reader's of my recent JavaScript book through the process of setting up a development environment to learn programming and to write JavaScript games. Visual Studio Code is unsurpassed when it comes to manipulating a combination of HTML, CSS and JavaScript. I will admit to still using Visual Studio for large scale web sites, web services, C# (of course) and C++ project work but the code development tool I am most likely to open almost automatically is VS Code.
With VS Code, you can quickly knock out some JavaScript to explore an idea and then see it executed near instantly in a web browser. I hope that my book encouraged this approach - indeed it sort of doubled down on the idea that JavaScript should be executed by the web browser by encouraging readers to install and use the ScratchJS Chrome extension to run or test short blocks of code. That was fine in the context of the book but ignored the fact that, with Node.js installed, code that does not rely upon HTML to provide a UI can be run directly from within VS Code.
My last JavaScript related post looked at developing a JavaScript collection type to act as a Set but for objects. All of the code described in that post was developed and run within VS Code.
In the image above, you can see the code stopped at a break-point set at line 139 in the JavaScript code. There is output from the code already executed showing in the "Dubug Console" tab while the window to the left of the code file can be used to inspect local and global variables. The mouse cursor is hovering over the oSet object variable on line 139 and there is an interactive pop-up display showing the object content. Also notice that above the code tab (objectset.js) there is a toolbar with icons that can be used to step through the code and otherwise manage code execution. Towards the left hand end of the orange bar at the bottom of the VS Code window is an indicator showing that jsHint is warning about something in the code. [I gratuitously used arrow notation (=>) for a function definition and jsHint is concerned that I might not realise this is only available in ES6.]
If you installed VS Code then it is highly likely that you also installed Node.js to take advantage of the npm package manager for VS code extensions. Given that then running JavaScript from the code editing tab is very straightforward. Click the JavaScript code tab to give it focus and then the key combination <ctrl><shift><p> will bring up a long list of actions (with those most recently used conveniently gathered at the top). Run down the list looking for "Run" options - maybe "Run and Debug".
Click the blue button and watch your code execute.
Setting a break-point just requires a click to the left of the line number. You will then see a red dot displayed.
It might be worth adding a JavaScript code file to VS Code folders just to be used as a scratch pad for code snippets that you want to explore with direct execution from within your favourite code editor.
Good page here on the full range of VS Code support for JavaScript
With VS Code, you can quickly knock out some JavaScript to explore an idea and then see it executed near instantly in a web browser. I hope that my book encouraged this approach - indeed it sort of doubled down on the idea that JavaScript should be executed by the web browser by encouraging readers to install and use the ScratchJS Chrome extension to run or test short blocks of code. That was fine in the context of the book but ignored the fact that, with Node.js installed, code that does not rely upon HTML to provide a UI can be run directly from within VS Code.
My last JavaScript related post looked at developing a JavaScript collection type to act as a Set but for objects. All of the code described in that post was developed and run within VS Code.
In the image above, you can see the code stopped at a break-point set at line 139 in the JavaScript code. There is output from the code already executed showing in the "Dubug Console" tab while the window to the left of the code file can be used to inspect local and global variables. The mouse cursor is hovering over the oSet object variable on line 139 and there is an interactive pop-up display showing the object content. Also notice that above the code tab (objectset.js) there is a toolbar with icons that can be used to step through the code and otherwise manage code execution. Towards the left hand end of the orange bar at the bottom of the VS Code window is an indicator showing that jsHint is warning about something in the code. [I gratuitously used arrow notation (=>) for a function definition and jsHint is concerned that I might not realise this is only available in ES6.]
If you installed VS Code then it is highly likely that you also installed Node.js to take advantage of the npm package manager for VS code extensions. Given that then running JavaScript from the code editing tab is very straightforward. Click the JavaScript code tab to give it focus and then the key combination <ctrl><shift><p> will bring up a long list of actions (with those most recently used conveniently gathered at the top). Run down the list looking for "Run" options - maybe "Run and Debug".
Setting a break-point just requires a click to the left of the line number. You will then see a red dot displayed.
It might be worth adding a JavaScript code file to VS Code folders just to be used as a scratch pad for code snippets that you want to explore with direct execution from within your favourite code editor.
Good page here on the full range of VS Code support for JavaScript
No comments:
Post a Comment