Se você é um desenvolvedor ou programador, as chances são de que você está sempre procurando por novas ferramentas para ajudar a otimizar seu fluxo de trabalho. Sorte para você, um dos melhores editores de código que você pode encontrar é o Visual Studio Code no Mac.
O Visual Studio Code (VS Code) oferece muitos recursos para ajudá-lo a escrever código de forma mais eficiente. E neste artigo, você aprenderá como instalar o VS Code no seu Mac e explorar algumas das melhores extensões e temas para começar.
Continue lendo e prepare-se para melhorar seu fluxo de trabalho!
Pré-requisitos
Este tutorial será uma demonstração prática. Se você quiser acompanhar, certifique-se de ter um dispositivo macOS. Este tutorial usa Apple Silicon (M1), portanto, os passos podem ser ligeiramente diferentes se você tiver um Mac com processador Intel.
Baixando o Visual Studio Code para Mac
O Visual Studio Code (VS Code) é um editor de código gratuito e de código aberto da Microsoft, disponível para Windows, Linux e macOS. Mas, como outras ferramentas, você precisará baixar e instalar o VS Code no seu sistema.
1. Abra seu navegador da web favorito e acesse a página de download do VS Code.
2. Em seguida, clique em Apple Silicon sob o ícone do Mac para baixar o instalador do VS Code para Mac em um arquivo ZIP. Esta versão Apple Silicon (M1) é o chip mais recente desenvolvido pela Apple.
Se você tiver um Mac mais antigo com um processador Intel, clique em Intel Chip em vez disso.
3. Por último, abra o seu terminal e execute o seguinte comando ls para verificar o instalador de pacotes do VS Code que você baixou.
A saída abaixo mostra a localização do arquivo zip.
Instalando o Visual Studio Code no Mac
Agora que você baixou o instalador do VS Code, está pronto para instalar o VS Code no seu Mac e experimentar um editor de código redefinido. O VS Code é otimizado para que você possa construir e depurar aplicativos web e em nuvem modernos de forma mais eficaz.
Outra ótima característica do VS Code é que ele suporta várias linguagens de programação por meio do uso de extensões que você pode encontrar no mercado.
Para instalar o VS Code no Mac:
1. Selecione o arquivo zip do VS Code baixado → clique no ícone de reticências (canto superior direito) → Abrir para descompactar o arquivo ZIP.
Depois de descompactar, você deve ter uma nova aplicação Visual Studio Code na sua pasta Downloads.
2. Em seguida, execute o comando ls abaixo para verificar o arquivo do aplicativo. Este comando lista o conteúdo do arquivo do aplicativo Visual Studio Code.
O símbolo \ é um caractere de escape que diz ao terminal para tratar o espaço como um caractere regular. Você deve usar o caractere de escape quando houver um espaço no nome do arquivo.
3. Execute o comando open abaixo para iniciar o instalador em uma nova instância (-n).
4. Agora, clique em Abrir para continuar com a instalação quando receber o prompt abaixo.
Este aviso aparece porque você baixou o aplicativo da internet, o que você pode ignorar com segurança.
Após instalado, o aplicativo VS Code abre e você será recebido com a página Iniciar abaixo.
Navegando na GUI do VS Code
Você instalou com sucesso o VS Code no seu Mac, mas antes de começar a codificar, familiarize-se primeiro com a GUI e os recursos do VS Code.
O VS Code vem com muitos recursos que permitem que você:
- Escolha temas e altere a aparência do seu editor.
- Abra a pasta do seu projeto para que você possa ir rapidamente para frente e para trás entre seus arquivos e garantir que a estrutura do seu arquivo esteja correta.
- Adicione um sistema de controle de origem, como o Git.
- Rapidamente adicione extensões da loja de aplicativos e assim por diante.
Essas são apenas uma pequena parte do que o VS Code pode oferecer. Veja por si mesmo como cada recurso ajuda em seu fluxo de trabalho. Talvez mudar o tema seja um bom começo.
1. Escolha um tema para o seu editor na página Início, mantenha as outras configurações como estão e clique em Marcar Concluído (canto inferior esquerdo).
Se os temas Claro e Escuro não agradarem, clique em Ver Mais Temas e procure um que desperte seu interesse.
2. Em seguida, explore o lado mais à esquerda do VS Code, a Barra de Atividades, que tem sete seções principais. Mas comece com uma das seções mais importantes, o EXPLORADOR (Ctrl+Shift+E / Cmd+Shift+E).
O Explorer mostra os arquivos e pastas em seu projeto, onde você pode clonar um repositório. Além disso, o Explorer permite que você realize diferentes ações da seguinte forma:
- Criar, excluir e renomear seus arquivos e pastas no seu projeto.
- Mover arquivos e pastas arrastando e soltando dentro da sua pasta de projeto.
Observe que “arrastar e soltar” funciona ao mover arquivos para o Explorer de fora do VS Code. Mas se o explorer estiver vazio, o VS Code abre o arquivo no seu editor.
3. Clique no ícone de Pesquisa (Ctrl+Shift+F / Cmd+Shift+F), que abre a seção PESQUISAR, onde você pode pesquisar seu projeto por arquivos, símbolos e texto.
4. Agora, clique no ícone de Controle de Origem (Ctrl+Shift+G / Cmd+Shift+G) para abrir a seção CONTROLE DE ORIGEM, onde você pode gerenciar seu projeto com Git ou outro sistema de controle de origem.
O VS Code vem com gerenciamento de controle de origem integrado (SCM) com suporte Git incluído por padrão.
5. Após o SCM, clique no ícone de Execução e Depuração (Ctrl+Shift+D / Cmd+Shift+D), que abre a seção EXECUTAR E DEPURAR: EXECUTAR, onde você pode executar e depurar seu projeto.
6. Por último, clique no ícone de Extensões (Ctrl+Shift+X / Cmd+Shift+X) para acessar a seção EXTENSÕES, onde você pode instalar extensões do marketplace.
Iniciando o VS Code via Ambiente de Linha de Comando
Talvez você passe a maior parte do tempo em um ambiente de linha de comando, mas precise escrever algum código rapidamente. Se for o caso, configurar o VS Code para ser iniciado via um ambiente de linha de comando será favorável para você.
1. Pressione (Cmd+Shift+P ou Ctrl+Shift+P) no VS Code para abrir a Paleta de Comandos, onde você pode acessar toda a funcionalidade do VS Code.
2. Digite “Shell Command: Install ‘code’ command in PATH” na Paleta de Comandos e pressione Enter. Este comando adiciona o executável do VS Code à variável PATH do seu sistema.
3. Depois de adicionado, reinicie seu terminal para que as alterações tenham efeito. O comando code agora está disponível em seu terminal.
4. Agora, crie um arquivo de texto, adicione algum texto e salve e feche o arquivo.
5. Por fim, execute os seguintes comandos para abrir o VS Code (code), passando o caminho do arquivo de texto (text.txt), neste caso, do diretório de trabalho.
Você verá o VS Code (à direita) aberto com o conteúdo do seu arquivo text.txt exibido na janela do editor. Agora você pode editar este arquivo usando os ótimos recursos do VS Code.
Instalando Extensões para Funcionalidades Adicionais
Uma das melhores coisas sobre o VS Code é que ele é altamente personalizável. Como? Você pode instalar extensões para adicionar novas funcionalidades e muitas extensões diferentes estão disponíveis.
Talvez você queira instalar a extensão macOS Color Picker. Essa extensão permite selecionar seletores de cores nativos do macOS ao trabalhar com arquivos CSS, HTML e JavaScript.
1. Navegue até o menu Extensões na Barra de Atividades, que possui três seções:
- INSTALADO – Esta seção mostra as extensões já instaladas.
- RECOMENDADO – Esta seção mostra extensões recomendadas com base no tipo de arquivo aberto. Por exemplo, você verá extensões recomendadas para JavaScript se estiver trabalhando com um arquivo JavaScript.
- POPULAR – Esta seção mostra as extensões mais populares do VS Code.
2. Digite “macOS Color Picker” na caixa de pesquisa e pressione Enter. Uma lista de extensões correspondentes será exibida em ordem decrescente (extensões mais correspondentes primeiro).
Ao encontrar a extensão desejada, clique no botão “Instalar” ao lado da extensão. O botão de instalação muda para um botão verde “Habilitar”, então clique nele para ativar a extensão.
Após instalar a extensão, uma página de visão geral para a extensão será exibida à direita, como mostrado abaixo.
3. Agora abra um arquivo CSS, HTML ou JavaScript para testar a nova extensão macOS Color Picker.
4. Por fim, abra o Painel de Comandos (Cmd+Shift+P / Ctrl+Shift+P), digite “Abrir Seletor de Cores” e pressione Enter. O painel do macOS Color Picker se abrirá, conforme mostrado abaixo.
Use o seletor de cores para escolher uma cor, que será inserida no seu código. Esta extensão é uma ótima maneira de obter rapidamente os valores de cor de que você precisa sem precisar lembrar dos códigos hexadecimais.
Conclusão
Neste tutorial, você aprendeu como instalar o VS Code no seu Mac e extensões para adicionar mais funcionalidades, tornando a escrita de códigos mais agradável. Neste ponto, você pode aproveitar ao máximo o que o VS Code oferece ao trabalhar no seu próximo projeto.
Mas não pare por aqui! Com esse conhecimento recém-adquirido, que tal usar o controle de versão com Git e GitHub para acompanhar o seu trabalho?
Source:
https://adamtheautomator.com/visual-studio-code-on-mac/