21
You should try new Live Preview extension for VS Code
The time is one of the most important things in life. For developers it is more important because every second cost a money. We are ready to do anything to be more productive. We are looking ways to make the process of writing code easy and time consuming. Let me introduce a tool which will help web developers' life way easier.
Live Preview is VS Code extension made to preview your HTML/CSS code inside the VS Code. If you ever used Live Server extension then this one will be really similar to you! Let me bring 2 reasons why would you use it.
Some research shows that people working with multiple programs loose about three time more time than the process of switching itself. This means if your switch takes 1 second then you lose 3 second in reality. Now think how many times do you switch between code editor and browser. As second word of the name hints this extension will save your time by showing the preview of your code inside the editor. You will need no switch for long period of time. And as the first name hints it will refresh automatically as you type your code.
This means your will get local IP address where your files and content will be hosted. This will allow you see your pictures and other files on preview pan. Also, you will be able to view your website on external browsers as well.
First of all, you need to install it. Go to Live Preview page on VS Code marketplace and press install button or go to the extension page of the VS Code and search for "Live Preview". Also, you can check the source code of the extension on GitHub Repository.
After you installed it simply right click on your HTML file and press "Live Preview: Show Preview"...
... Or press the preview button on the up-right corner.
You've created the local server which will preview the content on your page. Now look at the top of the preview. Do you see the address bar? It shows the page you are on. You can navigate to any file in your project by changing that path. Think of the IP address as the path from C: drive to the root folder of your project and add the file path as it is on Windows. You will see your files loaded on the preview pan. Also, you can go back and forward as you would in your browser.
And last but not least, you have access to developer tools of the webpage.
Even more, you can use the output pan of VS Code to view messages of the console.
Even though I am not active front-end developer but I can see how this tool will help me on my personal projects.
I believe this tool should be included in every web developers' must-have list.
21