Mobile Development

Getting Started With Visual Studio Code


Visual Studio Code is a lightweight code editor from Microsoft. It comes with built-in support for JavaScript, TypeScript and Node.js and is available for Windows, MacOS and Linux. Additional functionality can be added to Visual Studio Code by using Extensions. In the following you’ll learn how to setup VS Code and we’ll explore the basic functionality of the code editor.

Installation

The installation of Visual Studio Code depends on your platform. First go to the project’s website at https://code.visualstudio.com and download the package which is right for your operating system.

MaCOS

If your platform is MacOS, the installation is very easy. Download the Visual Studio Code archive, double click to unpack the archive and drag the file Visual Studio Code.app to the Applications folder.

Windows

If you’re on Windows, you need to download and run the installer (VSCodeSetup-stable.exe). Having completed the installation successfully you can find Visual Studio Code in C:\Program Files (x86)\Microsoft VS Code.

Linux

The installation of Visual Studio Code under Linux depends on the distribution you’re using. For a distribution-specifc installation guides take a look at https://code.visualstudio.com/docs/setup/linux.

Adding Visual Studio Code To The Command Line

It’s also possible to use Visual Studio Code from the command line by using the command code. To be able to use that command the following steps needs to be performed first. Open Visual Studio Code and access the Command Palette (⇧⌘P) and start typing shell command and select option Shell Command: Install ‘code’ command in PATH.

After that you’re able to start a new terminal window, change into your project directory and use code . to open the current directory in Visual Studio Code.

User Interface

The user interface of Visual Studio Code is split up into different areas:

  • The most important part of the application is the Code Editor area on the right side. Here you can open and edit your code files. It’s possible to open up to three files side-by-side.
  • Left of the Code Editor you can find the Side Bar area which can contain different views, e.g. the Explorer view like you can see in the screenshot. The Explorer gives you access to the project structure and you can select and open file for editing. You can toggle the visibility by using keys ⌘B.
  • On the very left side you can find the View Bar. By using the View Bar you can switch the view which is displayed in the Side Bar. The following views are available by default: Explorer, Search, Git, Debug, Extensions.
  • Underneath the Code Editor you can find the Panels area. Here you can choose from four different panel views: Problems, Output, Debug Console and Terminal.
  • The blue Status Bar at the bottom of the application windows gives you access to information about the opened project and the open files.

Zen Mode

Visual Studio Code offers a Zen Mode which let’s you focus on the code. In this mode all other user interface elements are hidden and only the editor area is visible. To switch to Zen Mode use the key shortcut ⌘K Z. To leave the Zen Mode you need to hit ESC two times.

Working With The Code Editor

The Code Editor is a powerful tool. You can open up to three files side by side as you can see in the following:

There are different ways of opening up a file side by side:

  • Hold the Cmd key and click on a file in the Explorer view in the Side Bar
  • Choose the content menu entry Open to the Side for a file in the Explorer view
  • Click the Split Editor button in the upper right of the editor
  • Drag and drop a file to the side to open another editor
  • Hit Cmd+Enter in the Quick Open file selector

IntelliSense

The code editor has a feature which is called IntelliSense. IntelliSense features could be described as code completion, content assist and code hinting. By default IntelliSense features are available for the following languages: JavaScript, TypeScript, JSON, HTML, CSS, Less and Sass.

If IntelliSense is available, suggestions will pop up as you type. If you continue typing, the list of suggestions is filtered to include only members containing your typed characters. You can press Tab or Enter to accept and insert the current suggestion.

You can also activate IntelliSense explicitly by using keycode ⌃Space.

Quick File Navigation

To quickly open files type ⌘P. The following input dialog appears:

As you can see you can start typing immediately and you’ll get back a result list with matching file names.

Searching

By clicking on symbol


in the View Bar you can open the Search View in the Side Bar which looks like the following:


This view can be used to search across files of the current project. You can also open the view by using keys Ctrl+Shift+F. In the open search view you can start typing and the matching results will be shown after pressing enter:

Using The Command Palette

All functions of Visual Studio Code can be accessed via keyboard only. To do so, just make use of the command palette (Ctrl+Shift+P):

You can start typing in the input field of the Command Palette and you’ll receive a list of matching commands instantly.

User And Workspace Settings

Configuration of Visual Studio Code can be done in two different scopes:

  • User These settings apply globally to any instance of VS Code you open
  • Workspace These settings are stored inside your workspace in a .vscode folder and only apply when the workspace is opened. Settings defined on this scope override the user scope.

You can use the Command Palette to open user or workspace settings. Just type in Preferences: Open User Settings or Preferences: Open Workspace Settings and hit enter. The following view opens:


On the left side you can see all default settings of Visual Studio Code. You can copy and paste the default settings to the right side to override a settings with a new value:

Changes to settings are activated automatically after the settings.json file on the right side is saved.

Integrated Terminal

Visual Studio Code contains an integrated terminal, so that you can execute terminal commands from within the application. The terminal is available in the Panels area. You can create multiple terminal instances, as you can see in the following:

Extensions

Extensions are an easy way to extend the out-of-the-box functionality of Visual Studio Code. You can browse and install VS Code extensions from the Extensions view in the Side Bar. To open that view just click on the Extension Icon in the Activity Bar on the left. The following view will open:


You can also search for extensions in the Visual Studio Code Marketplace https://marketplace.visualstudio.com/VSCode.

In the extensions view you can search for extensions. The list of results is presented in the Side Bar area. You can select an extension from the list and the extensions’s details page is presented on the right side:

ONLINE COURSE: The Web Development Bootcamp

The only course you need to learn web development – HTML, CSS, JS, Node, and More!

The Web Development Bootcamp

  • Make REAL web applications using cutting-edge technologies
  • This is the only complete beginner full-stack developer course that covers NodeJS.
  • Build 13+ projects, including a gigantic production application called YelpCamp. No other course walks you through the creation of such a substantial application.

Go To Course

Light Bootstrap Dashboard Pro Angular Theme

Light Bootstrap Dashboard PRO Angular 2 is a Bootstrap Admin Theme designed to look simple and beautiful. Forget about boring dashboards and grab yourself a copy to kickstart new project! It is the easiest way to save time and money for your development.

Light Bootstrap Dashboard Pro Angular Theme

  • 120 Handcrafted Components
  • 15 Customized Plugins
  • 24 Example Pages
  • Fully Responsive

Go To Course


Using and writing about best practices and latest technologies in web design & development is my passion.

    View Comments
    There are currently no comments.

    *