SHIFT

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

User Tools

Site Tools


Sidebar

Sponsor:

Would you like to sponsor this site?
Or buy me a beer?:


Recently Changed Pages:

View All Pages
View All Q Pages


View All Tags


Sign up for Q to post comments.





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.


Terms And Conditions for Q users


Pages with comments

PageDateDiscussionTags
2019/06/22 10:36 1 Comment
2019/03/15 16:02 1 Comment
2019/03/15 16:02 1 Comment
2019/03/15 16:02 3 Comments
2017/04/20 15:28 1 Comment
2017/04/20 15:23 1 Comment
2017/04/19 14:44 1 Comment
2017/04/17 20:10 1 Comment
2017/04/17 20:07 1 Comment
2017/04/17 19:58 1 Comment
2017/04/17 19:52 1 Comment

View All Comments

vscode

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

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 https://code.visualstudio.com/docs/setup/windows 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 https://git-scm.com/ and download and install the latest version
  • Set Visual Studio Code as Git's default editor
  • Keep everything else default

Extension Installation

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

The following extensions can or must be installed:

Extension Name Mandatory Remarks
Azure Repos Mandatory Required for working with both TFS and Azure DevOps
Beautify No Beautify javascript, JSON, CSS, Sass, and HTML in Visual Studio Code. Run with F1 Beautify (to beautify a selection) or F1 Beautify file.
PowerShell Mandatory
Preview on Web Server No 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.
HTML Preview No 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

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.

Resources

You could leave a comment if you were logged in.
vscode.txt · Last modified: 2019/09/27 11:17 by sjoerd