O Visual Studio Code (doravante referido como VS Code) é uma ferramenta poderosa, mas infelizmente muitas pessoas não encontraram a maneira correta de abri-lo. Hoje, vou te ensinar 3 dicas fáceis de usar e fáceis de aprender para fazer seu VS Code usar sem problemas!
Link original: https://medium.com/fractions/3-visual-studio-code-tips-to-boost-your-workflow-b107ec573d75
Isenção de responsabilidade: Este artigo foi traduzido pela CSDN, indique a fonte ao reimprimir.
Segue a tradução:
Contanto que você saiba como usar o VS Code, é uma ferramenta para todos os fins.
Com o tempo, o VS Code ficou melhor e mais recursos foram adicionados. No entanto, esses recursos geralmente estão ocultos nas configurações JSON do VS Code, e a maioria dos novatos não conseguirá encontrá-los. Hoje, vou compartilhar com você 3 dicas incomuns que podem ajudá-lo a melhorar sua eficiência de desenvolvimento.
1. Existem muitas configurações no diretório raiz, o que devo fazer?
Arquivos de configuração, também conhecidos como dotfiles, são parte integrante do desenvolvimento porque não é mais 2000 e ninguém mais usa HTML, CSS e JavaScript simples. Agora temos ferramentas para fazer quase tudo, há transpiladores, compiladores, binders, compiladores, embelezadores... Felizmente, podemos configurá-los com arquivos de configuração de acordo com as necessidades do projeto.
No entanto, ter dezenas de arquivos de configuração no diretório raiz pode levar a uma bagunça. Por mais incríveis que sejam essas ferramentas personalizáveis, depois de configurá-las uma vez, nunca as abro, a menos que haja algo no projeto que não posso prever. Então, por que eu tenho que encontrar minha pasta pessoal nessa bagunça de pastas todas as vezes?
Felizmente, o VS Code possui um recurso de configuração experimental chamado fileNesting. Ele permite que os desenvolvedores aninhem visualmente arquivos em outros e limpem o espaço de trabalho. O bom é que não atrapalha a estrutura do arquivo, e todas as ferramentas pré-configuradas continuam funcionando sem nenhum esforço extra.
Para este projeto, colocarei todos os meus arquivos de configuração no arquivo package.json e o changelog e a licença sob o README.md.
Com esta configuração, posso finalmente encontrar o que quero à primeira vista e, se precisar editar qualquer arquivo de configuração, posso expandir uma pasta como package.json e editar os arquivos nela.
Para este truque, você precisa adicionar três entradas ao setting.json. Pressione Ctrl ou Cmd + Shift + P para abri-lo e escreva "settings.json". Em seguida, adicione essas entradas ao final.
"explorer.experimental.fileNesting.enabled": true,
"explorer.experimental.fileNesting.expand": false,
"explorer.experimental.fileNesting.patterns": {
// Append as many as you want
// The keys are the parents and the values are the nested files.
"package.json": ".gitignore, .parcelrc, .prettierc ...",
"README.md": "CHANGELOG.md, LICENCE"
}
É isso! Chega de raízes bagunçadas, todas fáceis de encontrar. Não se esqueça de revisar e iniciar o projeto do qual tirei uma captura de tela para confirmar que a estrutura do arquivo não mudou.
2. Nenhuma extensão necessária
A extensão é incrível! Eles são a principal razão pela qual o VS Code é poderoso. O número dessas extensões está crescendo devido à enorme comunidade por trás delas. No entanto, esse volume nem sempre é uma coisa boa, pois quanto mais extensões você adiciona, mais tempo o VS Code demora para carregar. Depois de um certo ponto, levará mais de 6 a 7 segundos, se você estiver disposto a esperar tanto, por que não usar um IDE?
Além disso, no dimensionamento, pode haver alguns problemas de segurança e desempenho que podem levar a resultados que você pode' nem imagino.
Aqui está meu conselho: se a extensão não for tão importante para sua estação de trabalho, não a instale. Em vez disso, dê uma olhada na documentação do VS Code e tente encontrar uma maneira nativa. Como eu disse antes, use as configurações. Você pode fazer muito com o VS Code. Abaixo está uma alternativa ao settings.json com uma pequena lista de extensões e suas configurações.
Double Quote Colorize
Este é um método muito útil que tenho usado por um longo tempo. Mas agora está implementado nativamente no VS Code, não na extensão, e estou usando a extensão nativa expressa.
Para ativá-lo, abra settings.json e adicione o seguinte:
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs":"active",
Auto-Import
Auto-Import é outra extensão amplamente utilizada, até 2M+ arquivos de download. Mas por que manter seu espaço de trabalho ocupado quando você não precisa dele?
Aqui está a mesma funcionalidade implementada pelos desenvolvedores do VS Code. Adicione este código ao settings.json.
"javascript.suggest.autoImports": true,
"javascript.updateImportsOnFileMove.enabled": "always",
"typescript.suggest.autoImports": true,
"typescript.updateImportsOnFileMove.enabled": "always"
Fechamento automático e renomeação de tags HTML
Essas extensões foram as primeiras que instalei no meu sistema, mas agora desapareceram porque agora o VS Code pode fazer isso automaticamente com estas configurações:
"editor.linkedEditing": true,
"html.autoClosingTags": true,
"javascript.autoClosingTags": true,
"typescript.autoClosingTags": true,
Doxygen Documentation Generator
Esta é outra extensão que é muito útil na hora de documentar seu código, e por isso, o VS code decidiu implementá-la por conta própria. Ainda assim, mais de 6 milhões de usuários têm a extensão instalada em suas estações de trabalho.
Isso é ativado por padrão, mas se não, você pode adicionar o seguinte settings.json:
"javascript.suggest.completeJSDocs": true,
"javascript.suggest.jsdoc.generateReturns": true,
"typescript.suggest.completeJSDocs": true,
"typescript.suggest.jsdoc.generateReturns": true,
Com mais frequência, as pessoas ainda usam extensões externas, embora possam fazê-lo nativamente. Se você tiver alguma sugestão, não se esqueça de compartilhá-la na seção de respostas.
3. Renomeie agora
É uma merda quando você tem que mudar o nome de uma função ou variável em toda a sua base de código porque você não pode usar o bom e velho find & replace para substituí-lo. O nome da variável pode estar em uma string, ou mesmo em outro nome de função, e alterá-lo quebrará tudo.
Felizmente, o VS Code é mais inteligente do que você imagina. Isso facilita distinguir quais caracteres são nomes de variáveis esperados e alterar apenas os nomes de variáveis.
Para fazer isso, você deve selecionar a variável que precisa ser renomeada e pressionar F2. Em seguida, insira o novo nome da variável e pressione Enter. Voilá! Nada foi quebrado e o nome da variável mudou imediatamente.
Em conclusão
Parabéns! Agora você conhece as 3 dicas do VS Code que uso para acelerar meu ambiente de desenvolvimento. Em suma, o VS Code é uma ferramenta poderosa e faz o que deve ser – e muito mais. No entanto, mesmo ter a melhor ferramenta do mundo não vai te ajudar se você não souber usá-la.