Skip to content

Latest commit

 

History

History
64 lines (43 loc) · 3.34 KB

VS-CODE.md

File metadata and controls

64 lines (43 loc) · 3.34 KB
Raw

VISUAL STUDIO CODE

INTRODUCTION

VS Code is a type of tool that combines the simplicity of a code editor with what developers need for their core edit-build-debug cycle. It provides comprehensive editing and debugging support, an extensibility model, and lightweight integration with existing tools.

FEATURES

1. CLI

Visual Studio Code comes with an inbuilt Command Line Interface. Once you've installed Visual Studio Code, and have it open, press ⇧⌘P to open the command palette for Mac, or just ⌘P and the press > button.

2. Git Integration

Visual Studio Code comes with integrated Git that allows for Adding, Committing, Pulling and Pushing Changes to a remote Git repository using a simple GUI.

Let's go through a simple workflow that will involve the following steps.

  • Create a project with git initialized
  • Make some changes
  • Commit the changes

3. Debugging

Visual Studio Code has a rich API for enabling debugging tools. Debugging is a large topic, and is usually language/stack specific. Depending on the language you are using, there are available plugins that enable support for debugging, and you'll be able to use breakpoints to debug your code when developing.

4. Live Share

Visual Studio Code Live Share is a feature that enables you to share your VS Code instance, and allow someone remote to control and run other things such as debuggers.

Live Share is published as a plugin, and is currently in Preview.

All that is required is for you to install the plugin, and the status bar will enable you share any working session by getting a link, once you are signed in.

5. Split Views, Zen Mode

If you like working on multiple open editors in the same project, you will find this feature really interesting. You can press OPT, and click on a file, or right click on a file and choose Open to the Side

PLUGINS

1. Auto Close Tag

Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.

2. Import Cost

This extension will display inline in the editor the size of the imported package. The extension utilizes webpack with babili-webpack-plugin in order to detect the imported size.

3. Terminal

Run terminal command directly in Text Editor

4. Prettier - Code Formatter

VS Code package to format your JavaScript / TypeScript / CSS using Prettier.

5. Image preview

Shows image preview in the gutter and on hover

6. HTML Snippets

This extension adds rich language support for the HTML Markup to VS Code, including:

  • Full HTML5 Tags
  • Colorization
  • Snippets
  • Quick Info
  • description mentions if tag deprecated

7. Path Intellisense

Visual Studio Code plugin that auto-completes filenames.

8. Markdown Preview Enhanced

Markdown Preview Enhanced is an extension that provides you with many useful functionalities such as automatic scroll sync, math typesetting, mermaid, PlantUML, pandoc, PDF export, code chunk, presentation writer, etc. A lot of its ideas are inspired by Markdown Preview Plus and RStudio Markdown.