Skip to content

Latest commit

 

History

History
135 lines (114 loc) · 5 KB

01_environment_setup.md

File metadata and controls

135 lines (114 loc) · 5 KB
Raw

Setting Up the Environment for JavaScript Development

Introduction

Setting up your development environment is the first step to start coding in JavaScript. This tutorial will guide you through installing Node.js, managing relevant packages with npm, and selecting and configuring Visual Studio Code (VS Code) as your code editor.

Step 1: Installing Node.js

Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. It allows you to run JavaScript on your server and use it for back-end development.

1. Download Node.js:

  • Visit the official Node.js website.
  • Choose the appropriate version for your operating system (LTS is recommended for most users).

2. Install Node.js:

  • Windows:
    • Download the Windows installer from the Node.js website.
    • Run the installer, follow the prompts, and complete the installation.
  • macOS:
    • Download the macOS installer from the Node.js website.
    • Open the .pkg file and follow the prompts to install.
  • Linux:
    • Open your terminal.
    • For Debian-based distributions (like Ubuntu): 
      sudo apt update
sudo apt install nodejs npm

3. Verify Installation:

  • Open your terminal or command prompt.
  • Run the following commands to verify that Node.js and npm (Node Package Manager) are installed: 
    node -v
npm -v

Step 2: Managing Packages with npm

npm is the default package manager for Node.js, allowing you to install and manage JavaScript libraries and frameworks.

1. Installing Packages:

  • To install a package globally (accessible from anywhere): 
    npm install -g <package-name>
  • To install a package locally (specific to a project): 
    npm install <package-name>

2. Creating a Package.json File:

  • A package.json file is essential for managing your project's dependencies and scripts.
  • To create a package.json file, run: 
    npm init
  • Follow the prompts to set up your project. You can accept the defaults or customize as needed.

3. Commonly Used Packages:

  • Express: A web application framework for Node.js. 
    npm install express
  • Lodash: A utility library for JavaScript. 
    npm install lodash
  • Moment.js: A library for parsing, validating, and formatting dates. 
    npm install moment

Step 3: Selecting and Configuring Visual Studio Code

Visual Studio Code (VS Code) is a powerful, open-source code editor developed by Microsoft. It is highly extensible, allowing you to customize it to fit your development needs.

1. Installing Visual Studio Code:

  • Visit the official VS Code website.
  • Download the installer for your operating system (Windows, macOS, or Linux).
  • Follow the installation instructions for your OS.

2. Configuring Visual Studio Code:

  • Extensions: Enhance VS Code functionality by installing extensions. Here are some recommended ones for JavaScript development:

    • ESLint: Linting utility for identifying and reporting on patterns in JavaScript. 
      ext install dbaeumer.vscode-eslint
    • Prettier: Code formatter to ensure consistent style. 
      ext install esbenp.prettier-vscode
    • Node.js: Provides support for Node.js development. 
      ext install microsoft.vscode-node-debug2

  • Settings: Customize VS Code settings for a better development experience.

    • Open settings: File > Preferences > Settings or use Ctrl+, (Cmd+, on macOS).
    • Common settings to configure:
      • Enable format on save: 
        "editor.formatOnSave": true
      • Configure ESLint integration: 
        "eslint.validate": [
  "javascript",
  "javascriptreact",
  "typescript",
  "typescriptreact"
]
      • Set default formatter to Prettier: 
        "editor.defaultFormatter": "esbenp.prettier-vscode"

3. Using VS Code for JavaScript Development:

  • Integrated Terminal: Access the terminal within VS Code to run Node.js commands and npm scripts.
    • Open terminal: View > Terminal or use Ctrl+ (Cmd+` on macOS).
  • Debugging: VS Code provides powerful debugging tools.
    • Set breakpoints, inspect variables, and step through code.
    • Open the Debug panel: View > Debug or use Ctrl+Shift+D (Cmd+Shift+D on macOS).
  • IntelliSense: VS Code offers intelligent code completion, parameter info, and other helpful features.
    • Start typing your code, and VS Code will provide suggestions and completions.

Conclusion

By setting up Node.js, managing packages with npm, and configuring Visual Studio Code, you are now ready to start developing JavaScript applications. This environment will support a smooth and efficient workflow, allowing you to focus on coding and building your projects.

Further Reading