Setting Up Your JavaScript Development Environment

Setting Up Your JavaScript Development Environment

Before writing any JavaScript, you need a comfortable environment. A good setup makes you faster and helps you catch mistakes early. This lesson covers the tools every JavaScript developer uses daily.

Choosing a Code Editor

Visual Studio Code (VS Code) is the most popular code editor for JavaScript development. It is free, open-source, and packed with features that make coding easier. Download it from code.visualstudio.com and install the following extensions: ESLint (catches errors as you type), Prettier (auto-formats your code), and JavaScript (ES6) code snippets (saves time with common patterns).

Once VS Code is open, create a folder for your project, open it with File → Open Folder, and create a new file called index.html and another called app.js.

Using the Browser Console

Every browser has built-in developer tools. In Chrome or Edge, press F12 or right-click and choose Inspect, then click the Console tab. The console lets you run JavaScript one line at a time and see the results immediately. This is ideal for testing small ideas.

console.log('Hello, JavaScript!');
console.log(2 + 3);
console.log(typeof 'hello');

The console.log() function is your primary debugging tool throughout this JavaScript tutorial. It prints values to the console so you can inspect what your code is doing at any point.

Installing Node.js

Node.js lets you run JavaScript outside the browser, directly on your computer. Go to nodejs.org and download the LTS version. Once installed, open a terminal and verify the installation:

node --version
npm --version

With Node.js installed, you can run any JavaScript file from the terminal:

node app.js

Your First JavaScript Program

Open app.js in VS Code and type the following:

const message = 'Welcome to JavaScript!';
console.log(message);

const currentYear = new Date().getFullYear();
console.log(`The current year is ${currentYear}`);

Run the file with node app.js. You should see the message and the current year printed in the terminal. Congratulations — you have written and executed your first JavaScript program.

Browser DevTools Beyond the Console

The browser developer tools have many panels beyond the console. The Sources panel lets you pause code execution at any line using breakpoints. The Network panel shows all HTTP requests made by the page. The Elements panel lets you inspect and edit the HTML and CSS live. You will use all of these throughout this course.