Fullstack Javascript
Course Notes
01 - VSCode, Git and GitHub
2. VSCode Overview

2. VSCode Overview

1. What is VSCode?

  • A lightweight, highly customizable code editor developed by Microsoft.
  • Cross-platform: available on Windows, macOS, and Linux.
  • Supports a wide variety of programming languages (not just JavaScript!).

2. Key Features

  • IntelliSense: Autocompletion for code, including variables, functions, and keywords.
  • Integrated Terminal: Run terminal commands directly inside the editor.
  • Built-in Git: VSCode has Git commands built in, making version control more accessible.
  • Extensions: Thousands of extensions are available to extend functionality (linting, theming, etc.).
  • Debugging: Built-in support for debugging Node.js and other languages.
  • Live Share: Collaborate with others in real time by sharing your editor session.

3. Extensions (Making VSCode More Powerful)

  • Popular Extensions for JavaScript/Node.js:
    • Prettier: For consistent code formatting.
    • ESLint: For catching and fixing JavaScript errors.
    • GitLens: Enhances the built-in Git capabilities.
    • npm: Automatically runs npm commands and scripts.
    • Debugger for Node.js: Adds advanced debugging features.

4. Customizing VSCode

  • Themes: Change the look and feel with themes (light and dark themes).
  • Settings: Customize the editor’s behavior (auto-save, tab size, font, etc.).
    • Access through File > Preferences > Settings.
    • Or modify settings directly via settings.json.
  • Keybindings: Customize shortcuts or use built-in ones like Ctrl+P to open files quickly.

5. Working with Git in VSCode

  • Source Control View:
    • Stage and commit files directly from the editor.
    • View diffs to see changes you’ve made.
    • Pull and push changes to GitHub from within VSCode.

6. Debugging with VSCode

  • Setting Breakpoints: Pause your code at specific points for debugging.
  • Watch Variables: Monitor specific variables while your code runs.
  • Step Through Code: Navigate line by line to see how your code executes.
  • Debug Console: Run commands and view logs during debugging.

7. Useful Tips and Tricks

  • Multiple Cursors: Edit multiple lines at once with Alt+Click.
  • Zen Mode: Hide everything but the code with Ctrl+K Z for a distraction-free experience.
  • Split Editor: Work with multiple files side by side by dragging tabs.
  • Command Line Interface (CLI): Launch VSCode directly from the terminal using code . in a project folder.