Setting up Environment: VSCode, Live Server0%
Variables: var, let, const

Setting up Environment: VSCode, Live Server

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

Setting up Environment: VSCode, Live Server

To write JavaScript productively, professional developers configure a modern development environment. While you can write code in Notepad, using industry-standard tools like Visual Studio Code (VS Code) and the Live Server extension accelerates your learning and debugging tenfold.

1. Installing Visual Studio Code

Visual Studio Code (VS Code) is the world's most popular free code editor, built by Microsoft using web technologies (Electron, TypeScript, and Node.js).

Step-by-Step Installation:

  1. 1
    Navigate to code.visualstudio.com.
  2. 2
    Download the installer for your operating system (Windows, macOS, or Linux).
  3. 3
    Run the installer. On Windows, ensure you check:
  • Add "Open with Code" action to Windows Explorer file context menu.
  • Add to PATH.
  1. 1
    Launch VS Code.

2. Essential Extensions for JavaScript Developers

In VS Code, click the Extensions icon in the left sidebar (or press Ctrl + Shift + X on Windows / Cmd + Shift + X on Mac). Install the following extensions:

Visual Architecture & Process Flow

How data and code flow step-by-step

Flowchart
Step 1
| Accelerates typing with quick snippets (clg
Step 2
console.log) |

3. Creating Your First Project with Live Server

Let's set up a clean, structured project folder:

Step 1: Create Project Folder

On your desktop or projects directory, create a folder named js-starter:

Output
js-starter/
├── index.html
├── style.css
└── app.js

Step 2: Write the HTML Boilerplate (index.html)

In VS Code, open index.html and type ! followed by Tab to generate HTML5 boilerplate:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Starter | MSK Institute</title>
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script>
</head>
<body>
<div class="container">
<h1 id="heading">Welcome to JavaScript!</h1>
<button id="btn">Click to Test JS</button>
<p id="output"></p>
</div>
</body>
</html>

Step 3: Write Your JavaScript Code (app.js)

JavaScript
console.log("app.js loaded successfully!");
 
const btn = document.getElementById("btn");
const output = document.getElementById("output");
 
btn.addEventListener("click", () => {
output.textContent = "Congratulations! JavaScript is working perfectly.";
output.style.color = "#10b981";
output.style.fontWeight = "bold";
});

Step 4: Launch Live Server

  1. 1
    Right-click inside index.html.
  2. 2
    Select Open with Live Server (or click "Go Live" in the bottom-right status bar).
  3. 3
    A browser window automatically opens at http://127.0.0.1:5500/index.html.
  4. 4
    Click the button and watch the text update instantly!
  5. 5
    Change any text in VS Code and press Ctrl + S: the browser reloads automatically without manual refresh!

4. Configuring Prettier "Format on Save"

To ensure your code always looks clean and professionally formatted:

  1. 1
    Open VS Code Settings (Ctrl + ,).
  2. 2
    Search for Format On Save.
  3. 3
    Check the checkbox: Editor: Format On Save.
  4. 4
    Set Editor: Default Formatter to Prettier - Code Formatter.
Interactive Quiz

Practice Quiz

Question 1
What is Visual Studio Code (VS Code)?
Question 2
What is the primary benefit of the "Live Server" extension in VS Code?
Question 3
Why is testing JavaScript via http://127.0.0.1:5500 (HTTP protocol) better than double-clicking index.html (file:// protocol)?
Question 4
Which VS Code extension automatically enforces consistent indentation, quotation marks, and line breaks on save?
Question 5
What is the shortcut in VS Code to quickly open the Integrated Terminal?
Next Lesson

Variables: var, let, const

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
How JavaScript Works in BrowserVariables: var, let, const

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext