Recently, I come across the MSDN magazine article “Java Gets AI-Assisted IntelliCode in Visual Studio Code Editor”. It is great that the Microsoft Visual Code, light weight open source editor is now enabled with features which was part of the Visual Studio 2017.
It is not alone support Microsoft support languages e.g. C#, VB.NET also the Java and Python too.
What is IntelliCode?
Definition from: Introducing Visual Studio IntelliCode
IntelliCode is a set of AI-assisted capabilities that improve developer productivity with features like contextual IntelliSense, inference and enforcement for code styles, and focused reviews for your pull requests (PRs.)
Visual Studio IntelliCode – extension is in Preview and the Visual Studio IntelliCode extension provides AI-assisted productivity features for Python, TypeScript/JavaScript and Java developers in Visual Studio Code, with insights based on understanding your code context combined with machine learning. It can be installed directly in Visual Studio code:
Little demo from MSDN article:
Happy Coding!
Visual Studio Code has a port for Emmet out-of-the-box too, which gives us more HTML features. Emmet is a web-developer’s toolkit that can greatly improve your HTML & CSS workflow or programming.
Basically, most text editors out there allow you to store and re-use commonly used code chunks, called “snippets”. While snippets are a good way to boost your productivity, all implementations have common pitfalls: you have to define the snippet first and you can’t extend them in runtime. Same like full version of visual studio, Emmit is way to implement code snippets in the VS Code editor.
For example let's say we wanted to just type div and then inside of that div we wanted to have a UL. And then we want that UL to have, let's say, five LIs. We could do LI right there and how do you do five of those, we can do *5. Now if I hit Tab, it's going to automatically generate all that HTML.
Notice it's kind of got a cursor there in the first spot, so let's see what that happens there. I can type I first, hit Tab, and go to second, and then just keep typing like this. Now you can use that and hit Escape to get out and to also create things like table or anything else that's more complex.
if you want to learn more about the Emmet syntax you can check out this link here at docs.emmet.io.
Visual Studio Code is light weight editor for web development languages. To enhance it you require some tools which speed up development in Visual Studio code and also prerequisites for doing development e.g. Node.js . Here are the few players which play some important roles to enhance the development environment features:
Bower is a package manager for the web.
Gulp enables you to automate and enhance your workflow.
Yeoman is Scaffolding tool for modern web apps and helps you to kick start new projects, prescribing best practices and tools to help you stay productive.
You can setup these as follows:
Step 1 – Install Node.js
To through previous post - How to create Node.js development environment in Visual Studio?. Just download the installation package from Node.js site and go through the setup wizard to complete installation to work npm working.
Step 2 - Install Bower
To install Bower first run the Command Prompt and Bower is installed globally by running the following command:
npm install -g bower
Step 3 - Install Gulp
To install Gulp.js globally on your system run the below command which enable you to run the ‘gulp’ command in your command prompt:
npm install -g gulp
Step 4 – Install Yeoman
To install Yeoman, just run the below command on command prompt:
npm install -g yo
You can install these in one go using below command:
npm install -g yo gulp bower
After that most of things are up and running to start with VS code.
Happy coding!
I ran into problem that when I try to find extensions in the VS Code, it does not display anything and even not able to check for updates. In this scenario, I have downloaded newer version of VS Code but it was not the permanent solution to solve this problem.
In such type of issues, I found that our enterprise proxy block the request which sent to the respective software vendors. Finally I decided to get to know that how can I setup proxy settings in VS Code as I did with tortoiseSVN and other tools.
I found reference in VS Code documentation - Proxy server support
Many enterprises require that their computers run behind a proxy server and don't allow direct access to the Internet. A proxy server intermediary can limit access to the VS Code Extension Marketplace and prevent installing VS Code extensions.
Follow the below steps to setup proxy settings:
- File > Preferences > Settings
- Navigate to the HTTP settings section and you will find settings for proxy as shown in below image:
- Now change the proxy settings as per your environment, If you proxy does not require authentication then just simply enter proxy details:
"http.proxy": http://172.28.57.20:8080/
If proxy require authentication then you have to provide user details:
"http.proxy": "http://niranjan:password@172.28.57.20:8080/"
Complete Settings which works in my case:
// VSCode: Place your settings in this file to overwrite the default settings
{
"http.proxy": "http://user:pass@proxy.com:8080",
"https.proxy": "http://user:pass@proxy.com:8080",
"http.proxyStrictSSL": false
}
From documentation: Additionally, use
"http.proxyStrictSSL": false if your proxy server uses a self-signed certificate.
Note: VS Code supports http and https proxies, but not SOCKS proxies.
Peoples who are habitual of using intellisense in Visual Studio and suddenly it is found missing then they really get mad during the work. Today I am trying to create some html pages with bootstrap for learning. I was feeling little hard to do code with bootstrap, because I am not able remember all of the class names of the bootstrap.
There are lots of glyphicon classes which is hard to remember. Visual Studio has this nice feature by adding JavaScript library path to the “_references.js” file and after that everything available in autosuggest mode.
What happened with me, I am not able to find the correct gylphicon class name without intellisense. Regarding this I have googled and found that this feature is not currently available in VS Code right now. However, it has been added as a feature request for upcoming updates.
Do not disappoint, There is also hope to do work with intellisense in VSCode. You can use extension"HTML CSS Class Completion".
Open Command Palette by press ctrl+ship+p Then run “ext install HTML CSS Class Completion” to install this extension. Check the results in below image to see after enabling this extension.
Happy coding!