Guia Prático do VS Code: Habilidades Essenciais e Recomendações de Ferramentas para Desenvolvedores Eficientes

O Visual Studio Code (VS Code), como um editor de código gratuito, de código aberto e multiplataforma, é profundamente amado pela maioria dos desenvolvedores. Ele possui funcionalidades poderosas, um rico ecossistema de extensões e uma interface simples e fácil de usar. Este artigo irá combinar as discussões recentes no X/Twitter para resumir as habilidades práticas e recomendações de ferramentas do VS Code, ajudando você a aumentar a eficiência do desenvolvimento.

Qual é o charme do VS Code?

Nas discussões do X/Twitter, podemos ver o entusiasmo dos desenvolvedores pelo VS Code. @@freeCodeCamp mencionou repetidamente a popularidade e gratuidade do VS Code, enfatizando os ricos recursos que ele oferece. @@chomado compartilhou seu editor favorito e recomendou extensões para engenheiros front-end.

Em resumo, as principais vantagens do VS Code incluem:

• Gratuito e de código aberto: Qualquer pessoa pode usar gratuitamente e participar do desenvolvimento da comunidade.
• Multiplataforma: Suporta vários sistemas operacionais, como Windows, macOS, Linux, etc.
• Leve: Inicialização rápida, baixo consumo de recursos.
• Rico ecossistema de extensões: Ao instalar extensões, você pode aprimorar os recursos do VS Code para atender a várias necessidades de desenvolvimento.
• Ferramentas de depuração integradas: Suporta a depuração de várias linguagens de programação, facilitando aos desenvolvedores a localização e resolução rápida de problemas.
• Integração com Git: Facilita o controle de versão para os desenvolvedores.
• Sugestões inteligentes: Fornece preenchimento de código, verificação de sintaxe e outras funções para melhorar a eficiência da codificação.

Dicas práticas do VS Code: Aumente sua eficiência de desenvolvimento

1. Domine os atalhos de teclado: O VS Code oferece uma variedade de atalhos de teclado, e dominar esses atalhos pode melhorar muito a eficiência do desenvolvimento. Aqui estão alguns atalhos de teclado comuns:

   • Ctrl+Shift+P (Windows/Linux) / Cmd+Shift+P (macOS): Abre o painel de comandos. Esta é uma das principais funcionalidades do VS Code, e você pode executar várias operações através do painel de comandos.
   • Ctrl+P (Windows/Linux) / Cmd+P (macOS): Abre rapidamente um arquivo.
   • Ctrl+Shift+O (Windows/Linux) / Cmd+Shift+O (macOS): Vai rapidamente para um símbolo (função, classe, etc.).
   • Ctrl+Shift+F (Windows/Linux) / Cmd+Shift+F (macOS): Pesquisa global.
   • Ctrl+D (Windows/Linux) / Cmd+D (macOS): Seleciona a próxima correspondência. Você pode editar vários textos idênticos ao mesmo tempo.
   • Alt+Shift+Down/Up (Windows/Linux) / Option+Shift+Down/Up (macOS): Copia a linha atual para a linha seguinte/anterior.
   • Ctrl+/ (Windows/Linux) / Cmd+/ (macOS): Comenta/Descomenta a linha atual ou o bloco de código selecionado.
   • Alt+Up/Down (Windows/Linux) / Option+Up/Down (macOS): Move para cima e para baixo a linha atual ou o bloco de código selecionado.
   • Ctrl+K Ctrl+S: Abre a interface de configurações de atalhos de teclado, onde você pode visualizar e personalizar os atalhos.

2. Use bem o painel de comandos: Abra o painel de comandos através de Ctrl+Shift+P / Cmd+Shift+P para executar várias operações, por exemplo:

   • Settings: Abre a interface de configurações.
   • Extensions: Install Extension: Instala uma extensão.
   • Git: Commit: Confirma as alterações do Git.
   • Format Document: Formata o documento atual.
   • Go to Symbol in Workspace: Vai rapidamente para um símbolo dentro do espaço de trabalho.

3. Configurações personalizadas: O VS Code permite que os usuários personalizem várias configurações, incluindo temas, fontes, estilos de indentação, etc. Você pode abrir a interface de configurações através de File -> Preferences -> Settings ou editar diretamente o arquivo settings.json.

   • Tema: Escolher um tema que você goste pode melhorar o conforto da codificação.
   • Fonte: Escolher uma fonte adequada pode melhorar a legibilidade do código. Recomenda-se usar uma fonte monoespaçada, como Fira Code, JetBrains Mono, etc.
   • Estilo de indentação: Defina o estilo de indentação de acordo com as especificações do projeto. Você pode usar espaços ou a tecla Tab.
   • Salvamento automático: Ativar a função de salvamento automático pode evitar a perda de código devido ao esquecimento de salvar.

4. Utilizando trechos de código (Code Snippets): Trechos de código podem ajudá-lo a inserir rapidamente blocos de código usados com frequência. O VS Code possui alguns trechos de código comuns integrados e você também pode personalizar trechos de código.

   • Abra o painel de comandos, digite Preferences: Configure User Snippets, selecione a linguagem que você deseja editar e, em seguida, você pode editar os trechos de código.
   • Por exemplo, você pode criar um trecho de código clog para JavaScript para inserir rapidamente console.log():

   "Print to console": {
       "prefix": "clog",
       "body": [
           "console.log('$1');",
           "$2"
       ],
       "description": "Log output to console" // Saída de log para o console
   }
   

5. Usando edição com vários cursores: Mantenha pressionada a tecla Alt (Windows/Linux) / Option (macOS) e clique com o mouse para criar cursores em vários locais e editar várias linhas de código simultaneamente. Você também pode usar Ctrl+D / Cmd+D para selecionar a próxima correspondência e realizar a edição com vários cursores.

6. Dividindo o editor: Você pode dividir o editor em várias janelas para visualizar e editar vários arquivos simultaneamente. Você pode usar o comando View -> Editor Layout -> Split Editor para dividir o editor.

7. Desenvolvimento remoto: O VS Code fornece a extensão Remote Development, que permite editar o código em um servidor remoto localmente. Isso é muito útil para desenvolver aplicativos do lado do servidor.

8. Usando o VS Code no navegador: Como @@Prathkum apontou, acessando vscode.dev, você pode usar o VS Code diretamente no navegador, o que é conveniente e rápido. Isso é muito útil para edição temporária ou para trabalhar em dispositivos onde o VS Code não está instalado. O trabalho de @@CompuIves aprimorou ainda mais isso, pois ele conseguiu executar o VS Code diretamente no navegador e conectá-lo à API do CodeSandbox.

VS Code 工具推荐：打造你的专属 IDE

A força do VS Code reside em seu rico ecossistema de extensões. Aqui estão algumas extensões comumente recomendadas:

• Prettier: Ferramenta de formatação de código que pode formatar automaticamente o código e manter a consistência do estilo do código.

  ext install esbenp.prettier-vscode
  

• ESLint: Ferramenta de verificação de código JavaScript que pode verificar erros e problemas potenciais no código.

  ext install dbaeumer.vscode-eslint
  ```*   **EditorConfig for VS Code:** Ferramenta para manter a consistência do estilo de código entre diferentes editores. 
  
  ```shell
  ext install EditorConfig.EditorConfig
  

• Live Server: Inicia rapidamente um servidor local, facilitando a depuração do código front-end. @@ThreatSynop mencionou uma vulnerabilidade de segurança no Live Server, lembrando os desenvolvedores de prestar atenção à segurança ao usar a extensão.

  ext install ritwickdey.LiveServer
  

• Code Runner: Suporta a execução de várias linguagens de programação, facilitando o teste rápido de trechos de código. Da mesma forma, @@ThreatSynop também apontou uma vulnerabilidade de segurança no Code Runner.

  ext install formulahendry.code-runner
  

• GitLens: Extensão que aprimora as funcionalidades do Git, permitindo visualizar o histórico de commits, informações do autor, etc.

  ext install eamodio.gitlens
  

• Bracket Pair Colorizer: Colore os pares de parênteses, facilitando a visualização da estrutura do código.

  ext install CoenraadS.bracket-pair-colorizer-2
  

• IntelliCode: (Fornecido pela Microsoft) Preenchimento de código assistido por IA, que pode fornecer sugestões de código mais inteligentes com base no contexto.

  ext install visualstudioexptteam.vscodeintellicode
  

• VS Code Copilot: (Fornecido pelo GitHub, pago) Assistente de código de IA, que pode gerar trechos de código, funções e até mesmo arquivos inteiros com base no seu código. @@aadhilkh mencionou a alta relação custo-benefício de usar o VS Code Copilot.

• Markdown Preview Enhanced: Melhor plugin de visualização de Markdown. @@ThreatSynop também apontou que este plugin tem problemas de segurança e precisa ser observado.

  ext install shd101wyy.markdown-preview-enhanced
  

• Remote Development 扩展包: Inclui extensões como SSH, Containers, WSL, etc., facilitando o desenvolvimento remoto.

Sobre a Integração de LLM e VS Code

Também surgiram algumas discussões no X/Twitter sobre a integração de LLM e VS Code. @@akshay_pachaar compartilhou um método para treinar LLM no VS Code. @@MacopeninSUTABA mencionou a integração do agente de codificação AI "Claude Code" da Anthropic com o VS Code. Tudo isso prenuncia que a IA desempenhará um papel cada vez mais importante no desenvolvimento futuro.

Dicas de Segurança

Como mencionado por @@ThreatSynop, algumas extensões do VS Code têm vulnerabilidades de segurança que podem levar ao roubo de arquivos e à execução remota de código. Portanto, ao usar extensões, preste atenção aos seguintes pontos:

• Escolha extensões oficiais ou de boa reputação.
• Atualize as extensões regularmente.
• Leia atentamente as instruções de permissão da extensão.
• Instale ferramentas de verificação de código, como ESLint, que podem ajudá-lo a encontrar problemas potenciais em seu código.
• Preste atenção aos avisos de segurança do VS Code e das extensões e corrija as vulnerabilidades em tempo hábil.## Conclusão

O VS Code, como um poderoso editor de código, possui inúmeras dicas práticas e um rico ecossistema de extensões, que podem ajudar os desenvolvedores a melhorar a eficiência do desenvolvimento. Ao dominar atalhos de teclado, configurações personalizadas, usar snippets de código, instalar extensões adequadas, etc., você pode transformar o VS Code em seu IDE exclusivo. Ao mesmo tempo, preste atenção aos problemas de segurança, escolha extensões oficiais ou de boa reputação e atualize as extensões regularmente. Espero que este artigo tenha sido útil!