♾ 🥟 🔲 Editor de código de código do Visual Studio. O guia mais detalhado para configurar e instalar plugins para iniciantes 🙆🏾 ⭕️ 🔆

Gratuito, poderoso, muito popular, com vários add-ons, o que posso dizer, o próprio Facebook o escolheu como editor principal!

Hoje vamos nos concentrar no editor de código do Visual Studio Code ou apenas no VS Code. Vamos instalá-lo, configurá-lo e também usar plugins que simplificarão bastante nosso trabalho.

Se o editor de código Sublime Text 3 for mais interessante, o artigo aqui https://habr.com/en/post/458206/

Conteúdo:

Excluir

Se você já usa o VS Code, mas decidiu começar do zero, mostrarei como remover o programa completamente, incluindo todas as configurações e plugins. Além do fato de que o programa precisa ser removido do painel de controle do Windows, você também precisa ir para Unidade C> Usuários> Seu nome de usuário e excluir a pasta .vscode aqui.O

AppData deve ser adicionado na barra de caminho, depois vá para a pasta Roaming e aqui você deve excluir a pasta Código.

Instalação

Ok, agora podemos instalar o programa. Acesse o site code.visualstudio.com , seção Download. Existe uma versão para Mac, Linux. Estou interessado no Windows. Clique e faça o download para o seu PC. A propósito, o site do programa é muito útil, por isso aconselho você a estudá-lo.

O programa é baixado, execute o instalador e siga as instruções: aceite, adicione todas as marcas de verificação e aguarde até que o programa seja instalado no nosso PC.

Rodando em uma máquina fraca

Quando o programa está instalado, podemos iniciá-lo. Mas não será iniciado em todos os computadores. O fato é que o programa consome bastante recursos. Portanto, em uma máquina fraca, você pode obter este resultado: em vez da interface do programa, uma tela preta e o processador suam 100%. Mas existe uma saída: você precisa abrir o menu de contexto do atalho do programa e adicionar o seguinte sinalizador no caminho para o arquivo: --disable-gpu

Ótimo, agora o programa começará mesmo na calculadora.

Configuração de idioma

O programa é lançado e podemos começar a nos familiarizar com ele. E para facilitar o conhecimento, instalarei o idioma russo. Para fazer isso, clico no ícone de extensões.No campo de pesquisa, começo a escrever russo até ver o pacote Russian Language Pack para Visual Studio Code.

Clico no botão Instalar. Em seguida, o programa solicitará que você reinicie, faça isso. Ótimo, agora será muito mais claro. Mas, se você fala inglês, não é necessário mudar para o russo.

Tela de boas vindas

Vou esconder o painel lateral por enquanto, retornaremos mais de uma vez.
A primeira coisa que vemos é a tela de boas-vindas. Há um item aqui com o qual podemos importar todas as configurações, chaves de editores já instalados, por exemplo, Vim, Sublime, Atom e outros.

Isso irá acelerar e facilitar a transição de um editor para outro. Mas hoje faremos tudo do zero. Além disso, existem outros links úteis - Informações gerais sobre a interface, bem como uma lista de atalhos do teclado de uma forma muito conveniente e muito mais.

Aconselho que você estude essa tela e, quando não for mais necessária sempre que iniciar o programa, desmarque esta caixa de seleção. Mais tarde, você sempre pode chamá-lo no menu Ajuda> Saudação.

Interface pronta para uso

Com preguiça de ler? Aqui está a versão em vídeo.

Todos os preparativos foram feitos e agora podemos nos familiarizar com a interface do programa e, ao mesmo tempo, ver o que o VS Code pode fazer imediatamente.

Chamamos a janela Informações gerais da interface e vemos os principais elementos do programa.

Acima, vemos o menu. A seguir, é apresentada a interface de execução de qualquer comando que sempre podemos chamar. Área geral do editor. Barra de ação esquerda. Abaixo está a barra de status e começaremos com ela. As dicas nos dizem que há uma exibição de erros e avisos. Você pode ligar para o terminal embutido.

Vamos considerar tudo em mais detalhes.

Barra de status

Problemas

No lado esquerdo, os números próximos aos ícones exibirão o número de erros e avisos que surgiram durante a execução do código.

Para abrir o painel, você precisa clicar nesses ícones ou pressionar Ctrl + Shift + M , aqui veremos o texto das mensagens de erro.

No painel, você pode filtrar essas mensagens, minimizá-las, expandir o painel inteiro para tela cheia ou fechá-lo.

Console de depuração

Além da guia para a saída de problemas neste painel, ainda temos um console de depuração, retornaremos a ele.

Conclusão

O log de saída do trabalho de todos os programas e sistemas do editor. Aqui você também pode filtrar esse log, limpá-lo, bloquear a rolagem de mensagens, expandir o painel ou fechá-lo.

terminal

A última guia neste painel é o terminal integrado. Você pode chamá-lo pressionando Ctrl + ` .

No painel de controle, você também pode adicionar terminais, dividir a janela em várias partes, excluir a janela do terminal, alternar entre as janelas do terminal e também selecionar o shell padrão.

Por exemplo, eu tenho o GitBash instalado. Ao selecioná-lo e adicionar uma nova janela de terminal, essa interface será aberta para mim. Tradicionalmente, aqui você pode expandir o painel para tela cheia e fechá-lo.

Notificações

À direita, na barra de status, vemos notificações, agora elas não estão lá. Também é possível enviar um tweet com feedback sobre o programa.

Além disso, muitos outros itens aparecerão na barra de status.

Menu contextual

Também podemos chamar o menu de contexto e remover desta linha o que não usamos. Por exemplo, um tweet de revisão para liberar espaço.

Também no mesmo menu de contexto, podemos ocultar completamente esta linha.

Barra de ação

Por padrão, um painel de ação com 6 elementos está localizado na parte esquerda do editor:

Explorer, é um gerenciador de arquivos embutido;
Procurar;
Sistema de gerenciamento de controle de versão;
Lançamento e depuração de aplicativos;
O instalador de vários add-ons é o nosso editor;
Na parte inferior, há uma engrenagem, clicando no qual veremos um menu das principais configurações do programa.

Condutor

Vamos começar com o Explorer, ele pode ser aberto clicando no ícone ou mantenha pressionada a tecla Ctrl + Shift + E .

É muito conveniente que, quando você passa o mouse sobre o ícone, o editor nos solicita um atalho de teclado.

Aqui vemos três abas principais:

Editores abertos - aqui será apresentada uma lista de arquivos abertos para edição.
Guia com pastas, projetos. Agora não temos pastas abertas.
A estrutura - agora não há nada aqui, retornaremos a ela mais tarde.

A janela de boas-vindas já podemos fechar. Quando todas as janelas estão fechadas, o editor exibe um esboço onde mostra os atalhos do teclado para as principais ações:

Vamos adicionar uma pasta vazia ao nosso projeto futuro no editor. Para fazer isso, clique em Abrir pasta ou simplesmente arraste-a para este campo.

Agora temos uma pasta hello_vscode vazia, além de alguns controles:

Criar arquivo;
Crie uma pasta;
Atualize todos os arquivos e pastas;
Recolher tudo no Explorer.

Vamos criar alguns arquivos que precisamos para o projeto. Clique em Criar arquivo, escreva, por exemplo, Index.html. Em seguida, podemos criar uma pasta css e criar um arquivo style.css nela. É muito conveniente usar este gerenciador de arquivos embutido.

Você também pode usar o menu de contexto para criar arquivos e pastas. Além disso, também existem recursos interessantes, como por exemplo, mostrar a pasta no Windows Explorer.

Agora podemos ir para Index.html e escrever algo interessante lá, por exemplo, "Hello VC Code".

Realce de sintaxe

Só quero dizer algumas palavras sobre o realce da sintaxe - essa é a capacidade do editor de reconhecer o código e colorir seus elementos individuais. Quando abrimos o arquivo e começamos a trabalhar nele, um elemento html apareceu na parte inferior da barra de status, além de outros novos elementos. Isso significa que o editor reconheceu o idioma e o destacou de acordo. Clicando neste elemento, veremos uma grande lista de destaques para vários idiomas.

Esta lista pode não incluir absolutamente tudo. Por exemplo, se estivermos trabalhando com um arquivo .kit. Vamos criar o index.kit e copiar nosso código lá. Veremos que não há destaque e, em vez do elemento html, vemos o texto sem formatação. O que fazer neste caso? Precisamos clicar em texto sem formatação e aqui temos uma opção - em vez de detecção automática, podemos tentar procurar complementos para destacar a sintaxe especificamente para arquivos .kit.

Se isso não funcionar, podemos configurar os mapeamentos. Clique aqui e selecione um idioma de mapeamento para arquivos .kit. No meu caso, é html.

Agora, todos os arquivos .kit que o programa reconhecerá como um arquivo html e serão destacados de acordo. Vamos voltar ao nosso arquivo html real. Vamos salvar tudo o que editamos aqui. O resultado do trabalho pode ser visto abrindo esse arquivo no navegador. Na guia Estrutura, veremos que uma estrutura de árvore desse documento foi exibida.Um

recurso útil adicional do explorador é o Menu de Contexto, onde podemos mostrar ou ocultar qualquer guia. Por exemplo, vou remover a estrutura e remover os editores abertos.

Como resultado, terei apenas uma pasta do projeto.

Procurar

Pesquisa ( Ctrl + Shift + F ) - o que você precisa. Escrevemos a palavra hello, que indicamos em nosso arquivo html. A pesquisa encontrou imediatamente, destacada, exibida em qual arquivo. Você pode substituir imediatamente esta palavra por outra.

É conveniente mostrar tudo isso clicando aqui no ícone em que a palavra será substituída.

Sistema de Gerenciamento de Controle de Versão

Abra a guia, você pode clicar no ícone ou mantenha pressionada a tecla Ctrl + Shift + G . Para aqueles que já estão familiarizados com os sistemas de controle de versão, como o Git, ele apreciará esse recurso. Um pouco mais tarde, mostrarei como vincular meu projeto local ao repositório no GitHub.

Depuração de aplicativo

O próximo item na barra de ação é Depurando o aplicativo. Essa ferramenta, de forma independente e com a ajuda de plug-ins de terceiros, permite analisar a execução de um código de programa específico.

Por exemplo, temos algum tipo de código javascript e, para iniciar a depuração, podemos clicar no botão aqui ou pressionar F5.

O resultado da depuração será exibido no painel inferior. Você também pode definir os chamados pontos de interrupção de código e se mover entre eles, o que é muito conveniente.

Extensões

Aqui temos todo um armazém de extensões e plugins para o nosso editor. Já usamos essa guia para instalar o pacote de idiomas. Clicamos no ícone ou, mantendo pressionada a combinação de teclas Ctrl + Shift + X , veremos um campo de pesquisa para extensões e três guias adicionais:

Ativado - todas as extensões instaladas são exibidas;
Recomendado
Extensões instaladas mas desativadas.

Na guia com nossas extensões instaladas, temos acesso rápido a elas, podemos ver, ler algumas informações, teclas de atalho, descobrir todos os detalhes sobre essa extensão. Além disso, ele pode ser excluído aqui clicando no botão Excluir. Voltaremos às extensões e instalaremos as melhores e mais úteis delas.

Definições

No painel de ação, ainda temos mais um elemento - gear - o menu principal de configurações. Aqui podemos chamar uma paleta de comandos clicando aqui ou o Ctrl + Shift + P . Um bloco será aberto, onde podemos encontrar e executar qualquer comando do editor ou plugins instalados.

Mais atalhos de teclado. Aqui podemos personalizar nossos atalhos de teclado para comandos ou mudar para os existentes. Voltaremos a eles. Snippets de código personalizados, os chamados snippets, são pequenas abreviações que causam o fragmento de código de que precisamos. Hoje vamos aprender como configurá-los. Aqui você pode personalizar o tema de cores do programa, ícones para arquivos e muito mais.

Terminando com a barra de ação, vale a pena notar que você pode acessar rapidamente a última guia aberta com Ctrl + B. Além disso, ocultando o menu de contexto, você pode ocultar um item desnecessário. Por exemplo, ocultarei Iniciar e Depurar. No mesmo menu de contexto, você pode ocultar a barra de ação inteira.

Área do Editor

Com preguiça de ler? Aqui está a versão em vídeo.

Vemos guias com arquivos abertos. Eles podem ser arrastados, fechados. Se o arquivo não for salvo, o local da cruz exibirá um grande ponto em negrito aqui. Ao lado do topo está o ícone da janela dividida. Há um arquivo ativo aberto, clique no ícone e ele será duplicado ao lado.

Há um menu adicional para gerenciar todos os arquivos.

Abaixo, vemos a barra de navegação - trilhas de navegação, onde podemos navegar comodamente pela estrutura do documento, bem como entre outros arquivos.

A área geral do código - vemos o código do próprio arquivo aberto e, à direita, existe um minimapa que permite navegar comodamente por um arquivo longo. Há um pequeno espaço na área de código à esquerda. Para definir pontos de interrupção para depuração do código, há numeração de linhas.

Em seguida, vemos as setas; elas aparecem quando você passa o mouse; com a ajuda delas, você pode recolher todo o bloco de código. Neste editor, essa função funciona com memória. Posso fechar o arquivo, até fechar todo o programa e, quando o abrir novamente, o bloco minimizado anteriormente permanecerá minimizado.

O que podemos configurar aqui?

Como já mostrei, a janela do editor pode ser dividida em várias partes, o que é conveniente quando se trabalha com arquivos diferentes. Para ver opções diferentes, você precisa ir para Exibir> Layout do editor . Há várias opções aqui, por exemplo, duas linhas, e podemos mover um arquivo aqui e funcionar assim. Há também uma opção de grade 2x2. Ou seja, você pode trabalhar simultaneamente com 4 arquivos.

Você também pode organizar rapidamente a posição desejada dos arquivos, simplesmente arrastando e soltando-os. Eu imediatamente formei o layout certo para mim. Também é possível personalizar a aparência de toda a área do editor. Abra Menu> Exibir> Aparência .

Abaixo, há a capacidade de ajustar a escala de todo o programa. Não confunda com tamanhos de fonte. É conveniente usar atalhos de teclado. Por exemplo, para aumentar os elementos, pressione Ctrl + , para reduzir - Ctrl- , para redefinir - o Ctrl + 0 .

Você pode mover a barra de ação da esquerda para a direita e, em seguida, ela estará do outro lado. Você pode especificar a posição do painel da nossa barra de status. Ao clicar, veremos que o painel não será mais aberto de baixo como antes, mas de lado. Ou seja, é possível configurar quase tudo.

Também neste bloco você pode ocultar ou mostrar diferentes elementos. Eu disse anteriormente que podemos ocultar toda a linha de notificação, ocultar completamente a barra de ação. Nesse bloco, podemos devolver tudo isso ao local.

Modos de tela

Na parte superior, há um modo de tela cheia quando você pressiona F11 . O menu superior, botões para gerenciar a janela do programa, ficará oculto.

Alinhamento centralizado do layout. A área do código está centralizada, você pode ajustar a largura. Isso é para melhor se concentrar no código.

Há um maravilhoso modo Zen. Ele oculta todos os elementos, mesmo as guias de arquivo, nos concentramos em apenas um único arquivo, em um código. Resolvemos uma tarefa difícil que requer concentração máxima.

Para sair, pressione Escape .

Quebra de texto

Além disso, no menu View, podemos ativar ou desativar a quebra automática de texto, você pode fazê-lo segurando o Alt + Z . O que isso significa? Por exemplo, temos um texto muito longo que não cabe na área de código e a rolagem horizontal é exibida. Se isso parecer inconveniente, você pode pressionar Alt + Z; todo o nosso texto será moldado para caber na área do código.

É possível ocultar ou mostrar um minimapa, controles, ou seja, migalhas de pão. Se parece desnecessário. Aqui você pode exibir espaços não imprimíveis e caracteres imprimíveis e desenhar caracteres de controle que podem ser copiados da fonte no texto.

Esquema de cores

Podemos escolher um dos temas instalados, indo para o Office, aponte o tema Cor. Vemos a lista e, com as setas do teclado, podemos alternar entre tópicos, escolhendo o tema certo para nós mesmos. Existem opções de escuro e claro.

Se nenhum desses tópicos for apropriado, podemos definir nossos próprios. Para fazer isso, volto à guia Extensões, no campo de pesquisa, escrevo o nome do meu tema - SpaceOceanKit. Eu acho, clique em Instalar. Em seguida, tenho uma escolha de qual tópico escolher e eu o escolho.

Agora eu tenho o editor inteiro, incluindo o código, que parecerá diferente. Eu defino meu tema, você pode instalar qualquer outro.

A combinação de cores é muito importante para o trabalho a longo prazo com o código, isso afeta a percepção, fadiga e a saúde dos seus olhos. Portanto, escolha um tópico com cuidado e não se esqueça de fazer pausas.

Ícones

Também podemos alterar a aparência dos ícones para arquivos em nosso explorador. Para fazer isso, vá para Gerenciamento> Tema do ícone do arquivo , aqui podemos desativar completamente os ícones ou escolher na lista.

Instale também pacotes de ícones adicionais. Por exemplo, Matherial Icon Theme.

Parâmetros

Além disso, você pode ajustar o conforto de trabalhar com o código e com o editor como um todo nas Configurações do programa. Para fazer isso, vá para Gerenciamento> Opções ou mantenha pressionada a tecla Ctrl +. Os

parâmetros podem ser configurados globalmente e para um projeto específico. Existem muitas configurações aqui. Vamos passar pelos principais.

Salvamento automático

A primeira opção útil é o salvamento automático de arquivos. Para iniciantes, uma opção muito legal. Os iniciantes geralmente me procuram com o problema: "Por que meu trabalho não funciona para mim?" Eu olho, e o arquivo não é salvo lá.

Para impedir que isso aconteça, aqui você pode alterar o valor para um dos três:

afterDelay - o arquivo será salvo após algum atraso, que pode ser configurado imediatamente aqui abaixo. Se você selecionar esta opção ao editar um arquivo, ele será salvo imediatamente, um ponto em negrito nem aparecerá.
onfocusChange - o arquivo será salvo quando passarmos para outro arquivo
onWindowChange - quando mudarmos para um programa completamente diferente, o arquivo será salvo automaticamente.

Escolha uma opção conveniente para você e siga em frente.

Exibição de código

As opções a seguir o ajudarão a configurar uma exibição de código confortável. Este é o tamanho e a família da fonte. Aqui você pode escolher o valor que mais lhe convém.

Eu ajusto o tamanho da indentação ao tabular. Por padrão, é 4. Quanto a mim, o campo é muito amplo com uma guia, então eu o troco para 3, para que pareça mais compacto para mim. Você indica o valor que é mais confortável para você.

Em um arquivo, são exibidos espaços para mim, pontos quando Tab é pressionado, em outro - um ícone de tabulação. O parâmetro Insert Spaces é responsável por esta opção. Por padrão, uma marca de seleção é definida, ou seja, os espaços serão exibidos. Quero que minhas guias sejam exibidas e removerei a marca de seleção.

Para converter um arquivo existente com espaços, você pode ir para a barra de status, pressionar 4 espaços e selecionar a opção Converter recuo em etapas da guia. Assim, podemos converter arquivos já abertos.

E a opção Detectar recuo responde como determinar a inserção de caracteres para novos arquivos abertos. Vou remover a marca de seleção porque quero que minhas configurações definidas funcionem para todos os arquivos.

Ocultar dicas de ferramentas

Anteriormente, mostrei que, quando você passa o mouse sobre um elemento no código, as dicas de ferramentas são exibidas, geralmente isso pode ser irritante. Para remover dicas, existe um parâmetro Hover Enabled . A marca de seleção pode ser removida e os prompts desaparecem.

Mas, junto com isso, funções que podem ser úteis desaparecerão.
Por exemplo, na folha de estilo, temos a cor azul. É destacado imediatamente. Se Hover estiver ativado, quando você passar o mouse sobre uma cor, algo assim cairá:

podemos torná-la translúcida, definir valores de rgba ou até mudar a cor para outra. Se desmarcarmos a caixa de seleção Hover Enabled, essa função também desaparecerá.

O parâmetro Decoradores de cores é responsável pela saída; se não for necessário, a marca de seleção poderá ser removida e não haverá quadrados de cores.

Zoom da roda do mouse - marcando a caixa, podemos alterar o tamanho da fonte no editor pressionando Ctrl e girando a roda do mouse .

Fechar grupos ativos controla se o grupo será fechado quando a última guia for fechada. O editor pode ser dividido em partes. Por padrão, ao fechar a última guia, a guia inteira será fechada. Às vezes isso é inconveniente, então eu removo essa marca de seleção. E agora, ao fechar a última guia, o grupo continuará comigo.

Formatação

O próximo grupo de configurações é responsável pela formatação, que já está embutida no editor de código de VC. O que é formatação? Por exemplo, escrevemos uma estrutura, há outra estrutura nela, mas por algum motivo uma guia foi removida. Quando você pressiona Shift + Alt + F , tudo se alinha como deveria.

Voltar às nossas configurações. Aqui podemos colocar três marcas de seleção:

Formatar ao colar - a formatação será feita automaticamente quando você colar o código.
Formatar ao salvar - a formatação será feita quando o arquivo for salvo.
Formatar em Tipo - a formatação será automática, ou seja, imprimiremos e tudo será formatado de uma só vez.

Defino uma marca de seleção - Formatação ao salvar.
Agora, quando a guia parar, não presto atenção. No momento de salvar o arquivo, tudo estará em seu devido lugar.

Você pode fazer ajustes mais precisos na formatação de um idioma específico, entendendo a documentação no site do programa. Você também pode instalar extensões adicionais para um idioma específico e para muitos outros.

Eu mostrei essa parte das configurações que eu mesmo uso. Você pode se familiarizar com o restante das configurações. Por conveniência, as configurações aqui são divididas em categorias. Há também uma categoria de configurações para extensões já instaladas ou instaladas apenas.

Para acesso rápido a tudo o que configuramos, mantenha pressionadas as teclas Ctrl + Shift + P e escreva na barra de pesquisaConfigurações até vermos Configurações (JSON). Clicamos e nossas configurações aparecerão à nossa frente. Você pode alterá-las imediatamente.

No mesmo arquivo, configuraremos a nova extensão.

O conforto ao trabalhar com o programa é muito importante, pois isso afeta diretamente o desempenho. A próxima coisa que faremos é instalar vários plugins que nos ajudarão substancialmente nisso.

Plugins

Com preguiça de ler? Aqui está a versão em vídeo.

Emmet

- Este plug-in já está incorporado no editor de código VS, pronto para uso. De fato, hoje é difícil imaginar a vida sem Emmet. Super acelera a digitação. Por exemplo, foi graças a ele que criei tão rapidamente o código inicial para o arquivo HTML escrevendo apenas um ponto de exclamação e pressionando Tab.

Aqui está outro exemplo. Precisamos criar uma div com a classe block para isso, escrevo .block e pressione Tab. Feito!

Ou, por exemplo, mais complicado - precisamos criar uma lista com marcadores de 10 elementos. Escreva ul> li * 10 Tab. Feito!

O mesmo se aplica aos arquivos de estilo. Por exemplo, para a tag body, quero definir o tamanho da fonte para 20 pixels. Para fazer isso, basta escrever fz20 . Ao pressionar Tab, recebo um parâmetro pronto.

Você pode aprender mais sobre os recursos do Emmet sobre este add- on do website .

Trechos

Mas é ainda mais interessante criar seus próprios atalhos de snippets para chamar rapidamente esse outro pedaço de código.
Vá para Gerenciamento> Snippets de código personalizado . Existe uma escolha:

Crie trechos para um idioma específico;
Crie trechos para todos os idiomas, mas para um projeto específico;
Crie trechos globais para todos os idiomas e para todos os projetos.

Vamos criar globais, aqui você precisa digitar o nome da lista de trechos.

Digito my, clique e o arquivo my.code-snippets é aberto. Existe alguma informação comentada, bem como um exemplo. Vou descomentá-lo. Aqui está o trecho de código para JavaScript.

. scope — . , . — , , . body . console.log description, .

: , . , css .

— “ ”, . , mm. body «margin: 0px, 0px, 0px 0px;», mm . Ctrl+S .

style.css mm Tab. , , .

, . js, log Tab.

, , $1 $2. $1. Tab, $2. .

, , , .

. Ctrl+Shift+X .

Live Sass Compiler

, SASS/SCSS. Install. , , , . , .

Watch Sass. .

scss , . style.scss.
:
```
body{
	font-size: 20 px;
	div{
		font-size: 10 px;
	}
}		
```
, Watch Sass scss\sass . style.css style.css.map.

. , , , scss, css.

. Shift+Ctrl+P, Settings (JSON). , .
```
"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.formats": [
	{
		"format": "expanded",
		"autoprefix": "last 5 versions",
		"extensionName": ".css",
		"savePath": "css"
	}
],
```
-, -. . «format» — , scss — , , ..

— css . . — css. css, .

, . , - - , css , style.css. , .

, style.scss. , scss - . , — import «header.scss»

, . …

? header.scss header.css. , style.css, header, , . header, . , header.scss, , .

, . , , header.css, . :)

Live Server

Live Css Compiler Live Server — , . Live Css Compiler, Live Server .

, , Live Css Compiler. Go Live. , , index.html Go Live .

html , “Hello”, , GoLive .

, . . link, link.css, . , .

, , , . , .

SCSS IntelliSense

SaSS. SCSS IntelliSense, scss, .

SCSS Formatter

. sss . .

Auto Complete Tag

Auto Rename Tag Auto Close Tab. , VS Code , Auto Close Tab — html, . Auto Rename Tag — , . , span , .

Bracket Pair Colorizer

, — , , . . , , . , , , .

Indent Rainbow

, , , , SaSS pug, .

Better Comments

. , , .. , , - , .

- —! — , ToDO — , —? — .

, , .

, .
Color, - .

BEM Helper

BEM. bem, , . , , - css scss bem- html .

. Alt+B+E, , , .

?

.
. , > BEM Helper.

, Insert Element. , , .

, . , , - .

eCSStractor

, html css\scss\sass. , . > , eCSStractor, . eCSStractor Run (With BEM Nesting).

, , Ctrl+Alt+1, Enter, .

: html , , Ctrl+Alt+1, , .

. , .

, , BEM? Ctrl+Alt+2 .

, , . , — BEM BEM.

CSS Navigation

, . -, .
, red. html, . r , .

. , F12 . , , .

, , - , . F12 , , , html-.

Alt + F12

Image Preview

. , . html-, , , . , , , .

Debugger for Chrome

, - . F5 Chrome, , .

Vscode Google Translate Google Translate

. , translate text.

, , , Shift+Alt+T.
html , hello, Shift+Alt+T . , .

, > , , , , .

, (Preffered). , Shift+Alt+T . .

Project Manager

, , .. . Project Manager.

, , . . , , Project Manager .

Settings Sync

, , Windows, Settings Sync.

, GitHub .
, GitHub, , .

, , . , .

, . Shift+Alt+U.

. , , , , .

.

, Settings Sync. , GitHub. .

. , , — Shift+Alt+D.

, , - . , , , . , — . , , , .

. , .

( ) :
Auto Complete Tag (Auto Close Tag, Auto Rename Tag), Bracket Pair Colorizer, indent-rainbow, Better Comments, Guides, BEM Helper, CSS Navigation, eCSStractor for VSCode, Image preview, Live Sass Compiler, Live Server, Project Manager, SCSS BEM Support, SCSS Formatter, SCSS IntelliSense, Vscode Google Translate, SVG, SVG Font Previewer, jQuery Code Snippets, JavaScript Snippet Pack, jsflowchart, no jQuery Snippets, ESLint, Code Runner, Multiple clipboards for VSCode, WordPress Snippets, Live Pug Compiler, pug, Avocode, Google Fonts, GitLens — Git supercharged,
Settings Sync

GITHub

? .

! Git.

, +, , .

. +, .

, , -, Enter. GitHub. , , . :

git remote add origin https://github.com/FreelancerLifeStyle/hello_vscode.git git push -u origin master

, . , . , , , . , Enter.

, . Git. - , 1, 1 , , . > .

GitHub, , GitHub.

GitLens, .

, , — , — .

, , — , !

VS Code " "