Se és um desenvolvedor ou programador, é provável que estejas sempre à procura de novas ferramentas para ajudar a simplificar o teu fluxo de trabalho. Tens sorte, pois um dos melhores editores de código que podes encontrar é o Visual Studio Code no Mac.
O Visual Studio Code (VS Code) oferece muitas funcionalidades para te ajudar a escrever código de forma mais eficiente. E neste artigo, aprenderás como instalar o VS Code no teu Mac e passar por algumas das melhores extensões e temas para começares.
Continua a ler e prepara-te para melhorar o teu fluxo de trabalho!
Pré-requisitos
Este tutorial será uma demonstração prática. Se quiseres acompanhar, certifica-te de que tens um dispositivo macOS. Este tutorial utiliza o Apple Silicon (M1), por isso os passos podem ser ligeiramente diferentes se tiveres um Mac com base em Intel.
Download do 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, terás de descarregar e instalar o VS Code no teu sistema.
1. Abre o teu navegador web favorito e dirige-te à página de descarregamento do VS Code.
2. Em seguida, clica em Apple Silicon sob o ícone do Mac para descarregar o instalador de pacotes do VS Code para Mac num ficheiro ZIP. Esta versão Apple Silicon (M1) é o mais recente chip desenvolvido pela Apple.
Se tiveres um Mac mais antigo com um processador Intel, clica em Chip Intel 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 modernos e em nuvem de forma mais eficaz.
Outra ótima característica do VS Code é que ele suporta diversas linguagens de programação por meio do uso de extensões que você pode encontrar no marketplace.
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ê deverá ter uma nova aplicação Visual Studio Code na sua pasta de Downloads.
2. Em seguida, execute o comando ls abaixo para verificar o arquivo do aplicativo. Este comando lista o conteúdo do arquivo de aplicativo do Visual Studio Code.
O símbolo \ é um caractere de escape que indica ao terminal 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 aviso abaixo.
Este aviso aparece porque você baixou o aplicativo da internet, o que você pode ignorar com segurança.
Depois de instalado, o aplicativo do VS Code é aberto e você será recebido com a página de Introdução 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 nos 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 e assim por diante.
Estas 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. Selecione um tema para o seu editor como preferir na página de Introdução, 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 possui sete seções principais. Mas comece com uma das seções mais importantes, o EXPLORADOR (Ctrl+Shift+E / Cmd+Shift+E).
O Explorador mostra os arquivos e pastas em seu projeto, onde você pode clonar um repositório. Além disso, o Explorador permite realizar diferentes ações da seguinte forma:
- Criar, excluir e renomear seus arquivos e pastas em seu projeto.
- Mover arquivos e pastas arrastando e soltando dentro da pasta do seu projeto.
Observe que “arrastar e soltar” funciona ao mover arquivos para o Explorador de fora do VS Code. Mas se o explorador estiver vazio, o VS Code abre o arquivo em seu editor em vez disso.
3. Clique no ícone de pesquisa (Ctrl+Shift+F / Cmd+Shift+F), que abre a seção PESQUISA, 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 Executar e Depurar (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 através de um 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 lançado através de 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 todas as funcionalidades 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. Uma vez adicionado, reinicie seu terminal para que as alterações tenham efeito. O comando code está agora disponível no 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. Esta extensão permite que você selecione os seletores de cor nativos do macOS ao trabalhar com arquivos CSS, HTML e JavaScript.
1. Navegue até o menu Extensões na Barra de Atividades, que tem 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 JavaScript recomendadas 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 (as extensões mais correspondentes primeiro).
Assim que você visualizar a extensão desejada, clique no botão Instalar ao lado da extensão. O botão Instalar muda para um botão Ativar verde, 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 a Paleta de Comandos (Cmd+Shift+P / Ctrl+Shift+P), digite Abrir Color Picker e pressione Enter. O painel do macOS Color Picker se abrirá, como mostrado abaixo.
Use o seletor de cores para escolher uma cor, que será inserida em seu código. Esta extensão é uma ótima maneira de obter rapidamente os valores de cor que você precisa sem precisar lembrar dos códigos hexadecimais.
Conclusão
Neste tutorial, você aprendeu como instalar o VS Code em 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 em seu próximo projeto.
Mas não pare por aqui! Com esse conhecimento recém-adquirido, que tal utilizar o controle de versão com Git e GitHub para acompanhar o seu trabalho?
Source:
https://adamtheautomator.com/visual-studio-code-on-mac/