Basic Editing

Visual Studio Code é um editor acima de tudo, e inclui os recursos que você precisa para a edição de código fonte altamente produtiva. Este tópico leva-o através do básico do editor e ajuda-o a mover-se com o seu código.

A atalhos de teclado

Ser capaz de manter as suas mãos no teclado quando escreve código é crucial para uma alta produtividade. O VS Code tem um rico conjunto de atalhos de teclado padrão, além de permitir que você os personalize.

• Referência de Atalhos de Teclado – Aprenda os atalhos de teclado mais usados e populares baixando a folha de referência.
• Instalar uma extensão Keymap – Use os atalhos de teclado do seu antigo editor (como Texto Sublime, Atom, e Vim) em Código VS instalando uma extensão Keymap.
• Personalizar Atalhos de Teclado – Altere os atalhos de teclado padrão para caber no seu estilo.

Seleções múltiplas (multi-cursor)

Código VS suporta vários cursores para edições simultâneas rápidas. Você pode adicionar cursores secundários (renderizados mais finos) com Alt+Click. Cada cursor opera independentemente com base no contexto em que se encontra. Uma maneira comum de adicionar mais cursores é com ⌥⌘↓ (Windows Ctrl+Alt+Down, Linux Shift+Alt+Down) ou ⌥⌘ (Windows Ctrl+Alt+Up, Linux Shift+Alt+Up) que inserem os cursores abaixo ou acima.

Nota: O driver da sua placa gráfica (por exemplo NVIDIA) pode sobrescrever estes atalhos padrão.

⌘D (Windows, Linux Ctrl+D) seleciona a palavra no cursor, ou a próxima ocorrência da seleção atual.

Tip: Você também pode adicionar mais cursores com ⇧⌘L (Windows, Linux Ctrl+Shift+L), que adicionará uma seleção a cada ocorrência do texto selecionado atual.

Multi-cursor modificador

Se quiser alterar a chave modificadora para aplicar múltiplos cursores a Cmd+Click em macOS e Ctrl+Click em Windows e Linux, pode fazê-lo com a configuração editor.multiCursorModifier. Isso permite que usuários vindos de outros editores como Texto Sublime ou Atom continuem a usar o modificador de teclado com o qual estão familiarizados.

A configuração pode ser definida para:

• ctrlCmd – Mapas para Ctrl no Windows e Cmd no macOS.
• alt – O Alt padrão existente.

Há também um item de menu Use Ctrl+Click for Multi-Cursor no menu Selection para alternar rapidamente esta configuração.

Os gestos Go To Definition e Open Link também respeitarão esta configuração e se adaptarão de forma a não entrarem em conflito. Por exemplo, quando a configuração é ctrlCmd, múltiplos cursores podem ser adicionados com Ctrl/Cmd+Click, e abrir links ou ir para definição pode ser invocado com Alt+Click.

Selecção de encolher/expandir

Encolher rapidamente ou expandir a selecção actual. Acione com ⌃⇧⌘← (Windows, Linux Shift+Alt+Left) e ⌃⇧⌘→ (Windows, Linux Shift+Alt+Right).

Aqui está um exemplo de expansão da seleção com ⌃⇧⌘→ (Windows, Linux Shift+Alt+Right):

Seleção de coluna (caixa)

Colocar o cursor em um canto e depois segurar Shift+Alt enquanto se arrasta para o canto oposto:

Nota: Isto muda para Shift+Ctrl/Cmd quando se usa Ctrl/Cmd como modificador multi-cursor.

Tambem existem ligações padrão para seleção de colunas no MacOS e Windows, mas não no Linux.

Key	Command	Command ID
⇧⌥⌘↓ (Windows Ctrl+Shift+Alt+Down, Linux )	Coluna Select Down	cursorColumnSelectDown
⇧⌥⌘ (Windows Ctrl+Shift+Alt+Up, Linux )	Column Select Up	cursorColumnSelectUp
⇧⌥⌘← (Windows Ctrl+Shift+Alt+Left, Linux )	Coluna Selecione Esquerda	cursorColumnSelectLeft
⇧⌥⌘→ (Windows Ctrl+Shift+Alt+Right, Linux )	Coluna Selecione à Direita	cursorColumnSelectRight
⇧⌥⌘PageDown (Windows Ctrl+Shift+Alt+PageDown, Linux )	Coluna Select Page Down	cursorColumnSelectPageDown
⇧⌥⌘PageUp (Windows Ctrl+Shift+Alt+PageUp, Linux )	Coluna Seleccionar página para cima	cursorColumnSelectPageUp

Pode editar o seu keybindings.json para os ligar a algo mais familiar, se desejar.

Selecção de colunas

O editor de definições do utilizador: A selecção de colunas controla esta funcionalidade. Uma vez introduzido este modo, como indicado na barra de estado, os gestos do rato e as teclas de seta irão criar uma selecção de coluna por defeito. Esta comutação global também é acessível através do item de menu Seleção > Modo de Seleção de Colunas. Além disso, pode-se também desativar o modo Seleção de Colunas na barra de Status.

Salvar / Salvar Automático

Por padrão, o Código VS requer uma ação explícita para salvar suas alterações no disco, ⌘S (Windows, Linux Ctrl+S).

No entanto, é fácil ligar Auto Save, o que salvará suas alterações após um atraso configurado ou quando o foco sair do editor. Com esta opção ativada, não há necessidade de salvar o arquivo explicitamente. A maneira mais fácil de ligar Auto Save é com a opção File > Auto Save toggle que liga e desliga o salvamento após um atraso.

Para mais controle sobre Auto Save, abra as configurações User ou Workspace e encontre as configurações associadas:

• files.autoSave: Pode ter os valores:
  • off – para desativar o auto save.
  • afterDelay – para salvar arquivos após um atraso configurado (padrão de 1000 ms).
  • onFocusChange – para salvar arquivos quando o foco sair do editor do arquivo sujo.
  • onWindowChange – para salvar arquivos quando o foco sair da janela de código VS.
• files.autoSaveDelay: Configura o atraso em milissegundos quando files.autoSave é configurado para afterDelay. O padrão é 1000 ms.

Hot Exit

VS Code lembrará as alterações não salvas nos arquivos quando você sair por padrão. Hot exit é acionado quando a aplicação é fechada via Arquivo > Sair (Código > Sair em macOS) ou quando a última janela é fechada.

Você pode configurar hot exit configurando files.hotExit para os seguintes valores:

• "off": Disable hot exit.
• "onExit": Hot exit será acionado quando a aplicação for fechada, ou seja, quando a última janela for fechada no Windows/Linux ou quando o comando workbench.action.quit for acionado (a partir da paleta de comandos, atalho de teclado ou menu). Todas as janelas sem pastas abertas serão restauradas no próximo lançamento.
• "onExitAndWindowClose": Hot exit será acionada quando a aplicação for fechada, isto é, quando a última janela for fechada no Windows/Linux ou quando o comando workbench.action.quit for acionado (a partir da Paleta de Comandos, atalho de teclado ou menu), e também para qualquer janela com uma pasta aberta, independentemente de ser a última janela. Todas as janelas sem pastas abertas serão restauradas no próximo lançamento. Para restaurar as janelas de pastas como estavam antes do desligamento, defina window.restoreWindows para all.

Se acontecer algo de errado com a hot exit, todos os backups serão armazenados nas seguintes pastas para locais de instalação padrão:

• Windows %APPDATA%\Code\Backups
• macOS $HOME/Library/Application Support/Code/Backups
• Linux $HOME/.config/Code/Backups

Encontrar e Substituir

Código VS permite encontrar rapidamente o texto e substitui-lo no ficheiro actualmente aberto. Prima ⌘F (Windows, Linux Ctrl+F) para abrir o Widget de procura no editor, os resultados da procura serão realçados no editor, na régua de síntese e no minimap.

Se existir mais do que um resultado correspondente no ficheiro actualmente aberto, pode premir Enter e ⇧Enter (Windows, Linux Shift+Enter) para navegar para o resultado seguinte ou anterior quando a caixa de entrada de procura estiver focada.

Seed Search String From Selection

Quando o Widget de busca é aberto, ele irá preencher automaticamente o texto selecionado no editor para a caixa de entrada de busca. Se a seleção estiver vazia, a palavra sob o cursor será inserida na caixa de entrada em vez disso.

Esta função pode ser desligada definindo editor.find.seedSearchStringFromSelection para false.

Find In Selection

Por padrão, as operações de busca são executadas em todo o arquivo no editor. Também pode ser executado sobre o texto selecionado. Você pode ativar este recurso clicando no ícone do hambúrguer no arquivo Find Widget.

Se você quiser que seja o comportamento padrão do Find Widget, você pode definir editor.find.autoFindInSelection para always, ou para multiline, se você quiser que ele seja executado em um texto selecionado somente quando múltiplas linhas de conteúdo forem selecionadas.

Advanced find and replace options

Além de encontrar e substituir por texto simples, o Find Widget também tem três opções avançadas de busca:

• Match Case
• Match Whole Word
• Expressão Regular

A caixa de suporte de caixa de entrada de reposição preservada, você pode ativá-la clicando no botão Preserve Case (AB).

Suporte multi-linha e redimensionamento da caixa de entrada Find Widget

Pode procurar texto de múltiplas linhas colando o texto na caixa de entrada Find e substitua a caixa de entrada Replace. Pressionando Ctrl+Enter insere uma nova linha na caixa de entrada.

Enquanto procura texto longo, o tamanho padrão do Find Widget pode ser muito pequeno. Você pode arrastar a faixa da esquerda para aumentar o Widget de busca ou clicar duas vezes na faixa da esquerda para maximizá-la ou encolhê-la ao seu tamanho padrão.

Procurar por arquivos

CódigoVS permite que você procure rapidamente por todos os arquivos da pasta atualmente aberta. Pressione ⇧⌘F (Windows, Linux Ctrl+Shift+F) e digite seu termo de busca. Os resultados da pesquisa são agrupados em arquivos contendo o termo de pesquisa, com indicação dos acertos em cada arquivo e sua localização. Expanda um ficheiro para ver uma pré-visualização de todos os hits dentro desse ficheiro. Depois clique num dos hits para o visualizar no editor.

Tip: Também suportamos a pesquisa de expressões regulares na caixa de pesquisa.

Você pode configurar opções avançadas de busca clicando na elipse (Toggle Search Details) abaixo da caixa de busca à direita (ou pressione ⇧⌘J (Windows, Linux Ctrl+Shift+J)). Isto mostrará campos adicionais para configurar a pesquisa.

Opções de pesquisa avançada

Nas duas caixas de entrada abaixo da caixa de pesquisa, você pode inserir padrões para incluir ou excluir da pesquisa. Se você digitar example, isso irá corresponder a cada pasta e arquivo chamado example no espaço de trabalho. Se você digitar ./example, isso irá combinar com a pasta example/ no nível superior do seu espaço de trabalho. Use , para separar vários padrões. Os caminhos devem usar barras de avanço. Você também pode usar a sintaxe glob:

• * para corresponder a um ou mais caracteres num segmento de caminho
• ? para corresponder a um caractere num segmento de caminho
• ** para corresponder a qualquer número de segmentos de caminho, incluindo nenhum
• {} para agrupar condições (por exemplo {**/*.html,**/*.txt} corresponde a todos os ficheiros HTML e de texto)
• para declarar um intervalo de caracteres a corresponder (example. para corresponder em example.0, example.1, …)

VS Código exclui algumas pastas por padrão para reduzir o número de resultados de pesquisa que você não está interessado (por exemplo: node_modules). Abra configurações para alterar essas regras sob as seções files.exclude e search.exclude> seção.

Nota que os padrões glob na vista de busca funcionam de forma diferente do que em configurações como files.exclude e search.exclude. Nas configurações, você deve usar **/example para corresponder a uma pasta chamada example na subpasta folder1/example no seu espaço de trabalho. Na vista de pesquisa, o prefixo ** é assumido.

Notem também o botão Use Exclude Settings and Ignore Files toggle nos ficheiros para excluir a caixa. A alternância determina se deseja excluir ficheiros que são ignorados pelos seus .gitignore ficheiros e/ou correspondidos pelos seus files.exclude e search.exclude configurações.

Dica: A partir do Explorador, você pode clicar com o botão direito em uma pasta e selecionar Procurar em Pasta para procurar apenas dentro de uma pasta.

Procurar e substituir

Você também pode Procurar e Substituir entre arquivos. Expanda o widget Pesquisar para exibir a caixa de texto Substituir.

Quando você digitar texto na caixa de texto Substituir, você verá uma exibição dif das alterações pendentes. Pode substituir todos os ficheiros da caixa de texto Substituir, substituir todos num único ficheiro ou substituir uma única alteração.

Tip: Pode reutilizar rapidamente um termo de pesquisa anterior usando ↓ (Windows, Linux Down) e (Windows, Linux Up) para navegar pelo histórico do termo de pesquisa.

IntelliSense

Pergunhamos sempre o preenchimento de palavras, mas para as linguagens ricas, tais como JavaScript, JSON, HTML, CSS, SCSS, Less, C# e TypeScript, oferecemos uma verdadeira experiência IntelliSense. Se um serviço de idiomas conhece possíveis completações, as sugestões do IntelliSense aparecerão à medida que você digitar. Você sempre pode acioná-lo manualmente com ⌃Space (Windows, Linux Ctrl+Space). Por padrão, Tab ou Enter são os gatilhos de teclado aceitos, mas você também pode personalizar estes bindings de teclas.

Tip: A filtragem de sugestões suporta CamelCase para que você possa digitar as letras que estão em caixa superior em um nome de método para limitar as sugestões. Por exemplo, “cra” irá rapidamente trazer “createApplication”.

Tip: As sugestões do IntelliSense podem ser configuradas através dos arquivos editor.quickSuggestions e editor.suggestOnTriggerCharacters settings.

JavaScript e TypeScript os desenvolvedores podem tirar vantagem do repositório de arquivos npmjs type declaration (typings) para obter bibliotecas JavaScript comuns (Node.js, React, Angular). Você pode encontrar uma boa explicação sobre o uso de arquivos de declaração de tipo no tópico da linguagem JavaScript e no tutorial Node.js.

Saiba mais no documento IntelliSense.

Formatting

VS Code tem grande suporte para formatação de código fonte. O editor tem duas ações de formatação explícitas:

• Formatação do documento (⇧⌥F (Windows Shift+Alt+F, Linux Ctrl+Shift+I)) – Formatar todo o arquivo ativo.
• Seleção do formato (⌘K ⌘F (Windows, Linux Ctrl+K Ctrl+F)) – Formatar o texto selecionado.

Você pode invocá-los a partir da paleta de comandos (⇧⌘P (Windows, Linux Ctrl+Shift+P)) ou do menu de contexto do editor.

VS Code tem formatadores padrão para JavaScript, TypeScript, JSON, e HTML. Cada linguagem tem opções de formatação específicas (por exemplo, html.format.indentInnerHtml) que você pode ajustar à sua preferência nas configurações do seu usuário ou espaço de trabalho. Você também pode desativar o formatador de idioma padrão se tiver outra extensão instalada que forneça formatação para o mesmo idioma.

"html.format.enable": false

Durante a invocação manual da formatação do código, você também pode acionar a formatação com base em gestos do usuário, como digitar, salvar ou colar. Estes estão desligados por padrão, mas você pode habilitar estes comportamentos através das seguintes configurações:

• editor.formatOnType – Formatar a linha após digitar.
• editor.formatOnSave – Formatar um arquivo no save.
• editor.formatOnPaste – Formatar o conteúdo colado.

Nota: Nem todos os formatadores suportam formatação em colar, para isso devem suportar formatar uma selecção ou intervalo de texto.

Além dos formatadores predefinidos, pode encontrar extensões no Marketplace para suportar outros idiomas ou ferramentas de formatação. Existe uma categoria Formatters para que possa procurar e encontrar facilmente as extensões de formatação. Na caixa de pesquisa da vista de Extensões, digite ‘formatadores’ ou ‘category:formatters’ para ver uma lista filtrada de extensões dentro do código VS.

Dobrar

Você pode dobrar regiões do código fonte usando os ícones dobráveis na sarjeta entre números de linha e início de linha. Mova o mouse sobre a sarjeta e clique para dobrar e desdobrar as regiões. Use Shift + Clique no ícone de dobra para dobrar ou desdobrar a região e todas as regiões dentro.

Você também pode usar as seguintes ações:

• Dobrar (⌥⌘ (Windows, Linux Ctrl+Shift+])) desdobra a região colapsada no cursor.

>

• Dobrar com alternância (⌘K ⌘L (Windows, Linux Ctrl+K Ctrl+L)) desdobra ou desdobra a região no cursor.
• Dobrar recursivamente (⌘K ⌘ (Windows, Linux Ctrl+K Ctrl+])) desdobra a região no cursor e todas as regiões dentro dessa região.
• Dobrar Tudo (⌘K ⌘0 (Windows, Linux Ctrl+K Ctrl+0)) desdobra todas as regiões no editor.
• Dobrar Tudo (⌘K ⌘J (Windows, Linux Ctrl+K Ctrl+J)) desdobra todas as regiões no editor.
• Dobrar Nível X (⌘K ⌘2 (Windows, Linux Ctrl+K Ctrl+2) para nível 2) dobra todas as regiões do nível X, exceto a região na posição atual do cursor.
• Dobrar todos os comentários de bloco (⌘K ⌘K/ (Windows, Linux Ctrl+K Ctrl+/)) dobra todas as regiões que começam com um símbolo de comentário de bloco.

Regiões dobráveis são por padrão avaliadas com base na indentação das linhas. Uma região dobrável começa quando uma linha tem um recuo menor que uma ou mais linhas seguintes, e termina quando há uma linha com o mesmo ou menor recuo.

Desde a versão 1.22, as regiões dobráveis também podem ser computadas com base nos tokens de sintaxe da linguagem configurada do editor. As seguintes linguagens já fornecem dobraduras com consciência de sintaxe: Markdown, HTML, CSS, LESS, SCSS, e JSON.

Se preferir voltar a dobrar por indentação para um (ou todos) dos idiomas acima, use:

 "": { "editor.foldingStrategy": "indentation" },

Regiões também podem ser definidas por marcadores definidos por cada idioma. As seguintes línguas têm actualmente marcadores definidos:

Língua	Região inicial	Região final
Bat	::#region ou REM #region	::#endregion ou REM #endregion
C#	#region	>#endregion
C/C++	#pragma region	#pragma endregion
CSS/Less/SCSS	/*#region*/	/*#endregion*/
Coffeescript	#region	#endregion
F##	//#region ou (#_region)	//#endregion ou (#_endregion)
Java	//#region ou //<editor-fold>	// #endregion ou //</editor-fold>
Marcação	<!-- #region -->	<!-- #endregion -->
Perl5	#region ou =pod	#endregion ou =cut
PHP	#region	#endregion
PowerShell	#region	#endregion
Python	#region ou # region	#endregion ou # endregion
TypeScript/JavaScript	//#region	//#endregion
Visual Básico	#Region	#End Region

Para dobrar e desdobrar apenas as regiões definidas pelos marcadores utilizados:

• Regiões de Marcadores Dobrados (⌘K ⌘8 (Windows, Linux Ctrl+K Ctrl+8)) dobra todas as regiões dos marcadores.
• Regiões do Marcador Dobrado (⌘K ⌘9 (Windows, Linux Ctrl+K Ctrl+9)) desdobra todas as regiões do marcador.

Indentação

CódigoVS permite controlar a indentação do texto e se você gostaria de usar espaços ou stops de tabulação. Por padrão, o VS Code insere espaços e usa 4 espaços por tecla Tab. Se você gostaria de usar outro padrão, você pode modificar o editor.insertSpaces e editor.tabSize settings.

 "editor.insertSpaces": true, "editor.tabSize": 4,

Auto-detecção

VS Code analisa seu arquivo aberto e determina o recuo usado no documento. O indentação auto-detectada substitui as suas configurações padrão de indentação. A configuração detectada é exibida no lado direito da Barra de Estado:

Você pode clicar na exibição da Barra de Estado de indentação para trazer à tona um drop-down com comandos de indentação permitindo que você altere as configurações padrão para o arquivo aberto ou converta entre paradas de abas e espaços.

Nota: A auto-detecção do código VS verifica se existem indentações de 2, 4, 6 ou 8 espaços. Se o seu arquivo usa um número diferente de espaços, o recuo pode não ser detectado corretamente. Por exemplo, se a sua convenção é para recuar com 3 espaços, você pode querer desligar editor.detectIndentation e definir explicitamente o tamanho da aba para 3.

 "editor.detectIndentation": false, "editor.tabSize": 3,

Suporte de codificação de arquivo

Configure a codificação de arquivo globalmente ou por espaço de trabalho usando a configuração files.encoding em Configurações do usuário ou Configurações do espaço de trabalho.

Você pode ver a codificação de arquivo na barra de status.

Clique no botão de codificação na barra de estado para reabrir ou guardar o ficheiro activo com uma codificação diferente.

Então escolha uma codificação.

Você cobriu a interface básica do usuário – há muito mais sobre o Código VS. Leia mais sobre:

• Vídeo de Introdução – Configuração e noções básicas – Assista a um tutorial sobre o básico do VS Code.
• Configurações de usuário/espaço de trabalho – Aprenda como configurar o VS Code de acordo com suas preferências através das configurações de usuário e espaço de trabalho.
• Navegação de código – Peek e Goto Definition, e muito mais.
• Terminal Integrado – Aprenda sobre o terminal integrado para executar rapidamente tarefas de linha de comando de dentro do VS Code.
• IntelliSense – O VS Code traz complementos inteligentes de código.
• Depuração – É aqui que o Código VS realmente brilha.

Perguntas comuns

É possível procurar e substituir globalmente?

Sim, expanda a caixa de texto Search view para incluir um campo de texto de substituição. Você pode pesquisar e substituir em todos os arquivos do seu espaço de trabalho. Note que se não abriu o código VS numa pasta, a pesquisa só será executada nos ficheiros actualmente abertos.

How do I activate word wrap?

You can control word wrap through the editor.wordWrap setting. Por padrão, editor.wordWrap é off mas se você definir para on, o texto será enviado na largura do viewport do editor.

  "editor.wordWrap": "on" 

Você pode alternar o wrap das palavras para a sessão de código VS com ⌥Z (Windows, Linux Alt+Z).

Pode também adicionar réguas de colunas verticais ao editor com a configuração editor.rulers, que toma um array de posições de caracteres de coluna onde você gostaria de ter réguas verticais.