Como configurar o VSCode para organizar os imports e indentar o código ao salvar o arquivo.

Como configurar o VSCode para organizar os imports e indentar o código ao salvar o arquivo.Wilson GodoiFollow3 min read·Oct 28, 2019 --

Share

Neste post trago duas dicas para quem trabalha com o Visual Studio Code.

Primeiramente gostaria de falar sobre a organização dos imports. Muitas vezes, nós, desenvolvedores de software, esquecemos ou não sabemos exatamente como organizar os imports no nosso

código.

Como sabemos, os imports desnecessários ficam com uma cor um pouco mais clara para “avisar” o desenvolvedor que aquele import não está sendo utilizado, além disso uma boa organização

facilita principalmente quando a lista de imports aumenta.

Imports desnecessários e mal organizados. Muitas vezes pode ser extremamente conveniente que ao salvar o arquivo, os imports sejam devidamente organizados e os desnecessários sejam 

removidos.

Vamos então configurar o VSCode.

Clique em File > Preferences > Settings

Agora clique no icone “Open Settings (JSON) no canto superior direito.

Assim, abriremos o arquivo no formato JSON para inserirmos a configuração necessária. Agora é só inserir a seguinte configuração como destacado na imagem abaixo:

“editor.codeActionsOnSave”: {“source.organizeImports”: true}, Pronto. Retornemos ao arquivo da primeira imagem deste post para ver o VSCode realizando o trabalho de organização dos imports

para nós.

Abaixo temos o resultado após salvar o arquivo.

Repare que o VSCode removeu os imports desnecessários e os organizou em ordem alfabética pelo caminho dos arquivos. Muito bacana, né?! Dessa forma não correremos mais o risco de esquecer de

organizar e remover os imports desnecessários de nossa aplicação.

Agora vamos para a segunda dica: configurar o VSCode para indentar o código ao salvar o arquivo.

Exemplo de código não indentado Para configurar o VSCode para indentar o código automaticamente ao salvar o arquivo insira essa configuração no mesmo arquivo settings.json:

“editor.formatOnSave”: true, Pronto, agora o nosso editor está configurado para indentar o código ao salvar o arquivo.

Imports organizados e código indentado após salvar o arquivo. Terminamos por aqui! Espero que essas dicas sejam úteis. Acompanhe um pouquinho mais no meu Twitter.

Até breve!