In the last two articles, we learned how VSCode uses shortcuts to make writing code more flexible, even without the mouse. It also introduced a number of commonly used plugins that made us even better, like VSCode with legendary assembly.
Haven’t read the above mentioned two articles “VSCode common keyboard shortcuts”, “VSCode plug-in”, you can learn to learn ha in the past.
With martial arts secrets (shortcut keys) and advanced internal skills (plugins), is VSCode invincible? Things happen to us, things happen to us. Our computers might break down or we might retire. We might even have multiple computers. Won’t we have to start from scratch with our nicely configured VSCode at this point?
So in this article I’m going to introduce you to a VSCode plug-in specifically designed to solve this problem. After reading this article we will learn how to synchronize all the carefully configured plug-ins, shortcuts, and configurations in VSCode with one click.
Configure the synchronization plug-in
Settings Sync is a free, easy-to-use VSCode plug-in. It is a Gists Gists Gists that are synchronized using the GitHub in the Gists as a configuration file store. It allows us to synchronize VSCode configuration across countless devices.
You can sync the following for us:
- The configuration file
- Shortcut Key Configuration
- Startup file record
- Snipper file (custom code template)
- VSCode plug-ins and plug-in configuration
- The Workspace folder
That sounds impressive, but is it really that easy to do? Indeed, the configuration is neither complex nor tedious. At most, copy and paste the following ID, and the first use is automatic. Just log on to GitHub and the script for the plugin will do the rest.
Although it is simple to say, BUT I also fell a few times when the first configuration, so next I step by step to explain the detailed configuration of partners.
“Ii” plug-in configuration and construction
The documentation for the plugin simply describes how to use it, but I still feel confused when I use it. There are a lot of details that would have saved a few hairs if they had been documented.
So I’ve put together a hand-in-hand tutorial to take you through the configuration synchronization and put it together.
Install Settings Sync and prepare
Enter Settings Sync in the plugin search bar and press the Install button hard.
In introducing this Gists it is mentioned that this Gists are stored in the GitHub account. So we must have a GitHub account. If you already have a Github account, you can skip the sign-up tutorial.
Registered making
👉"Click here to register an account" 👈
- Username: fill in your Username, if you have the plan to do open source projects in the future, give yourself a good name, may be with you for a lifetime oh.
- Email Address: Fill in the Email address we usually use.
- Password: As the name suggests, fill in our login Password.
- Email Preferences: Tick GitHub to send product updates, announcements, and preferences to your inbox at irregular times. (Don’t want to be disturbed by email, you can leave the check box)
For anti-robot verification in the account information, just click the arrows on both sides of the picture to rotate the picture in the correct direction and click Done. Then click Create Account.
If you click
Create accountGitHub thinks your password is too easy to guess. Therefore, it is recommended to use the “case + number + symbol” rule for your password.
Click on theCreate accountAfter that, GitHub will start verifying your account… .
Finally, there will be an anti-robot verification image. Rotate the image and click Join a Free Plan (as the name implies).
You will be sent to this page, where you will be asked a few questions:
- What kind of word do you do, mainly? — What kind of work do you mainly do?
- How much programming experience do you have? — How familiar are you with programming?
- What do you plan to use GitHub for? — What are you going to do with GitHub?
- What are you interested in?
These are questions you can answer if you care, and they are used to push/recommend projects to you on Github. Finally clickComplete setup, will do.
Finally, GitHub will send a verification email to our email, go to our email and click the verification link to complete the GitHub account registration.
Log in with your GitHub account
As mentioned above, this plug-in is based on GitHub Gist to store the configuration, so we need to use GitHub authorization to log in and obtain the read and write permission of Gist to save and read the configuration. Basically, all of our configuration data is stored in our Gist on GitHub. Easy to save and download.
Log in to GitHub with authorization
This page will appear automatically once you’ve installed VSCode. If you’re using it for the first time, click LOGIN WITH GITHUB
I’ve seen a lot of tutorials where you have to go to GitHub and create a personal access token or something. Those are outdated configurations. Now you can log into GitHub directly from the VSCode plugin page and get a private personal token that is automatically generated. This way is much more convenient.
After clicking, VSCode will pop up a prompt box, mercilessly click open!
Of course cautious and obsessive kids are terrified of any links that feel like fraud. Don’t be afraid that the plugin is actually trying to open a GitHub authorization page to get access to our GitHub access token.
At this point VSCode will open the GitHub license page using our default browser. Don’t panic, this authorization only grants VSCode to configure the synchronization plug-in read and write permission and basic account information (including, name, username, etc., will not expose their own sensitive information). So we can feel at ease and ruthlessly click Authorize Shanalikhan can be authorized!
After the authorization is successful, the page is displayed with the message “Success! You can now close this page “. The curiosity of children’s shoes will ask: why our URL is http://localhost:54321/callback? Code = XXXXXXXXXX:?
This is the listening address enabled by the sync plugin to retrieve the Code key returned by the GitHub callback. Now we can go back to VSCode and see what’s changed.
Back to VSCode, if we are to see the following page to prove successful login! 🎉
🌟 if you return to VSCode and find this error in the lower right corner, it is usually due to GitHub interface connection failure. This may have been caused by a sudden failure to access GitHub. (We are, after all, under the Great Wall of the Web, so it’s normal to have problems connecting to GitHub sometimes.)
If it’s a problem, as long as we go backSettings SyncThe home page, again full of faith clickLOGIN WITH GITHUB. The second time is basically ok.
Use the original Configuration
If we’ve used this configuration synchronization plug-in before, install it in the new VSCode editor on another computer and log in using the same GitHub account. At this point, you’ll find a page that displays our Gist configuration history (see figure below).
If there is a history, we can select a record and then download the configuration to the current VSCode with one click. All the plugins, keyboard shortcuts, editor configurations and themes that we’ve synchronized will be downloaded automatically. Perfect restoration of our previous VSCode usage scenarios!
Creating a New configuration
If we’re using it for the first time, all we need to do is click SKIP here. When we first upload the configuration, we create a new Gist to save.
3. Usage Guide
Now that we’ve configured the Settings Sync plugin in VSCode, let’s start by talking about how to use this plugin to synchronize.
Upload the configuration
Shortcut:
- Windows/Linux:
Shift+Alt+U - Mac:
Shift+Option+U
🌟 Open the editor command line
Command+Shift+P(Mac) and enter>Sync: Update/Upload Settings. You don’t need to type all of them. You just need to type the first few letters to see the command. And then you can just pick it.
When we upload the configuration, the lower right corner will remind us whether we need to forcibly upload or download the configuration and overwrite the configuration data in GitHub Gist. This is in case we overwrite our own configuration file by mistake.
⚠️ for example, we have installed a brand new VSCode on a brand new computer. Currently, we have not installed any plug-ins or set any configuration. At this time, we need to download the Gist configuration Settings first, right? What if we make a mistake and run upload configuration first? So our local empty configuration overrides what we’ve carefully configured for Gist. At this point we’ll overlay Gist with a VSCode configuration without any plugins or customizations. But don’t worry, as long as we go back to another computer and force the VSCode configuration on that computer, the configuration file will be restored. But if we set up automatic forced uploads and downloads. Then it’s over. It’s hopeless. So forced and automatic synchronization must be used with caution.
We just wanted to upload the latest configuration Settings to Gist, so we hit it hardisIt’s over!
After uploading, we should see the upload log in the output column:
Download the configuration
Shortcut:
- Windows/Linux:
Shift+Alt+D - Mac:
Shift+Option+D
🌟 Open the editor command line
Command+Shift+P(Mac) and enter>Sync: Download Settings. You don’t need to type all of them. You just need to type the first few letters to see the command. And then you can just pick it.
During the download process, the output bar of the console below will output all download logs.
🌟 our plug-in will be automatically redownloaded into VSCode, and all shortcuts and custom configurations will be automatically resynchronized. Since some plug-ins require a restart of VSCode to take effect, it is best to restart the editor after synchronization.
Resetting plug-in configuration
If we want to go to zero, reconfigure the plug-in. At this point we can use the plugin’s built-in reset function.
🌟 Open the editor command line
Command+Shift+P(Mac) and enter>Sync: Reset Extension Settings. You don’t need to type all of them. You just need to type the first few letters to see the command. And then you can just pick it.
Forced to download
Forced download is turned off by default. When the locally logged configuration version is the latest version (plug-ins are based on time), the latest Gist configuration is not automatically forced to download. But if we remove some plug-ins from our native VSCode, and we don’t upload to Gist. At this time, according to the configuration record, there is no updated cloud configuration, so the latest cloud configuration will not be automatically obtained, that is, the missing plug-in will not be automatically filled back.
If we enable forced download, we will download the latest configuration from Gist every time VSCode launches, and any missing plugins will be replaced and any configuration changes will be overwritten.
This is useful in some situations, such as when we change the configuration, disable the plugin, or try several different configurations and plugins in a certain development condition or environment. We want to go back to the original configuration when we’re done. This is where it comes in handy.
🌟 Open the editor command line
Command+Shift+P(Mac) and enter>Sync: Advance Options.A list of Settings will appear after selection
Sync: forcible download switchTo enable/disable this setting.
A list of Settings will appear after selection
Automatically upload when changing
Automatic upload is turned off by default. If we don’t want to change the configuration every time after, shortcuts and plug-ins need to be manually uploaded to Gist. We can enable automatic upload of changes. This also prevents us from forgetting to upload after changing the VSCode configuration and plugins on different computers and not being able to download the latest configuration when we get home.
🌟 Open the editor command line
Command+Shift+P(Mac) and enter>Sync: Advance Options.Sync: Automatically uploads the updated configurationTo enable/disable this setting.
Enable/disable summary output
Upload and download log output is enabled by default. This log outputs all new and removed files and plug-ins. We can turn it off with this setting.
🌟 Open the editor command line
Command+Shift+P(Mac) and enter>Sync: Advance Options.Sync: The summary page is displayed when the synchronization is enabledTo enable/disable this setting.
🌟 Create a shared cloud configuration
Setting Sync creates private Gist by default, so it’s only for us to see, but on many teams and projects, it’s often necessary for everyone to use the same set of configurations and plug-ins. Think of a team where every developer has a different editor and plugin, and we used to be very uncomfortable with helping them debug and teach.
Moreover, a unified plug-in and usage specification and configuration specification can affect the code specification of an entire team project. Most obviously when the entire team uses the same Prettier plugin configuration and it doesn’t work!
Developers who are new to the team also need to arrange for someone to help install some of our team’s specification plug-ins and configurations. Think about whether we need such a thing?
How do I create a shared configuration?
Let’s start by looking at how we share our Gist configuration.
We couldn’t change our private Gist from private to public, so when we turned on the shared configuration for Gist, the Gist ID in the plugin was reset. When we open it up for the first time, we create a whole new Gist and it’s public.
🌟 Open the editor command line
Command+Shift+P(Mac) and enter>Sync: Advance Options.Sync: Share configuration on exposed Gist, you can choose.
Yes, it’s that simple! Then we just upload the configuration once!
Here’s a caveat: The Gist we’ve made public can be downloaded by other users, but you can’t change it. Other users who download the shared Gist will also need to configure their own private Gist to synchronize their own configuration. Of course, I think this is very reasonable, shared out of the configuration, is used for the first time. After downloading plug-ins from the team, they can still customize some of the plug-ins and configurations, adjusting them to suit their personal habits. After all, editors have some different habits for everyone.
How do I download the shared configuration?
If we share our configuration with our dear friends, we should also tell them how to download our configuration.
First we need to find our exposed Gist ID, which can be found in our plugin configuration:
🌟 Open the editor command line
Command+Shift+P(Mac) and enter>Sync: Advance Options.Sync: Enables the Settings, you can choose.
After selecting this option, the Setting page of our Setting Sync will be opened. The location in the box below is our Gist ID. Just copy this ID and share it with anyone who wants to download our shared configuration.
Gist IDAfter that, there are two cases:
- If they’ve been configured before
Settings SyncIf so, you need to reset your plugin configuration first. How clear, I explained in front of, follow the tutorial before clear can (have configured the children’s shoes also need to remember their ownGist ID和The access tokenMake a note of it for later use. . - If no
Settings SyncIf so, you can go straight to the steps I described below.
With everything in place, let’s download the shared configuration:
- First of all, in the manner described above
Open the SettingsAnd then inGist IDThat input box, type in what we gotShared Gist ID, and finally leave the input box (meaning click anywhere outside the input box) to save. - Then do the following:
🌟 Open the editor command line
Command+Shift+P(Mac) and enter>Sync: Advance Options.Sync: Download configuration from exposed Gist, you can choose.After selection, this prompt will appear in the lower right corner:
This means that you don’t need to fill in the GitHub token, just fill in the Gist ID to download the plugin!
After selection, this prompt will appear in the lower right corner:
This means that you don’t need to fill in the GitHub token, just fill in the Gist ID to download the plugin!Ok, the last step is to download the plugin:
Shortcut:
- Windows/Linux:
Shift+Alt+D - Mac:
Shift+Option+D
🌟 Open the editor command line
Command+Shift+P(Mac) and enter>Sync: Download Settings. You don’t need to type all of them. You just need to type the first few letters to see the command. And then you can just pick it.⚠️ If there are more plug-ins, you may need to wait for a while.
You can always stare at the console real-time output of the log, see the completion of synchronization can oh! (If the GitHub connection fails, restart and download the configuration. GitHub hasn’t been very stable lately, so it might be a bit bumpy, so strap in your seatbelts. 😂)
The last step is to rebind GitHub Gist, which you’ll need to do manually:
- We just need to reset the plugin configuration again.
- Then open up the plug-in configuration and write down what we just wrote down
Gist IDandThe access tokenFill in the corresponding configuration items again. - Finally forced to upload our current configuration, remember is forced!
“Final” summary
Right! I almost forgot about the big thing! If you have read my last article on VSCode plug-ins, you know that I shared a lot of the plug-ins I am using in my last article. If you want to download and use it, I have a shared configuration Gist ID for you to use.
Gist ID: 5ca94da358b6833763017e1fbafd994b
Happy time always flies, cherish every inch of time
I am three drill, a programmer drifting in the galaxy of technology learning.
Article helpful to you, give me a triple operation (like, follow, comment support). Happy coding 🎉!
Good article recommendation
- 🔥 “VSCode commonly used shortcut keys encyclopedia | VSCode senior players of the first book” — so for a good programmer, a good code editor can play a great role in the development process can bring us a lot of convenience, help, efficiency and influence. Even a good editor can bring a greater sense of joy to daily programming.
- 🔥 “VSCode plug-in complete | VSCode senior players of the second book” — VSCode does not install plug-ins, is equivalent to a gun without accessories, hit the time or lack of accuracy, when shooting will have a very heavy recoil. Of course, you can code pretty well without plug-ins, but not as well.
- 🔥 8 HTML+CSS Tips to See on the Front End – CSS is a very unique language. It looks very simple, but a particular effect that looks simple is very difficult to implement. The purpose of this article is to share some new CSS tricks for kids on the front end, things that are not covered in front end tutorials and training classes. The second is to rekindle the love and enthusiasm for front end layout and special effects for those who are still in front end development. 🔥
- 🔥 7 Benefits of Learning to program for those of you who want to and are learning to program — Choosing to learn to program can be life-changing. Maybe a lot of people learn to program at first and sign up for a programming class in order to get a higher salary or a better working environment. Finally stick to stick to, we will find that programming will also bring us a lot of personal ability and skill improvement.
- 🔥 5 Rules to Be a Better Developer — This article teaches us 5 rules to be a better developer, how to stand out from the crowd, and how to help us in our tech careers.
This article is formatted using MDNICE