Playing with Visual Studio Code

Visual Studio Code 


 After I downloaded the VSC on my mac, the installation is done imediately, and once you have the editor installed, some of the language support is already built-in such as the javascript syntax highlight, auto-complete. One of the features I really like is that when you open a file you can use the url from a github repo, you put in the url and VSC will clone all the associated folders for you and you will have the full project tree ready in your editor. 
And if you are doing front-end web develop using angular, react or vue, you can also download packages to VSC, and start doing front-end development using the built-in localhost web-server to see your UI appearance and testing or debugging on the functionalities using the chrome-debugger extension or some other extensions. 

Features


To find a file or a string in your project you can simply just go to the search tab, and type in the key word you are searching and then the result will be listed in detail.
         
To add new packages to VSC, you can go to the extension tab placed on the bottom of the left panel, and you can type in the specific package name or related key word, VSC will find relevant resource online and you can choose which extension you want to add. Notice on the bottom left panel there is the recommended package that you can add. Those packages are very helpful, for example the chrome debugger which allows you to debug your JavaScript code in the Google Chrome browser.

 You can also split the editor view to many views to make it easier to look at multiple files at the same time. This can be simply done by clicking on the second button on the top-right corner. 





Chrome debugger tool extension


One of the coolest extension from Visual Studio Code is the Chrome debugger. It allows you to debug your javascript code in Chrome browser. Once you download the extension, you need to configure your launch config file(specify which port your local web server are listening on as well as the url), Then you need to manually start your web server, for my case since I already have the angular-cli package set up, I can just run ng-serve in the terminal inside VSC and start the local server. the rest of the work is just open your debugger in VSC and start debugging.





Comments

Post a Comment

Popular posts from this blog

Working with gh-pages

Image
Hosting This week, we were introduced to the "gh-pages" which is one of the  coolest feature on github that enables you to host your static web content on github for free! the setting up for this is very simple, you only need to create a repo using your github account and then add master or the gh-pages branch to this repo then you can commit and push your html or any web content related files onto your master/gh-pages branch then your website will be available on github. After many researches on where to host your website, I think gh-pages may be the best option for me, simply because I don't want to spend a penny for hosting my website. This is just a simple static html file I put on my github host. Right now the domain name is using the github defaut standard, and you can actually customize that domain name in the settings tab under your repo. Code Reading Basically, this page is a static page that display a result of a test on the onload event of a ima tag.
Read more

Documentation in opensource

Image
Documentation in opensource Importance It is obvious that with detailed and well-explained documentation, contributor will definitely have a easier time with the environment set up and a good overview about how the project is structured which is really saving a lot of time. Commenting Besides documentation, code with clear comment also help developers reuse some of the existing code easily. I believe that no programmers love to read 10 thousand lines of code just to figure out where a variable is being defined. Following good commenting standard makes your code so clear to others about what the code is about, what does it do and how it is being used. For instance, giving description of the parameters and return values of a function is considered a good commenting standard, especially in open-source projects. Working with thimble  Currently I am working on the thimble project from github. The feature I was trying to add is a inline-border-radius editor. The document
Read more
Image
Augmented Reality in Industrial Safety Augmented Reality is already improving worker performance  This is a interesting article talking about how AR improves industrial workers' performance, variousexamples are used to demonstrate  how AR technologies can be applied in industrial activities  https://hbr.org/2017/03/augmented-reality-is-already-improving-worker-performance 4 Applications in 2018 for augmented reality in construction Augmented Reality is a emerging technology being used in many domain areas, construction is one of the field that may be influenced by AR in the future.  https://esub.com/4-applications-in-2018-for-augmented-reality-in-construction/ Ontario ministry of labour- health and safety Many Health and safety related records can be found here. This site contains reports about the injures or fatalities recorded each year in Ontario labour force.  https://www.labour.gov.on.ca/english/hs/index.php Augmented Reality in Construction
Read more