My Typical Initial Setup

Before installing Visual Studio Code, I found that things go smoother if I install a few things, first:

1. Git Client
   • Go to https://git-scm.com/ to download the client that works well with Visual Studio Code.
   • Download GitHub Desktop from https://www.microsoft.com/net/download/visual-studio-sdks to make it easier to create and manage repositories that are cloned locally from Git.
2. Microsoft SDKs
   • Desired .NET Core and .NET Framework versions can be downloaded from https://www.microsoft.com/net/download/visual-studio-sdks.
3. Install Node.js (https://nodejs.org)
4. Install Visual Studio Code (https://code.visualstudio.com/download)
5. Configure credential helper
   • For Windows installations, it's probably best to use the Windows Credential Store to store your Git login credentials, so you don't have to enter your username and password every time you synchronize with the remote repository using this following command in the Visual Studio Code terminal: git config --global credential.helper wincred

Bulk Visual Studio Code Extension Installation

Following is an example PowerShell script that can be executed within the Visual Studio Code terminal to ensure that a list of extensions have been installed:

$RecommendedExtensions = @(

    'abusaidm.html-snippets',

    'Angular.ng-template',

    'christian-kohler.npm-intellisense',

    'christian-kohler.path-intellisense',

    'DavidAnson.vscode-markdownlint',

    'dbaeumer.jshint',

    'dbaeumer.vscode-eslint',

    'DotJoshJohnson.xml',

    'ecmel.vscode-html-css',

    'EditorConfig.EditorConfig',

    'eg2.tslint',

    'eg2.vscode-npm-script',

    'esbenp.prettier-vscode',

    'fknop.vscode-npm',

    'formulahendry.auto-close-tag',

    'HookyQR.JSDocTagComplete',

    'johnpapa.Angular2',

    'johnpapa.angular-essentials',

    'johnpapa.winteriscoming',

    'lolkush.quickstart',

    'mkaufman.HTMLHint',

    'msjsdiag.debugger-for-chrome',

    'ms-mssql.mssql',

    'ms-vscode.csharp',

    'ms-vscode.PowerShell',

    'natewallace.angular2-inline',

    'sidthesloth.html5-boilerplate',

    'xabikos.JavaScriptSnippets',

    'Zignd.html-css-class-completion'

)

$InstalledExtensions = (code --list-extensions) -split '\r\n?|\n';

$RecommendedExtensions | ForEach-Object {

    if ($InstalledExtensions -contains $_) {

        "$_ is already installed." | Write-Host;

    } else {

        code --install-extension $_;

    }

}

NPM Modules

I have found that for some modules, it is best to install them globally if you intend to use them. When you actually use them in your project, it's good to install them locally as well. Following are some of the modules I found I needed to install globally:

• gulp:This can be useful for defining more complicated tasks.
• uglify-js: This is used for compiling many JavaScript files into a single distributable.
• mocha: This is a unit testing framework.
• eslint: Error checking for JavaScript
• @types: This contains many modules which provide typescript definitions
  • @types/core-js
  • @types/node
  • @types/jquery
  • @types/mocha
  • @types/angular
  • @types/uglify-js
  • @types/bootstrap
• generator-code: Creates a boilerplace file and folder structure to create your own Visual Code extension or customization package.
• jshint: Adds JavaScript intellisense.
• tslint: Error checking for TypeScript
• typescript: Adds TypeScript intellisense.
• vsce: Assists with publishing your own Visual Studio code extensions.
• yo: Scaffolding system which services as the base framework for many other modules which create boilerplate code for many project types. These other modules should also be installed globally, as well. Following are some generator modules which use yo:
  • angular: AngularJS project
  • gulp-angular: AngularJS project with Gulp
  • webapp: Front-end web app
  • javascript: JavaScript library
  • node: node.js module
  • bootstrap: Add bootstrap to a project
  • node-typescript: Node.Js module using TypeScript

View clean list of top-level modules installed

The following command will produce a bare minimum list of modules that will need to be installed in order to reproduce re-produce the global module installations on another environment:

((npm list -g) -split '\r\n?|\n') | Where-Object { $_ -match '^[`+]--' } | ForEach-Object { $_.Substring(4) }

Local Git Repository Synchronization Issues

Many times, when a new local clone of a remote repository is created, sync and push commands will fail, saying there is no upstream branch. This can be fixed with the following command, replacing "remoteName" with the name of the remote repository and "remoteBranch" with the name of the remote branch (which is typically the name of the current branch):

git branch --set-upstream-to remoteName/remoteBranch

So, if your remote repository name is "origin", and your current branch is "master", then the actual command would be:

git branch --set-upstream-to origin/master

Getting the name of the remote repository

If you aren't sure what the name of the remote repository is, simply use the following command:

git remote

Getting branch names

Typically, you would be able to see the name of the current branch in the lower-left corner of the Visual Studio Code editor window. Alternatively, you can see what the name of the currently checked out branch is by using the following command:

git branch

You don't have to have a branch checked out in order to configure the upstream branch. To see a list of all the branch names use:

git branch -a

Deleting a branch

If you wish to delete a branch, you can use the following command:

git branch -D name_of_branch