Visual Studio Code Extension – Settings Sync


I have recently seen many posts about the top Visual Studio Code Extensions to have. For example:

https://medium.com/swlh/60-extensions-to-supercharge-visual-studio-code-2f93a51b3cf4

https://tahoeninjas.blog/2019/03/14/ultimate-developer-tool-list-for-spfx/

https://scotch.io/bar-talk/22-best-visual-studio-code-extensions-for-web-development

Depending on what type of development you work on, will depend on which extensions are best for you.

I’m not going to give you a list of extensions you need to install. I’m just going to offer you one.

Settings Sync Extension

As a contractor, I’m often having to use the client machines. Day one is always the same steps:

  1. Install Visual Studio Code
  2. Try and remember all the extensions I like to use and install.
  3. Configure extensions

The Sync Settings Extension written by Shan Khan stores your configuration in a private GIST (can be public). All you need to remember/store is your GitHub Access Token and your GIST ID. Let me explain how to set it up. (Or you can just read the Extension readme page)

Getting a GitHub Access Token

  • Sign into GitHub and generate New Token in GitHub https://github.com/settings/tokens/new?description=code-setting-sync&scopes=gist
  • In Note section, you can name your access token something different to code-setting-sync if you wish.
  • Ensure that gist is ticked.
  • Click Generate token.
  • On the next page, you will get your Personal Access token. Take note of this and store it in a safe place. Once you have closed this page you will not be able to get the value again and will need to generate a new access token.

Setting up Settings Sync for the first time.

>Sync: Upload
  • This will prompt you to enter your GitHub Personal Access Token that you created in the previous step.

(Image taken directly from the extension webpage)

  • It will upload all your settings and provide you with a GIST ID. Take a copy of this ID and store it somewhere save. It doesn’t matter too much if you lose this, as you can find this ID directly in GIST.


(Image taken directly from the extension webpage)

Setting up Settings Sync on other machines.

>Sync: Download
  • Enter your GitHub access token and press enter.
  • Enter your GIST ID
  • All your Settings / Extensions that were previously uploaded on the first machine are now downloading on your second machine and will prompt for you to restart VSCode for the extensions to start working.

What you should do on all machines.

To keep the machines in sync, I have turned on both Auto Download and Auto Upload on change. Complete the following to set this up on your machines too.

  • In Visual Studio Code, open the command palette, (Ctrl + Shift + P) and type
>Sync: Advance Options

  • Select Toggle Auto-Download On Startup
  • Repeat the process to get back to the Advance Options and select Toggle Auto-Upload on Setting Change

What is stored in the GIST

If you navigate in a browser to your GIST

https://gist.github.com/{your_userName}/{gist_id}

Or

https://gist.github.com and look for your GIST called cloudSettings.

The cloudSettings GIST contains 5 different .json files.

The cloudSettings.json file holds the extension version and the last uploaded time.

The extensions.json file contains all the extensions that you have installed.

The keybindings.json file contains any custom keybindings you have configured.

The keybindingsMac.json file contains any custom keybindings you have configured on an Apple device.

Lastly settings.json file contains any custom settings you have configured in Visual Studio Code.

There are many extensions within the marketplace and some are useful, others not so much. Although I have no personal involvement with this extension, it’s the best one for me. I only need to remember this one extension! And all my machines will keep in sync with each other.

TryGetView SPList extension


Extension methods are a new feature in .NET 3.5 and I think they are brilliant to extend existing classes. I’m not going to talk about them any more in detail here, but if you wish to find out more about them you can find them at the following Microsoft link.

http://msdn.microsoft.com/en-gb/library/vstudio/bb383977.aspx

To find a list in a given SPWeb you have a couple of options, by ID of the list, by the index of the list collection, by the name of the list. The one I like to use is:

SPList myList = SPContext.Current.Web.Lists.TryGetList("My Custom List");

The reason why I like to use this code is that if it is unable to find the list it returns a null value. Here is where I think Microsoft has missed a trick, why isn’t there SPList.TryGetView(“My View”)? There is an easy way of creating it by using extensions.

public static class Extensions
{
  public static SPView TryGetView(this SPList spList, string viewName)
  {
  return spList.View.Cast<SPView>()
               .Where(view => !view.Hidden)
.FirstOrDefault(view =>
                String.Compare(view.Title, viewName, String.Comparision.OrdinalIgnoreCase) == 0)
  }
}

The above extension will allow you to search for a view by name on a given list, and return null value if it cannot find the view.