vscodeintroduction.md - brainchildservices/curriculum GitHub Wiki

SLIDE- 1

GET STARTED WITH VS CODE

SLIDE- 2

  • Introduction
    • VS Code is the open SOurce Editor from microsoft
    • This editor builds on top of decades of editor experience from Microsoft
    • The code of the editor is completely Open Source, and there’s no payment required to use it.
    • image

SLIDE- 3

  • Download and install VS Code.(https://code.visualstudio.com/)
  • Create a new file in a folder. open the folder in vs code./ Choose one folder where you have source code, or even just text files, and open it.

SLIDE- 4

  • Keyboard shortcuts
    • Being able to keep your hands on the keyboard when writing code is crucial for high productivity. VS Code has a rich set of default keyboard shortcuts as well as allowing you to customize them.

SLIDE- 5 - Shrink/expand selection - Quickly shrink or expand the current selection. Trigger it with Shift+Alt+Left and Shift+Alt+Right.

- Save / Auto Save
    - By default, VS Code requires an explicit action to save your changes to disk, Ctrl+S.
    - However, it's easy to turn on Auto Save, which will save your changes after a configured delay or 
        when focus leaves the editor.

SLIDE- 6

- Find and Replace
    - VS Code allows you to quickly find text and replace in the currently opened file. Press Ctrl+F to open the Find Widget in the editor, 
        search results will be highlighted in the editor, overview ruler and minimap.

- Quick file picker
    - Pressing Ctrl+P will show you a quick file picker to easily move to files on large projects:

SLIDE- 7

  • IntelliSense
    • vs code always offer word completion, but for the rich languages, such as JavaScript, JSON, HTML, CSS, SCSS, Less, C# and TypeScript, VS Code offer a true IntelliSense experience. If a language service knows possible completions, the IntelliSense suggestions will pop up as you type.
    • You can always manually trigger it with Ctrl+Space. By default, Tab or Enter are the accept keyboard triggers.but you can also customize these key bindings.

SLIDE- 8

  • Left Tool Bar

    • The File Explorer

      • The Explorer is used to browse, open, and manage all of the files and folders in your project.

    • Search

    • Source Control

      • VS Code ships with a Git source control manager (SCM) extension.

    • The Debugger

      • One of the key features of Visual Studio Code is its great debugging support.
      • VS Code's built-in debugger helps accelerate your edit, compile and debug loop.
      • image

    • The Extensions

      • An extension is a small package you can load into VS Code that makes working with various resources easier.
      • You can manage extensions via the extension icon in the Activity Bar. Once you click on the icon, you should immediately see a list of the most popular extensions in the Extension Marketplace.
      • The Extension Marketplace is where developers store extensions that you can download and install at will.

SLIDE- 9

  • The Integrated Terminal
    • The integrated terminal is integrated directly into VS Code. It isn’t an external console or window.
    • It sits below your editor tabs at all times (unless you close it).
    • By default, the terminal is a legacy command prompt (cmd.exe) on Windows or Bash on Linux and macOS.
    • You can use the integrated terminal just like you would a typical console by typing commands, getting output, etc.

SLIDE- 10