Artigo original: How to Sync VS Code Settings Between Multiple Devices and Environments
Desenvolvedores gostam que seu editor esteja de determinada maneira. Pode ser difícil garantir que todos os ambientes tenham a mesma configuração. Como garantir que a configuração do VS Code seja a mesma onde quer que você o utilize?
- O que é o VS Code?
- O que usaremos?
- Como funciona?
- Etapa 1: instalar o Settings Sync
- Etapa 2: autorizar o acesso ao GitHub
- Etapa 3: fazer o upload das configurações atuais
- Etapa 4: sincronizar as configurações com outro ambiente
- Etapa 5: atualizar a configuração
O que é o VS Code?
O Visual Studio Code, ou VS Code, é um editor de código que recebe todos os recursos que você deseja ao trabalhar com código e as colocar em um único lugar, deixando você extremamente produtivo.
Ele já é considerado "o cara legal da sua rua" há algum tempo, aumentando cada vez mais em termos de popularidade entre a comunidade do JavaScript. A Microsoft esforçou-se bastante em torná-lo algo que as pessoas desejassem utilizar (e fizeram um ótimo trabalho).
O que usaremos?
Usaremos uma extensão do VS Code chamada Settings Sync (sincronização de configurações) que faz uso do recurso chamado Gist do GitHub para armazenar um arquivo de configuração JSON privado na nuvem.
Como funciona?
A extensão usa o OAuth do GitHub para fazer login em sua conta do GitHub. Depois da aprovação, o VS Code obtém um token de acesso, busca a loja e faz o download do seu arquivo de configurações para um Gist privado do GitHub.
Depois de preparada, você pode configurar a extensão em qualquer instância do VS Code e fazer o download imediato de sua configuração para sincronizar seu editor.
Etapa 0: VS Code
Assumiremos para este tutorial que você já tem o VS Code instalado. Embora você não precise ter qualquer configuração especial, ter algo diferente da configuração padrão (como, por exemplo, um tema de cores) ajudará você a ver o processo em funcionamento.
Vamos começar!
Etapa 1: instalar o Settings Sync
A primeira coisa que precisamos fazer é instalar a extensão. É possível fazer isso de algumas maneiras diferentes — você pode visitar a página da web e apertar Install, o que abrirá o VS Code, ou você poderá procurar pela extensão no próprio painel de Extensões.
Uma vez instalada, ela abrirá uma nova guia com o painel do Settings Sync.
Etapa 2: autorizar o acesso ao GitHub
Para começar com o GitHub, clique no botão Login with GitHub, no painel do Settings Sync.
Isso abrirá o GitHub no seu navegador padrão e solicitará o seu login. Embora você possa usar a conta do GitHub que quiser, fará mais sentido se você usar sua conta pessoal.
Depois do login realizado, você verá uma mensagem de sucesso em seu navegador.
Etapa 3: fazer o upload das configurações atuais
Agora que você está conectado ao GitHub, está pronto para fazer o upload de suas configurações.
Abra a Paleta de comandos com Ctrl+Shift+P (ou CMD+Shift+P no Mac) ou navegue até Ver e Paleta de Comandos. Digite "Sync Upload", o que filtrará os comandos e aperte Enter quando a opção Sync: Update/Upload Settings estiver selecionada.
Ao fazer isso, uma tela perguntará a você se você deseja fazer o upload forçado — pressione Yes.
Nesse ponto, o Settings Sync criará um Gist em sua conta no GitHub com suas definições de configuração. Quando ele terminar, você verá uma mensagem de sucesso.
Agora, você poderá visitar gist.github.com e encontrará um novo Gist privado, chamado cloudSettings, que inclui todas as suas configurações do VS Code!
Etapa 4: sincronizar as configurações com outro ambiente
Para sincronizar a configuração do VS Code com outro computador ou ambiente do VS Code, primeiro, siga as etapas 1 e 2 acima — instalando a extensão e fazendo login no GitHub.
A diferença, desta vez, será configurar o VS Code para fazer o download de suas configurações em vez de fazer o upload delas.
Para começar, primeiro, abra o painel do Sync Settings. Se essa é uma nova instalação, como imaginamos que seja, basta abrir a Paleta de Comandos e digitar "sync download" e apertar Enter. Isso abrirá o painel do Settings Sync. Nele, clique em Edit Configuration desta vez.
Nessa tela, você deverá ver seu token de acesso do GitHub, mas também deverá ver um campo vazio para o Gist ID. Aqui, primeiro queremos obter o ID de nosso URL do Gist, chamado cloudSettings:
Em seguida, colamos esse valor na entrada Gist ID no VS Code.
Depois de ter feito isso, abra a Paleta de Comandos novamente, digite "sync download", e pressione Enter. O Settings Sync buscará sua configuração do VS Code no Gist e atualizará suas configurações locais!
Etapa 5: atualizar sua configuração
A partir daqui, sempre que quiser fazer uma nova mudança na configuração armazenada, use os recursos Update/Upload e Download do modo como usamos anteriormente.
Para atualizar outro ajuste na configuração, digite "sync update" e pressione Enter:
Para fazer o download de sua configuração para sincronizar outro editor, digite "sync download" e pressione Enter:
Esses comandos atualizarão seu Gist cloudSettings e farão o download das configurações que estão nele para sincronizar suas instâncias do VS Code.
Qual é o seu truque favorito no VS Code?
Compartilhe-o com o autor no Twitter!
Participe do papo
If you’re like me you like your @code settings a very specific way incl your theme and extensions 👨💻
— Colby Fayock (@colbyfayock) June 16, 2020
But if you juggle diff environments, it can be a pain to update all of them 🤷♂️
Here’s how to sync your VS Code settings for all the things 🔥#webdevhttps://t.co/RRjwiU8Sul
