× Full Screen Image

JavaScript Setup

Why should you care about JavaScript Setup?

A clean setup saves you hours of frustration. When your tools are configured properly, writing, testing, and debugging JavaScript becomes faster, easier, and much more enjoyable.

Before writing JavaScript, let's quickly prepare your development setup. The easiest path is to start in the browser Console, then create simple HTML and JavaScript files, use VSCode for easier editing, and add Live Server later only if you want it. This part is simple, and once you complete it, learning and practicing JavaScript will feel much smoother.

learning-path

To start learning JavaScript, you only need a modern web browser. You can begin without installing anything by opening the browser's Developer Tools and using the Console. Chrome, Firefox, Edge, and Safari are all good examples.

If you want one example browser, Google Chrome is a common choice because its developer tools are beginner-friendly. Firefox, Edge, and Safari also include developer tools that work well for learning and debugging JavaScript. Download Google Chrome

An IDE (Integrated Development Environment) or code editor gives you one place to write, organize, and debug your code.

Think of it like a smart coding workspace. You do not need a full IDE to begin, but a good editor helps with autocomplete, syntax highlighting, and instant error hints, so you can focus more on logic and less on avoidable mistakes.

Visual Studio Code (VSCode) is a free and lightweight code editor used by beginners and professionals. It is recommended for writing and organizing JavaScript, but it is not required to run JavaScript. You can also practice in the browser Console or use another basic editor.

We will often use VSCode examples in this course because it is beginner-friendly. If you want to use it, download it here: Download VSCode

After installation, create one project folder on your computer. Then in VSCode, go to File > Open Folder and select that folder. This is a simple way to create and manage your first files.

Console

Learn more about Visual Studio Code here or watch our video explanation.

If you use VSCode, extensions are add-ons that give it extra features, similar to how apps add features to your phone.

If you use VSCode, two helpful extensions to start with are below. Both are optional, and you can install them later.

  • Live Server: Live Server is optional. It opens your project through a small local development server and refreshes the browser automatically whenever you save changes. It is especially useful when you are working with HTML, CSS, and JavaScript together.
    live sever
    If you install it, you can launch Live Server by right-clicking inside your HTML file and choosing "Open with Live Server". You can also use Alt + L, Alt + O on Windows/Linux, or Option + L, Option + O on Mac. Learn more about Live Server
  • Prettier: Prettier automatically formats your code so it stays clean and consistent. It handles indentation, spacing, and line breaks for you, which makes your code easier to read and maintain.
    prettier
    Learn how to set up Prettier
learning-path

"Separation of concerns" means keeping different kinds of code in separate files instead of mixing everything together.

In web development, this means HTML for structure, CSS for styling, and JavaScript for behavior. This separation keeps your project clean, easier to debug, and easier to scale as your files grow.

learning-path
  • Step 1: Open VSCode, or any editor you prefer.
  • Step 2: Create a new folder or open an existing folder for your project.
  • Step 3: Create HTML File Create a new file and save it as index.html. To follow the separation of concerns principle, keep JavaScript in a separate file and link it with a script tag like <script src="script.js"></script>.

    • javascript

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My JavaScript Page</title>
</head>
<body>
<!-- Your HTML content goes here -->
<script src="script.js"></script>
</body> 
</html>
  • Step 4: Create JavaScript File Create another file named script.js. Add simple JavaScript code there.

    • javascript

    console.log("Hello JavaScript");
  • Step 5: Run in Browser or Start Live Server Open index.html directly in your browser. Then open Developer Tools and check the Console to confirm your output appears correctly. If you installed Live Server, you can use it instead.
usestrict

"use strict" tells JavaScript to run in strict mode. It is not mandatory for every JavaScript program, but it helps catch certain common mistakes earlier, so your code behaves in a safer and more predictable way.

javascript

// This code works without 'use strict'
x = 10; // It creates a global variable 'x' accidentally.
console.log(x); // Output: 10

javascript

'use strict';
x = 10; // This will throw an error because 'x' isn't declared.
console.log(x); // This line won't be executed due to the error above.

You can place "use strict" at the top of a file or inside a specific function. Example:

javascript

//At the beginning of a script:
"use strict";
// Your JavaScript code goes here

//At the beginning of a function:
function myFunction() {
  "use strict";
  // Code for this specific function
}

If it is at the top of the file, strict mode applies to the whole file. If you place it inside a function, it applies only to that function.

Note: We will cover more strict mode rules in a dedicated tutorial.

Every modern browser includes built-in developer tools. These tools help you inspect page elements, test JavaScript in the Console, and debug issues quickly.

Open them with F12 or Ctrl+Shift+I (Cmd+Option+I on Mac). You will use the Console tab a lot in this course to view output and error messages.

Note: DevTools has many powerful panels. We will explore the most useful ones step by step in upcoming tutorials.
developertool
  • Web Browser: A modern browser is enough to start learning JavaScript. Open Developer Tools and use the Console.
  • IDE: VSCode is a recommended code editor for writing and managing files, but JavaScript also runs without it.
  • Extensions: Live Server is optional for serving a local page, and Prettier is optional for clean formatting.
  • Separation of Concerns: Keep HTML, CSS, and JavaScript in separate files to stay organized.
  • "use strict": Strict mode is optional, and it helps catch certain common mistakes earlier.
  • Developer Tools: Built into browsers and very helpful for debugging, especially the Console panel.

What's next? Now that your setup is ready, let's explore what makes JavaScript special in the next tutorial.

lecture javascript
SimplyJavaScript Logo
Setup For Javascript
lecture javascript
SimplyJavaScript Logo
Setup For Javascript

Reviewed by

SimplyJavaScript Editorial Team

Technical editors and JavaScript educators with hands-on experience building frontend projects, writing learning material, and reviewing tutorials for clarity, accuracy, and beginner-friendly guidance.

Done reading? Now make it stick.
Practice ExercisesSolve hands-on coding challenges on Introduction, History, Setup & FeaturesTake a QuizTest what you remember about Introduction, History, Setup & Features
JS History
JS Features