× 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.

You do not need to install five tools before you can start. Begin with the browser, then add tools when your projects need them.

Required to start

A modern browser with Developer Tools and a JavaScript Console.

Recommended

VS Code for writing and organizing HTML and JavaScript files.

Optional

Node.js, Live Server, and Prettier. You can add them later.

A browser already includes a JavaScript engine. Its Developer Tools contain a Console, where you can run JavaScript immediately without installing anything.

  1. Open Developer Tools with F12 or Ctrl + Shift + I. On Mac, use Cmd + Option + I.
  2. Choose the Console tab.
  3. Type the code below and press Enter.

javascript

console.log("Hello JavaScript!");

First success: When you see Hello JavaScript! in the Console, you have run JavaScript. The Console is excellent for quick experiments; VS Code will help when you need files and multiple lines.

After you create index.html and script.js in the next section, you can run them in either of these ways:

  1. Open the file directly: open index.html in your browser, then check Developer Tools and the Console.
  2. Use Live Server: right-click index.html and choose Open with Live Server. This is optional and refreshes the page when you save.

Checkpoint: You are ready to continue when index.html and script.js exist, the page loads, and the Console shows Hello JavaScript.

You can start learning browser JavaScript without Node.js. Node.js is a JavaScript runtime that lets JavaScript run outside the browser, and npm is the package manager commonly used with Node.js. This section is useful when you are ready to run JavaScript from a terminal.

A terminal is a text-based way to interact with your computer. Use it to move into a project folder and run commands such as node and npm. You do not need to memorize every command: copy one command, run it, and compare the result with the example.

  1. Install VS Code: download it from the official site, then open it.
  2. Create a folder: make a folder named javascript-practice somewhere easy to find.
  3. Open the folder: in VS Code, choose File > Open Folder and select javascript-practice. The folder name should appear in the Explorer panel.
  4. Open the terminal: choose Terminal > New Terminal. The terminal should start inside your project folder.

Terminal check: type the command for your operating system. The version number can be different from the example.

Where to open a terminal on each operating system.
Operating system Standalone terminal Useful beginner note
Windows Windows Terminal, PowerShell, or Command Prompt Use cd to change folders. VS Code's integrated terminal works the same way.
macOS Terminal or iTerm2 Use cd to change folders. The default shell is usually zsh.
Linux Your distribution's Terminal app Use cd to change folders. The exact app name depends on your desktop environment.

terminal

node --version
npm --version

Example terminal result

PS C:\javascript-practice> node --version
v22.14.0
PS C:\javascript-practice> npm --version
10.9.2

If both commands print a version, Node.js and npm are ready. If you see command not found, is not recognized, or a similar message, install the current LTS version of Node.js from nodejs.org, restart VS Code, and run the checks again. npm is installed with Node.js.

Your first Node program: create a file named hello.js in the Explorer and add this code:

hello.js

console.log("Hello from Node.js");

Save the file, then run it from the terminal:

terminal

node hello.js
Hello from Node.js
Beginner checkpoint: You are ready to continue when VS Code shows hello.js, node --version prints a version, and node hello.js prints the greeting. The browser Console and Node.js are two different places where JavaScript can run.
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 a code editor gives you one place to write, organize, and debug your code. VS Code is a code editor with many IDE-like features, rather than a traditional full IDE.

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 (optional): Live Server opens your project through a small local development server and refreshes the browser automatically whenever you save changes. It is useful, but you can learn without it.
    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 (optional): 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

Your project can start with two files:

javascript-practice/
|-- index.html
`-- script.js

HTML holds the page structure. JavaScript holds the behavior. Keeping them separate makes each file easier to understand and change.

  1. Step 1: Open VSCode, or any editor you prefer.
  2. Step 2: Create a new folder or open an existing folder for your project.
  3. 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>.

    4. html

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

    5. javascript

    console.log("Hello JavaScript");
  5. 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.

Optional concept for now: You do not need to memorize or add "use strict" just to begin. Modern JavaScript modules are already strict by default, and many modern tools handle this for you.

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.

  • Console: run JavaScript and read logs or errors.
  • Elements: inspect the page's HTML and CSS.
  • Sources: pause and debug JavaScript.
  • Network: inspect requests made by a page.
Note: We will explore these panels step by step in upcoming tutorials.
developertool

Minimum setup

  • Modern browser
  • Developer Tools
  • Browser Console

Recommended setup

  • VS Code
  • A javascript-practice folder
  • index.html and script.js

Optional tools

  • Node.js and npm
  • Live Server
  • Prettier

Ready to continue? If the browser Console showed your greeting, you already have enough to keep learning.

  • 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.
  • Node.js and npm: Optional tools for running JavaScript outside the browser and managing packages.
  • 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
History of JavaScript
JavaScript Features