Out of box “Emmet” code snippets in Visual Studio Code

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.

How to run Node.js and Npm with web proxy

Recently I needed to install npm on my workplace computer and it always showing below connection timeout error message every time when I run any command.



I have faced such issue with VS Code when trying to install extensions and updates. After going through documentation, I found that here is the same issue with proxy settings and I got information by running ‘npm help config’ command. It redirected me to the npm config documentation and I found this:



To authenticate my corporate proxy, I set the environment variables HTTP_PROXY and HTTPS_PROXY but npm did not recognized these environment variables.

After doing search on internet and from my previous experience with vscode issue, I found the following same way to configure the proxy for npm.

npm config set proxy http://proxy.company.com:8080
npm config set https-proxy http://proxy.company.com:8080

If you need to specify credentials, they can be passed in the url using the following syntax.

http://user_name:password@proxy.company.com:8080

You can also set the proxy configuration as a command line argument or environment variable. Configuration parameters can be specified using -- when executing npm. So the proxy could also be specified as follows.

npm --https-proxy=http://niranjansingh:MyPass@172.29.01.01:8080 -g install yo

I have tried command line configuration to make it work and I have done my job.

Hope this help others also... Happy Coding!

How to setup major tools for VS Code development environment?

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!

How to setup Proxy settings in Visual Studio Code?

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:

1. File > Preferences > Settings
   
   
2. Navigate to the HTTP settings section and you will find settings for proxy as shown in below image:
   
   
   
   
3. 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.