In this article, we will see how to Integrate VSTS with Visual Studio Code for SharePoint Framework Projects. Usually, we will be using GIT with the VSCode. But, there is an extension called “Visual Studio Team Services” for the VSCode. Let us see, how to use that extension to CheckOut and CheckIn our source code using the TFVC in VSTS.
Now, let us see the step by Step procedure to create an account and profile in the VisualStudio.com
1. Login to the https://visualstudio.com with your Microsoft ID.
2. With this ID, we can use 5 user licenses for free.
3. Once, we login, go to the services page with the below URLhttps://app.vsaex.visualstudio.com/me?mkt=en-US&campaign=o~msft~vscom~signin#
4. We will see the below screen.
5. Click on “Create new Account”.
6. Give a name for the Account and select the second Option on “Manage code using”: section.
7. i.e., the “Team Foundation Version Control” and click on Continue.
8. Once, the account got created, click on “New project”
9. Give an appropriate name for the project as below and select the Version control as “Team Foundation Version Control” and the project template, am leaving it to you. Either it can be an agile, scrum etc.,
10. Create a SPFx project using the Command prompt by giving the YO commands.
11. Open the solution in VS Code.
12. Click on the Extensions, the fifth tab on the left menu and Search for “Visual Studio Team Services” and install the Extension.
13. In vs code go to File->preferences->settings-user settings add the below line of code
“tfvc.location”:”C:\\Program Files (x86)\\Microsoft Visual Studio\\2017\\Community\\Common7\\IDE\\CommonExtensions\\Microsoft\\TeamFoundation\\Team Explorer\\TF.exe”,
“tfvc.restrictWorkspace”: true
14. Go to the command palette
15. On the command palette, enter the Team:Sign in command
16. Once, we enter, we will see the error as shown below. “No Team Services or Team Foundation Server repository configuration was found. Ensure you’ve opened a folder that contains a repository”
17. For creating the repository, we need Visual Studio IDE, Eclipse or with the JetBrains IDEs (e.g, Android Studio, IntelliJ). or any sort of IDE for sure. Without that, we cannot start using the TFVS with VSCode. This is a one time requirement and even the free community version of the Visual Studio 2017 will do this. No extra cost is incurred here.
18. Open the Visual Studio and go to “Manage Connections”
19. Click on the “Connect to a Project”
20. Select the project which we created on the first few steps of this article.
21. On the Configure Workspace section, give appropriate folder name and Click on “Map & Get”
22. Now, close the VSCode and Open again. Otherwise, the newly added .VSCode folder will not be taken by the VSCode.
23. Now, connect with the Team again.
24. This time, we will get a different exception. “You are not connected to Team Services (vstswithvscode). Select ‘Learn more…’ and then run the ‘team signin’ command.
25. Again close the VSCode and reopen and click on the “Team Signin” in the Command palette. This time, we will get the option as shown below. On that, select the second Option “Authenticate and get an access token automatically (new experience)”
26. There will be a code displayed as below. Copy the code and click enter.
27. Paste the code on the below box, which will be opened automatically and click “Continue”
28. A new popup will be displayed, where we need to enter the Microsoft ID and password.
29. Once, the Password is validated, then we will be displayed with the below screen. Now, we can close the screen.
30. When we come back to the VSCode, again, we will end up with a different exception. It appears you are using a Server workspace. Currently, TFVC support is limited to Local Workspaces.
31. Now, go back to Visual Studio and go to the Solution Control Explorer
32. Click on the Workspaces.
33. Select the workspace and Edit and go to the Advanced Mode.
34. The Location of the workspace will be by default “Local” only. But, it is not recognized by VSCode. Am not sure, whether that is a bug with the VSCode or not. But, the workaround is, change the Location to “Server” and do a save.
35. And then, change the location back to “Local” and save.
36. Now, open the developer command prompt
37. Go to the path C:\\Program Files (x86)\\Microsoft Visual Studio\\2017\\Community\\Common7\\IDE\\CommonExtensions\\Microsoft\\TeamFoundation\\Team Explorer\\ Where the TF.EXE is present.
38. Execute the TF.EXE Command (i.e. tf vc workspaces /collection:<YourCollectionName>), it will pop up with the user name and password. Provide the credentials. It will get connected.
39. Then, close the VSCode and open again. Try connect Team. It will connect as below.
40. Open the source code folder from the VSCode. We can see that it got connected with the TFVC and there are around 37K files in the Excluded State. We need to add the .tfignore file similar to .gitignore file. The sample .tfignore file is available on the source code zip, which can be downloaded at the bottom of the article.
41. Once, added the .tfignore file, we will get only 24 files to be checked in approx.. The reason, is we are not going to checkin the NPM Modules along with our source code. Anyhow, for the second developer, he can take the code from the VSTS and if he installs the NPM on the folder, then he will be getting the NPM modules and he should be able to build the solution without any issue.
By this way, we can start using the VSTS for the VSCode projects as well. The same process can be repeated for every developer and get the latest source code from the VSTS. In the upcoming article, let us see, how to do the Continuous Integration and Continuous Deployment with VSTS.
Leave a comment