--- Sjoerd Hooft's InFormation Technology ---

User Tools

Site Tools


Recently Changed Pages:

View All Pages

View All Tags


WIKI Disclaimer: As with most other things on the Internet, the content on this wiki is not supported. It was contributed by me and is published “as is”. It has worked for me, and might work for you.
Also note that any view or statement expressed anywhere on this site are strictly mine and not the opinions or views of my employer.

Pages with comments

View All Comments


Getting Started With Visual Studio Code

I personally use Visual Studio Code for the following tasks, and this page explains how to set up VSCode for these tasks:

  • internal web portal using html\bootstrap\css\javascript and powershell into Team Foundation Server 2018
  • various powershell scripts into Team Foundation Server
  • various websites using html\bootstrap\css\javascript into Azure DevOps
  • AWS serverless application model
  • Terraform
  • Azure Infrastructure as code
  • and more

Program Installation

Because TFS and Azure DevOps are both configured to use git you also need to install git.

Note: If any of these are configured to use TFVS you also (or in place) need Visual Studio. If you do not use TFVS you don't need Visual Studio. In case you do need it, the community edition (free) will do.

Visual Studio Code Installation

  • Go to and download and install the latest version
  • You can keep everything default which performs a user installation. Installing the user setup does not require Administrator privileges as the location will be under your user Local AppData (LOCALAPPDATA) folder. User setup also provides a smoother background update experience.

Git Installation

  • Go to and download and install the latest version
  • Set Visual Studio Code as Git's default editor
  • Keep everything else default

Once the installation is done, start Git Bash from the start menu and enter the following commands to set your username and email address:

  git config --global ""
  git config --global "Your Name"

Use Windows Certificate Store

If the git server changes certificates, you'll also need to update your Git's Certificate store. In a managed environment it might be better to use the Windows Certificate store:

  git config --global http.sslBackend schannel
Note that this is possible starting Git 2.14

Extension Installation

To install an extension, click the Extension (CTRL-SHIFT-X) icon in the activity bar.

The following extensions can be beneficial:

  • Azure Repos
    • Is required for working with TFVC Repositories. To decreased demand the extension has been sunsetted by Microsoft.
  • Azure Pipelines
    • For yml pipeline formatting etc.
  • Beautify
    • Beautify javascript, JSON, CSS, Sass, and HTML in Visual Studio Code. Run with F1 Beautify (to beautify a selection) or F1 Beautify file. Personally I don't recommend it for HTML because of the line breaks that I don't want. Haven't tried it on other files.
  • Preview on Web Server
    • This extension provide preview of HTML which execute on web server. When you save files, this extension automatically reload browser or side panel (live preview feature). Preview on side panel (ctrl+shift+v). Launch on browser (ctrl+shift+l). Works, but feels a bit heavy and only useful on big screens. It's usually more beneficial to load the website as a local page (copy path).
  • HTML Preview
    • An extension to preview HTML files while editing them in VSCode. Activate in two ways: Preview - ctrl+shift+v - Open Preview to the Side - ctrl+k. Again, It's usually more beneficial to load the website as a local page (copy path).
  • ESLint / jshint:
    • Integrates ESLint Javascript into VS code - needs more info, needs npm to install
    • Integrates JSHint into VS Code
  • Image Resize
    • Resize from the menu: Resize PNG, JPEG or BMP images from the explorer menu
  • Insert Unicode
    • Search for unicode characters and insert them into documents.
  • Am i Behind
    • Modify the setting to display the message as an error, and you'll be notified if a repository has upudates.
    • Only supports the true pipeline functionality for webapps, but allows for syntax checking on yaml pipelines so still useful
  • ARM Template Visualizer - Still testing
  • Auto Rename Tag
    • Automatically renames a corresponding tag
  • Error Lens
    • Improved highlighting of errors and warnings
  • Sort Lines
    • Select the lines you want to sort alphabetically and press F9. Note that there are other sort options available, press F1, type sort and select the required type of sort.
  • Bookmarks
    • Create bookmarks (with labels) within your code for easier searching pieces of code. Select the lines and right-click → bookmarks. F1 → bookmarks for more options.
  • Git Graph
    • A graphical overview of git history. Go to source control and click on the git graph icon next to the source.


Change the following settings for better day-to-day experience. To modify settings, always first go to File → Preferences → Settings and then search for the keyword listed below:

  • wrap tabs: Enable
  • bracketPairColorization: Enable
Note that you do not need to save the settings, this is done automatically

Working with Files

Disclaimer: Now before you continue now you need to realize you're going to work with files in an remote repository, and working on those files locally. I really use Git only on a very basic level so I'm probably not a good example. My way works, but probably only because I'm the only one using the files.

You need a root folder to store the locally synced repository. I have some experience with both that folder on an onedrive location as well as out of it. Both work, but without oneDrive makes it less complex. So on your local drive create a folder like “AllRepos” and then later on, place the projects below this root folder. And then don't forget to sync before you start working and commit and sync when you're done working.

Connect to TFS Server

From with the TFS Server Console, follow these steps:

  • Go to your project
  • Click on Code
  • Click on Clone
  • Create a subdirectory below your root directory created in the previous step
  • In Visual Studio Code select File → Add folder to workspace → Select the new created directory
  • Right click the folder as it shows in the explorer section and select Open in Terminal
  • Issue the command git clone https://tfs.getshifting.local/tfs/GetShifting/DevOps/_git/DevOps-Maintenance

Error: fatal: Authentication failed for

If you get the error fatal: Authentication failed for <name repo> you have either no authentication for the TFS server in your Credential Manager or the wrong one.

  • Go to Control Panel
  • Credential Manager
  • Manage Windows Credentials
  • Add a Windows credential
    • Enter the server name without protocol: servername.domain.ext
    • Enter your username with domain: domain\username
    • Enter your password
  • Click OK

Edit a File And Commit

After you changed a file follow these steps to have it committed back to the repository:

  • Go to Source Control, click the check icon.
  • A message shows that a changed file is unsaved yet, Click “Save All & Commit”
  • Provide a commit message (Use ***NO_CI*** to not trigger Continuous Integration)
  • Click the three dots for more action, select sync. A message shows that this action will push and pull commits to and from origin/master.
  • Click OK
To stay up to date with remote repository, enable git.autofetch, which will be asked after your first commit → sync.

Changed Passwords

If, due to for example password policies, your password for TFS changes you might have to change your password on two places. The error you'll get is something like “Git fatal authentication failed for (url or team project)”

  1. The documentation states you should do a “team signout” and a “team signin”
  2. Change the password in the Windows Credential Manager as well: Control Panel –> Credential Manager –> Manage Windows Credentials –> Choose the entry of the git repository, and Edit the user and password.

Connect to Azure DevOps

Fron the Azure DevOps website, follow these steps:

  • Go to your project
  • Click on Repos
  • Click on Clone
  • Select and then click “Clone in VS Code”
  • A message shows that an extension want to open a url, Click Open. This opens Visual Studio Code. Continue with these steps in Visual Studio Code:
  • Select the folder you created above as your Repository Location as under this folder a directory will be created named after the project in Azure DevOps
  • Log into your Azure DevOps
  • A question shows, open the repository when asked
  • A message shows that you're not signed in, and to click on Teams below.
  • To login use either:
    • a personal access code (from Azure DevOps → User profile → Security → New Token)
    • the new experience which enables your device through your browser

Personal Tips

  • Powershell: Toggle Terminal: Ctrl + `
  • HTML: To improve the formatting of your HTML source code, press Ctrl+K Ctrl+F and the selected area will be reformatted.
  • Geselecteerde regels omzetten naar commentaar en terug: Ctrl + /


You could leave a comment if you were logged in.
vscode.txt · Last modified: 2022/06/19 15:00 by sjoerd