[Go to site: main page, start]

0% found this document useful (0 votes)
3 views6 pages

JavaScript Setup With Vs Code

This document provides a comprehensive guide for setting up a JavaScript development environment using Node.js and Visual Studio Code. It includes prerequisites, installation steps for Node.js and VS Code, verification of installations, and instructions for writing and running a simple JavaScript program. The guide also offers troubleshooting tips and a final checklist to ensure successful setup.

Uploaded by

pandatlabwork
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
3 views6 pages

JavaScript Setup With Vs Code

This document provides a comprehensive guide for setting up a JavaScript development environment using Node.js and Visual Studio Code. It includes prerequisites, installation steps for Node.js and VS Code, verification of installations, and instructions for writing and running a simple JavaScript program. The guide also offers troubleshooting tips and a final checklist to ensure successful setup.

Uploaded by

pandatlabwork
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd

JavaScript Environment Setup using Visual

Studio Code
Learner Guide | [Link] + VS Code + First JavaScript Program

Purpose: This document explains how to install JavaScript runtime support using [Link] and how to write,
run, and verify JavaScript programs using Visual Studio Code instead of Sublime Text.

1. Prerequisites
 Windows laptop or desktop with administrator access.
 Stable internet connection.
 Basic knowledge of creating folders and saving files.
 Command Prompt, PowerShell, or VS Code integrated terminal access.

2. Tools to Install
Tool Purpose Download Location
[Link] Provides the JavaScript runtime. [Link]
It allows JavaScript programs to
run outside the browser.
npm Node Package Manager. It comes Installed automatically with
along with [Link] and is used to [Link]
install JavaScript packages.
Visual Studio Code Code editor used to write, [Link]
manage, and run JavaScript download
programs.

3. Download and Install [Link]


[Link] is required because JavaScript normally runs inside a browser, but [Link] allows us to run
JavaScript directly from the terminal.

1. Open the browser and go to [Link]


2. Click the LTS download option for Windows. LTS is recommended for training and project work because it
is stable.
3. Run the downloaded installer file.
4. Keep the default installation options selected. Ensure that the option to add [Link] to PATH is enabled.
5. Click Next until the installation is completed.
6. Restart the machine if [Link] commands are not detected immediately after installation.

Screenshot reference:

JavaScript Environment Setup using Visual Studio Code


4. Verify [Link] and npm Installation
7. Open Command Prompt, PowerShell, or the VS Code terminal.
8. Type the command below and press Enter:

node -v

9. A version number should be displayed. Example: v20.x.x


10. Now verify npm by typing:

npm -v

11. A version number should be displayed. Example: 10.x.x

JavaScript Environment Setup using Visual Studio Code


5. Set Environment Path Manually Only If Node Is Not Detected
Important: In most recent [Link] installations, PATH is added automatically. Follow this manual step only
if node -v is not recognized.

12. Right-click This PC or My Computer and select Properties.


13. Open Advanced System Settings.
14. Click Environment Variables.
15. Under System variables, select Path and click Edit.
16. Add this path as a new entry: C:\Program Files\nodejs
17. Click OK on all windows.
18. Restart Command Prompt or restart the machine.

Do not delete existing PATH values: Only add the [Link] path as a new entry. Deleting existing paths
may affect Java, Python, Git, or other tools installed on the system.

6. Download and Install Visual Studio Code


Visual Studio Code is the recommended editor for JavaScript because it provides syntax highlighting, terminal
integration, extensions, debugging support, Git integration, and project folder management.

19. Open the browser and go to [Link]


20. Download the Windows installer.
21. Run the installer.
JavaScript Environment Setup using Visual Studio Code
22. During setup, select useful options such as Add to PATH, Open with Code, and Create a desktop icon.
23. Complete the installation and launch Visual Studio Code.

7. Recommended VS Code Extensions


Extension Purpose
Code Runner Runs JavaScript files quickly from the editor.
Optional, because terminal execution is enough.
ESLint Helps identify JavaScript syntax and quality issues.
Prettier - Code formatter Formats code consistently.
JavaScript and TypeScript Nightly Optional. Useful for advanced language support.

8. Create a JavaScript Practice Folder


24. Create a folder on your system, for example: C:\JavaScriptPractice
25. Open Visual Studio Code.
26. Go to File > Open Folder.
27. Select the JavaScriptPractice folder.
28. Create a new file and save it as [Link].

9. Write and Run Your First JavaScript Program


In the [Link] file, type the below code:

const studentName = "Vandana";


[Link]("JavaScript setup is ready");
[Link](`Welcome, ${studentName}`);
JavaScript Environment Setup using Visual Studio Code
29. Save the file using Ctrl + S.
30. Open the terminal inside VS Code using Terminal > New Terminal.
31. Run the program using:

node [Link]

Expected output:

JavaScript setup is ready


Welcome, Vandana

10. Useful VS Code Shortcuts for JavaScript


Shortcut Use
Ctrl + S Save file
Ctrl + ` Open or close integrated terminal
Ctrl + / Comment or uncomment selected code
Ctrl + Shift + P Open command palette
Ctrl + B Show or hide left side panel
Alt + Shift + F Format document, if formatter is installed

11. Troubleshooting
Issue Possible Reason Solution
node is not recognized [Link] PATH is not set Add C:\Program Files\nodejs to
System Path and restart terminal.
npm is not recognized npm did not install correctly or Restart terminal. If still failing,
terminal was not restarted reinstall [Link] LTS.
File does not run File is not saved with .js extension Save the file as [Link], not
JavaScript Environment Setup using Visual Studio Code
[Link].
Cannot find module A package is missing Run npm install package-name
inside the project folder.
Output not visible Program was run from wrong Use cd command or open the
folder correct folder in VS Code.

12. Final Verification Checklist


 [Link] is installed successfully.
 node -v shows a version number.
 npm -v shows a version number.
 Visual Studio Code is installed.
 A folder is opened in VS Code.
 [Link] file is created and saved.
 The command node [Link] runs successfully.
 Expected output is visible in the VS Code terminal.

13. Summary
After completing this setup, learners can write JavaScript programs in Visual Studio Code and run them using
[Link] from the terminal. This environment is suitable for JavaScript basics, TypeScript learning, Playwright
automation, API automation scripting, and modern frontend development practice.

JavaScript Environment Setup using Visual Studio Code

You might also like