Software Engineering Sector

Software Development Department

Visual Studio Code Guide

V1.0
Table of Contents
Introduction .................................................................................................................................... 3
Extensions ....................................................................................................................................... 4
Install extensions ......................................................................................................................... 4
Useful extensions to install.......................................................................................................... 5
Drupal 8 ................................................................................................................................... 5
nodeJs...................................................................................................................................... 5
Angular .................................................................................................................................... 5
WordPress ............................................................................................................................... 5
Flutter ...................................................................................................................................... 5
General .................................................................................................................................... 6
Connect with remote server ........................................................................................................... 7
Get your device’s public key ........................................................................................................ 7
Add a new connection ................................................................................................................. 7
Rename connections ................................................................................................................... 8
Open a connection ...................................................................................................................... 9

2
Introduction
“Visual Studio Code is a streamlined code editor with support for development operations like
debugging, task running, and version control. It aims to provide just the tools a developer needs
for a quick code-build-debug cycle and leaves more complex workflows to fuller featured IDEs,
such as Visual Studio IDE.”

This document is guide for the basics you need to learn in order to start using visual studio code
as your code editor.

First, let us start with downloading visual studio code from here:
https://code.visualstudio.com/download

Then, we will learn about visual studio code extensions, how to install them, and will list some
useful extensions.

Lastly, we will detail how to connect to a remote server using visual studio code.

3
Extensions
“Increase the power of Visual Studio Code through Extensions. The features that Visual Studio
Code includes out-of-the-box are just the start. VS Code extensions let you add languages,
debuggers, and tools to your installation to support your development workflow.”
Firstly, will detail how to install a new extension with steps. And then, will list some of the most
popular extensions used.

Install extensions
1. Click on settings button at the corner > extensions

2. Search for any extension for example: remote – ssh

3. Click on install

And now the extension is installed 🎉!

4
Useful extensions to install
Drupal 8
- phpcs
- phpcbf
- PHP DocBlocker
- PHP Debug
- Composer extension
- Twig Language 2
- Drupal 8 snippets
- Drupal 8 JavaScript Snippets
- Drupal 8 Twig Snippets
nodeJs
- Bracket Pair Colorizer 2
- npm
- npm Intellisense
- ESLint
- DotENV
- earch node_modules
- View Node Package
- Node exec
Angular
- TSLint
- Auto Import
- Angular 2 TypeScript Snippets
- Angular 2 TypeScript/HTML Snippets
- Angular2 Files
- angular2-inline
- angular2-switcher
WordPress
- wordpress snippet
- Wordpress Development Toolkit
- WPCS Whitelist Flags
- Wordpress VS Code Extension Pack
- WordPress Toolbox
Flutter
- Flutter
- Dart
- Flutter Awesome Snippets
- Pubspec assist

5
 - Image Preview
- Material Icon Theme
- Complete flutter extension pack
General
- Debugger for Chrome
- Empty Indent
- Code Spell Checker
- Auto Close Tag
- Path Intellisense
- MarkdownLint
- Material Icon Theme
- Snippet Extensions
- Prettier Code Formatter
- JS Refactor
- JavaScript Booster
- Live Server
- Quokka.js
- Paste as JSON
- NgBootstrap Snippets
- Import Cost
- ES7 React/Redux/GraphQL/React-Native snippets
- Live Sass compiler
- Debugger for Chrome
- C#
- Live Server
- ES Lint
- Beautify
- Better Comments
- Better Align
- Polacode
- Path Intellisense
- Browser Preview
- JavaScript (ES6) Code Snippets
- Settings Sync
- Git Lens
- Error Lens
- Better Comments
- Todo tree
- Color Highlight
And there are plenty other available extensions which will make your coding much easier 🚀!
You can search for them in visual studio code marketplace:
https://marketplace.visualstudio.com/vscode

6
Connect with remote server
Get your device’s public key
1. Run this command in terminal
cat ~/.ssh/id_rsa.pub

2. Send your key to Lama or Ahmer to add it to the server you need access to.
Add a new connection
1. Install Remote – SSH extension (check install extension section)
2. Go to remote explorer from side menu

3. Click on “+” add new button

4. Add the server IP to the popped-up field

In the format: [user]@[server ip]

7
Rename connections
1. Click on the settings button in remote explorer

2. Select the first option from the pop up and click enter

3. Change the Host from IPs to projects names for example

For example:

Save the file.

8
Open a connection
1. From the servers list

2. Click on the icon beside the IP/name

3. It will open a new window, click on Explorer icon

4. Click on open folder

9
5. Then add the path in the field popped-up:

for example: /var/www/html/sfdasolar/ and click enter

6. And then the files will be loaded and you can start working 👏!

10