Section 1.2: Setting Up the Environment

Tutorial 1.2.1: Installing a Code Editor (e.g., VS Code)

Installing a Code Editor

To write and test JavaScript effectively, you need a code editor. While there are many options available, Visual Studio Code (VS Code) is one of the most popular choices due to its versatility and rich feature set.

Step-by-Step Guide to Installing VS Code

1. Download VS Code:

• Visit the [official VS Code website](https://code.visualstudio.com/).
• Choose the version for your operating system (Windows, macOS, or Linux).

1. Install VS Code:

• Follow the installation wizard for your operating system:
• Windows: Double-click the .exe file and follow the on-screen instructions.
• macOS: Drag the downloaded app into the Applications folder.
• Linux: Use the package manager or install from the terminal.

1. Launch VS Code:

• Open the application after installation to ensure it's working correctly.

Enhancing VS Code for JavaScript Development

1. Install Extensions:

• Open the Extensions view (Ctrl+Shift+X or Cmd+Shift+X on macOS).
• Recommended extensions for JavaScript:
• ESLint: Linting and error-checking.
• Prettier: Code formatting.
• JavaScript (ES6) Code Snippets: Useful code snippets.
• Live Server: Preview your code in the browser.

1. Set Up Themes:

• Customize the editor's look by choosing a theme:
• Navigate to File > Preferences > Color Theme.
• Popular themes: Dark+, Dracula, Monokai.

1. Enable Auto-Save:

• Go to File > Preferences > Settings and search for "Auto Save."
• Set it to afterDelay for smoother development.

Testing JavaScript in VS Code

1. Create a New File:

• Open VS Code and create a file with the .js extension (e.g., test.js).

1. Write and Save Code:

• Example:

     console.log("Hello, World!");

1. Run JavaScript Code:

• Install Node.js (we’ll cover this in the next tutorial) to run JavaScript directly in the terminal.
• Open the integrated terminal (Ctrl+~ or Cmd+~) and type:

     node test.js

Alternative Editors

• Sublime Text: Lightweight and fast.
• Atom: Customizable and open-source.
• WebStorm: Paid but feature-rich, ideal for large projects.