Html5 Visual Studio Code

  

JavaScript in Visual Studio Code Visual Studio Code includes built-in JavaScript IntelliSense, debugging, formatting, code navigation, refactorings, and many other advanced language features. Most of these features just work out of the box, while some may require basic configuration to get the best experience. Veamos los primeros pasos con HTML5 y Visual Studio Code, que es lo que necesitamos para comenzar a trabajar con HTML y CSS desde cero y paso a paso.En este.

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform.

Looking for best Visual Studio Code extensions for my web development activities, I came across a plethora of VS Code extensions made available by various developers not just for web development, but for various other types of programming activities as well.

In this article, I will list out few of these Visual Studio Code extensions suitable for HTML coding activities.

List of Visual Studio Code extensions for HTML

Intellisense (Built-in, no extension required)

I agree that this blog post started as showcasing a list of HTML Visual Studio Code extensions, but I would be doing a disservice to the developers of VS Code if I did not mention the excellent support that has been provided as built in functionality in the Visual Studio Code itself via Intellisense. VS Code Intellisense provides support for suggestions and auto completion of basic HTML tags.

Emmet Feature In VS Code (Again, built in, no extension required)

Emmet is my next go to feature that is built into VS Code now that I highly recommend to everyone out there that is working with HTML coding or development using Visual Studio Code.

One of the main functionality of Emmet on VS Code is to provide basic abbreviations for most of HTML code.

So say for example you are about to create a new HTML page that you want it to be mobile friendly and descibes all the basic structure of an HTML page such as UTF charset meta data, viewport type, language type etc. You can do so by simply typing “html:5” at the beginning of the document and pressing TAB key. This will trigger the Emmet’s abbreviation feature resulting in autocompleting the basic structure of a web page as shown in the GIF below:

HTML5-Boilerplate VS Code HTML Extension

The next Visual Studio Code extension for HTML deals specifically with HTML 5 and is called HTML5-Boilerplate VS Code extension.

The HTML5-Boilerplate VS Code extension is very similar to that of Emmet we had discussed earlier, but differs in the fact that it specifically deals with generating boilerplate code for HTML 5. Below is a GIF showing HTML5-Boilerplate Visual Studio Code (VS Code) extension in action:

HTML Live Preview VS Code HTML Extension

HTML Live Preview is another Visual Studio Code extension that as the name suggests, helps its users to do a live preview of their HTML web page during its development. What is interesting is that the HTML Live Preview VS Code extension does this at real time as shown in the GIF below:

These are some of the HTML extensions for Visual Studio Code editor that I have come across up until now. I am pretty sure I might have missed out a lot more useful HTML extensions for VS Code, which I would continue to add to my toolkit upon discovery and update this article accordingly. For now, these extensions are bound to make my life easy while developing HTML code for my web development activities.

If you are aware of any more Visual Studio Code extensions for HTML that you found useful and you think I should try and recommend it to others, do let me know in the comments below and I will definitely look into it.

Till then, happy coding!

Visual

JavaScript has evolved over the years. Today, JavaScript can run not only in browsers but also in Server, Desktop Application & IoT devices.

Visual Studio Code is a trendy code editor today. It is one of the best for JavaScript application development. Let’s see how to set up a simple JavaScript environment.

Html5 Con Visual Studio Code

Requirements:

  1. Visual Studio Code
  2. Node.js
  3. NPM (it’s a package manager which comes with Node.js)

Let’s start with setup of JavaScript Environment.

Step 1: Install Node.js

Go to the node.js website by following the above link and click on the downloads section. Select the LTS version, which is a stable version of node.js.

According to your platform (Windows, Mac, or Linux) and bit (32 or 64), you can download node.js installer.

After download of the installer is completed, install Node.js on your computer.

Follow the next step to check whether it is installed correctly or not.

Step 2: Verify Installation of Node.js and NPM

Go to command prompt.

Type node -v command and press Enter. You should get a node.js version.

Next,

Type npm -v command and press Enter. You should get a NPM version.

It should look like below.

If you get the proper versions means Node.js and NPM are rightly installed.

Step 3: Install Visual Studio Code

Follow the above link to the Visual Studio Code website and download setup according to your platform.

After downloading, install the Visual Studio Code to your computer.

Open it as an administrator.

It will look like this.

Visual Studio Code Html Preview

Step 4: Create and Open Folder

Create a folder on your computer at C or D drive. Keep the folder name in a small case. For example, jsexample.

You can create a folder using the terminal inside Visual Studio Code. But to make things simpler, We are showing you the simplest way.

Inside Visual Studio Code, go to the Fileand Click on Open Folder.

Select the folder which you have created. After selecting, you will get a folder inside VS Code Explorer.

Now go to the terminal in the menu and click on New Terminal. It will open terminal with the path in which you have created the folder.

Step 5: Create index.html File

In the folder, create an index.html file. You can create it from explorer where you can find the option to add a new file or directly create inside the folder location (Make sure it appears inside VS Code Explorer).

Add below sample code in index.html file and Save.

Step 6: Project Initialization

It is essential to initialize the project. You need to use NPM Command, which will create required files inside the folder.

In the terminal window type below command and hit enter.

It will automatically create the package.json file inside the folder.

Step 7: Install Lite Server

The lite server we will be using to host the application locally.

Use the following command in the terminal to install the lite server in the project and hit enter.

Html5 Visual Studio Code

It will create a node_modules folder and package-lock.json inside the project. node_modules will contain required dependency for lite-server.

If you see below error in the terminal after installation of lite-server, then use npm audit fix command. All vulnerabilities will get fixed.

Below, files and folder should be part of your project till now.

Step 8: Modify package.json File

To start lite-server, you need to make small changes in the package.json file. Modify script object and change it’s ‘start’ property value to lite-server.

: Don’t forget to save changes.

It should look like this.

Step 9: Start the Website with Light Server

Finally, we have come to the last step.

Go to the Terminal and type below command and hit Enter.

Lite-Server will automatically start a locally hosted website in the browser. You should get the below result if everything above is correctly setup.

To stop lite-server, you need to press ctrl + c in the terminal. It will ask you the below question.

Terminate batch job (Y/N)?

Html5 in visual studio code

Visual Studio Code Html Viewer

Type Y and hit enter. It will stop the server.

Html5 In Visual Studio Code

lite-server detects change in file automatically. Just make changes in any file (html, js or any) and save them without stopping the server. you can see the changes are reflected automatically to the website.

Visual Studio Code Html5 Template

That’s it. It is effortless to set up a primary JavaScript environment by following the above steps.