In this lab i will install and configure Visual Studio Code Editor, since we need a reliable editor to work with various open source projects. VS Code is a platform independent source code editor that support various languages and frameworks and is also highly customizable. I will configure the editor as a regular user and also as a developer.
First, lets install the VS Code as a user. You can download and run the package from here. The installation process is very easy and straightforward, you just need to follow the steps. Once the setup is done we can open the VS Code and start customizing our environment. Since i have used Visual Studio before, the editor looks very familiar and it did not take me too long to get used to using it. The background is black by default, which means the environment customization is already done for me :). You can add the extension you need by clicking “Tools and languages” tab. To be honest the list of extensions is huge, so i dis not even try to walk through all of them, i simply installed the most popular and familiar tools. I have installed the following extensions:
- C/C++ – language support and debugging
- C# – language support + .Net framework
- Debugger for Chrome – debug JavaScript code in Chrome
- Go – language support
- HTML CSS Support – support for HTML based pages
- JavaScript and TypeScript – another scripting language support
- mssql – connect to MS SQL server, Azure, manage database connections
- Node.js Modules – auto completes JavaScript/Typescript code
- Python – language support
- Swift – language support (because i love mob dev)
- Terminal – enables command line directly in the editor
I believe the above features will be most likely used during the course. That is why i installed most of them.
Now lets install the VS Code in developer mode, so that we could contribute to the project in the future.
The contribution instructions, download links, dependencies and command are listed here. Note that i am Windows user so some of the commands are unnecessary for other platforms.
Ok, so we need to preinstall the following packages prior to VS Code installation in dev mode:
Once you the above are installed open the command line and clone this git repository into an folder you like. Then go to vscode folder that you just cloned and run these two commands:
> git config –global core.autocrlf false
> git config –global core.safecrlf true
This important and will save you a lot of energy and time in the future when you do testing. These commands fix the line endings we have in our source files on Windows. Ok, now run yarn command that would install all the the dependencies you need. Then run yarn run watch command to build the dependencies you need. I am not sure about other platforms, but Windows acts weird during the installation and you might need to terminate and restart some of the commands (i guess it is normal behavior, since i read a couple other blogs and they report the same thing). The installation process takes a some time and throws some warning all the time, just ignore them. If the prompt is froze, like i said just terminate the command and rerun the command. Once the above is done, you have successfully installed VS Code. To check if everything is ok run .\scripts\code.bat command that will trigger the VS Code editor, but this time in development mode. You should see the following:
You can try out the debugging tool by using Chrome Developer Tool. In the VS Code just Press Ctr+Shift+P to open the search windows and type Toggle Developer Tools, then click on the result. You should see this:
At this point you should be god to go, except we need to run the test script to make sure everything runs well on the background also. So navigate to vscode folder if you are not there already and run scripts\test command to test automated testing. The first attempt will likely fail, so rerun the command and the test should succeed.
Overall the VS Code editor looks appealing and useful. It is surprising i have newer used it before. I am glad i discovered a new tool that could potentially same me some time editing source code in the future.
I have also read about the open source projects the VS Code is based on such as Electron, TypeScript. EsLint, Node.js and other frameworks. I figured that VS Code is predominantly made of the Typescript language logic an Electron GUI design and animation. Also i got to know some very powerful and interesting frameworks opensource offers that do have a major impact on today’s application market.
Oleh's Blog 