O ambiente de trabalho do Visual Studio Code, conhecido como Workspace, é essencialmente uma coleção de arquivos que se encontram abertos dentro de uma única janela. Este espaço pode corresponder a uma simples pasta ou, em cenários mais complexos, integrar diversos arquivos em um fluxo de trabalho de desenvolvimento conhecido como espaços de trabalho multi-raiz. Se você necessita abrir múltiplos arquivos durante o desenvolvimento de um projeto, o recurso Workspace é extremamente útil. Ele permite que você acesse todos os documentos necessários de forma centralizada, dentro da mesma janela. O arquivo .code-workspace é o responsável por armazenar as configurações da pasta do projeto. Uma vez que configurado, o Workspace abrirá automaticamente todos os arquivos desejados na mesma janela. Este método é muito mais rápido e prático do que a criação de scripts de shell para o mesmo fim. Vamos explorar como configurar seu próprio Workspace no VS Code.
Criação de um Novo Workspace no VS Code
O seu Workspace usualmente é uma cópia local do código base do projeto, na qual você pode testar e desenvolver o seu código. Na maioria dos casos, ele é criado automaticamente quando você abre uma pasta no VS Code. No entanto, você pode necessitar criar múltiplos arquivos para acompanhar as diferentes alterações feitas em distintas ramificações do projeto. Veja como consolidar todos esses arquivos em um único Workspace do VS Code.
- Selecione as pastas que deseja incluir no seu Workspace.
- Adicione essas pastas ao Workspace através do menu “Arquivo”, selecionando “Adicionar pasta ao espaço de trabalho”.
- Após configurar seu Workspace, salve-o acessando “Arquivo” e depois “Salvar espaço de trabalho como”.
Seu novo Workspace está criado no VS Code e terá um nome semelhante a (Nome).code-workspace.
Personalizando as Configurações do Workspace
As configurações do Workspace substituem as configurações padrão e podem ser personalizadas de acordo com suas preferências. Elas são armazenadas em arquivos JSON e sua localização varia de acordo com a forma como você abre a sua pasta.
Configurações em Workspace de Pasta Única
Ao abrir uma pasta como um Workspace, as configurações específicas serão armazenadas em um arquivo denominado .vscode/settings.json.
Configurações em Workspace Multi-Raiz
Se a pasta que você abrir for um arquivo .code-workspace, todas as configurações do Workspace serão adicionadas diretamente a esse arquivo .code-workspace.
Você ainda poderá personalizar configurações por pasta raiz, mas essas configurações específicas sobrescreverão aquelas definidas no arquivo .code-workspace.
Configurações e Tarefas de Inicialização do Workspace
Assim como as configurações, tarefas e lançamentos podem ser customizados para se adequar ao seu Workspace. Se você abrir uma pasta como um arquivo .code-workspace ou um Workspace, as localizações das configurações de tarefas e inicialização estarão no arquivo .vsh ou .workspace, dependendo do tipo de Workspace. Essas configurações podem ser ajustadas também diretamente a partir da pasta.
Otimizando seu Workspace no VS Code
Com suporte nativo para diversas linguagens de programação, como TypeScript, Javascript e Node JS, o Workspace é uma ferramenta essencial para desenvolvedores. As seguintes dicas tornarão a plataforma mais eficiente e fácil de usar.
Terminais
Você pode estar utilizando o terminal padrão do seu sistema operacional. Com o VS Code, a ideia é que você não precise depender tanto dos recursos do sistema operacional. O VS Code possui um terminal integrado com todas as funcionalidades necessárias em um só lugar. É uma excelente forma de acompanhar seus projetos de desenvolvimento e garantir que eles funcionem corretamente. A capacidade de renomear ou mudar a cor do ícone facilita a diferenciação entre os vários terminais do seu projeto.
Agrupando Abas
Este recurso é útil para desenvolvedores que trabalham em grandes projetos, com diversos componentes. Acompanhar todos os arquivos ao alternar entre os componentes pode ser desafiador. No VS Code, as abas aparecem na barra superior, e é necessário rolar para visualizá-las. Uma forma mais eficaz de gerenciar isso é agrupar as abas utilizando o comando “Envolver guias” acessível através do atalho Cmd + e pesquisando pelo comando. Isso facilitará a visualização e o acesso às diferentes guias.
Fixando Abas
Como desenvolvedor, é importante manter o seu ambiente de trabalho o mais organizado possível. Você pode fixar as abas que usa com mais frequência na parte superior da tela. Para personalizar a aparência dessas abas, você pode usar o atalho Cmd + ou Ctrl + e procurar por “Fixar aba”.
Interface do Usuário
A interface do seu terminal é configurada para exibir várias opções, como o explorador de arquivos, a pesquisa, o gerenciador de projetos e a seção de saída. Há também uma área similar a um rodapé, onde você pode encontrar e modificar detalhes diversos. No VS Code, é possível arrastar e soltar essas abas, reorganizando-as de acordo com as suas preferências. Você pode colocar as opções que usa com mais frequência no topo ou customizar o layout para facilitar o acesso. A personalização da interface do usuário melhora a navegação dentro do Workspace.
Linguagem
Ao criar um novo arquivo no Visual Studio Code, ele é criado sem nome e é necessário preencher os detalhes manualmente. Você também teria que digitar a extensão do arquivo. Esse processo pode ser trabalhoso, especialmente ao lidar com um grande número de arquivos. Para otimizar este processo, permita que o IDE analise os arquivos. Ele utilizará o sistema de nomenclatura anterior para atribuir nomes aos novos arquivos que você criar.
Visualização
O VS Code possui algumas características que podem gerar certa frustração. Por exemplo, se você abrir um arquivo em pré-visualização e abrir outro imediatamente sem fazer alterações no primeiro, o programa fechará o primeiro arquivo. Se você quiser mudar esse comportamento e manter os dois arquivos abertos na visualização, acesse as Configurações e pesquise por “Ativar visualização”. Marque a caixa de seleção para implementar as mudanças.
Configuração em um Novo PC
Você pode ter gasto tempo personalizando o seu Workspace no VS Code para deixá-lo de acordo com o seu gosto, e então você adquire um novo PC. Apesar de uma nova máquina ser excelente, ter que configurar o seu ambiente de trabalho novamente pode ser frustrante. O recurso de sincronização permite que você salve todas as suas configurações em um só lugar. Ao utilizar outro dispositivo, o VS Code aplicará automaticamente as configurações do antigo Workspace, eliminando a necessidade de reconfigurar o ambiente de trabalho no seu novo PC.
Open Replay
Depurar uma aplicação Web em produção pode ser um desafio demorado. Com o OpenReplay, você pode monitorar e reproduzir tudo que seus usuários fazem, o que permite analisar como a aplicação se comporta e identificar problemas que possam surgir. OpenReplay é uma alternativa gratuita e de código aberto a outros aplicativos de depuração, como LogRocket e FullStory. Utilizar um programa de depuração economiza bastante tempo ao trabalhar com o Workspace.
GitHub
O VS Code possui integração nativa com o GitHub. Isso permite que você envie seus arquivos para o GitHub de forma rápida. Ao conectar-se ao GitHub a partir do VS Code, você não precisa perder tempo digitando comandos git. A integração do VS Code simplifica a manutenção dos seus arquivos.
Centralizando Todas as Suas Pastas
O Workspace facilita a organização da sua equipe. Arquivos e pastas podem ser armazenados em um único local, o que permite que sejam abertos e visualizados com um simples clique. O Workspace também pode ser otimizado para melhorar a eficiência e ajudar no acompanhamento de projetos em andamento. Com este guia, você está preparado para criar um Workspace no VS Code e personalizá-lo de acordo com suas necessidades.
Você já configurou um novo Workspace no VS Code? Conte-nos como você criou e otimizou o seu Workspace nos comentários abaixo!