ES6 - Environment

ES6 - Setting Up Your Development Environment

To start writing and running modern JavaScript (ES6+), you need a suitable development environment. This chapter guides you through the essential tools.

Core Components of a JavaScript Development Environment:

• A Text Editor or Integrated Development Environment (IDE): For writing your code.
• A JavaScript Runtime: To execute your code. This can be a web browser (for client-side JavaScript) or Node.js (for server-side or command-line JavaScript).
• Browser Developer Tools: Essential for debugging, inspecting CHTML, CSS, and network activity for web development.

1. Text Editors and IDEs

A good code editor enhances productivity with features like syntax highlighting, code completion, and debugging tools. Popular choices include:

• Visual Studio Code (VS Code): Free, open-source, highly extensible, and widely popular. Excellent support for JavaScript, TypeScript, and Node.js. (Recommended)
• WebStorm: A powerful paid IDE by JetBrains, specifically for JavaScript and related technologies.
• Sublime Text: A lightweight, fast, and customizable editor.
• Atom: A hackable text editor built by GitHub (development has been sunsetted, but still used).
• Basic editors like Notepad (Windows) or TextEdit (macOS) can be used, but they lack advanced features.

Source files are typically named with the .js extension (or .mjs for ES modules in some Node.js contexts).

2. JavaScript Runtimes

Web Browsers

All modern web browsers (Chrome, Firefox, Edge, Safari) have built-in JavaScript engines that execute client-side code. They also come with powerful developer tools.

Node.js

Node.js is an open-source, cross-platform runtime environment that allows you to run JavaScript code outside of a browser. It’s essential for server-side development, build tools, and command-line scripts. Node.js uses Google’s V8 JavaScript engine.

Installing Node.js:

Visit the official Node.js website at https://nodejs.org/ to download the installer for your operating system (Windows, macOS, Linux). LTS (Long Term Support) versions are recommended for most users.

After installation, open your terminal or command prompt and type node -v and npm -v to verify that Node.js and npm (Node Package Manager, which is bundled with Node.js) are installed correctly. You should see their respective version numbers.

npm (or alternatives like yarn or pnpm) is used to manage project dependencies (libraries and tools).

3. Browser Developer Tools

Modern browsers come equipped with developer tools that are invaluable for debugging JavaScript, inspecting HTML and CSS, analyzing performance, and more. You can typically open them by right-clicking on a webpage and selecting “Inspect” or by pressing F12.

Focus on: Visual Studio Code (VS Code)

VS Code is a highly recommended free IDE from Microsoft. It’s available for Windows, macOS, and Linux. Download it from https://code.visualstudio.com/.

Key features of VS Code for JavaScript development:

• Excellent JavaScript and TypeScript IntelliSense (code completion, parameter info).
• Integrated debugger for both front-end JavaScript (in browsers) and Node.js applications.
• Built-in Git support for version control.
• Integrated terminal to run commands (like npm scripts, Node.js execution).
• A vast marketplace of extensions to add more functionality (e.g., ESLint for code linting, Prettier for code formatting).

Getting Started with VS Code:

1. Download and install VS Code from its official website.

2. Open VS Code. You can open a folder (your project directory) or create new files.

3. For JavaScript projects, consider installing useful extensions like ESLint and Prettier from the Extensions view (Ctrl+Shift+X or Cmd+Shift+X).

You are now set up with a modern JavaScript development environment! You can start writing ES6 code, run it using Node.js, or test it in a browser.