Código VS: uma revisão aprofundada para desenvolvedores de WordPress

A Microsoft tem uma má reputação. Com o passar dos anos, eles ganharam a reputação de serem um pouco atrasados ​​e pouco amigáveis. Anos atrás, eles podem até ter merecido. Mas não mais. Os mais recentes empreendimentos da Microsoft são multiplataforma, intuitivos e ultrapassam os limites da tecnologia. É aí que entra o Visual Studio Code. Desde seu lançamento em 2015, o VS Code se tornou o editor de código de fato para muitos desenvolvedores, destacando o Sublime Text e o Atom como as principais opções. E isso quer dizer muito. Então, vamos explicar por que o VS Code é tão bom e como a Microsoft recuperou toda a nossa confiança.

Código do Visual Studio: código aberto e amoroso

Superficialmente, o Visual Studio Code se parece com a maioria dos outros editores por aí. Realce de sintaxe, tema escuro, extensões, etc. Mas quando você vai um pouco mais fundo, você vê que ao contrário de muitos outros editores e IDEs por aí, a experiência que você obtém no VS Code é simplesmente suave e - desculpe o trocadilho - sublime.

O maior ponto positivo do VS Code é que é open source. Mas, novamente, o Atom também (e é tecnicamente propriedade da Microsoft, também, desde que adquiriu o GitHub). Mais do que isso, a Microsoft o lançou sob a licença MIT, a mais branda e aberta das licenças de código aberto. Para uma empresa que historicamente tem sido muito rigorosa com patentes e sua propriedade intelectual, este é um grande passo.

Por causa desse licenciamento, o VS Code comanda uma comunidade obstinada de desenvolvedores que não apenas usam o software para suas vidas profissionais, mas também contribuem com o próprio editor ou com algumas das muitas extensões e plug-ins disponíveis para personalizá-lo. Há algum debate quanto à amplitude da licença do MIT para o Visual Studio Code, mas isso não deve afetar os usuários nem a maioria dos desenvolvedores.

Um IDE All-In-One?

Aqui está a questão do momento: VS Code é um editor de código ou um IDE? Ele tem integração Git embutida, acesso de terminal e bash, um console de depuração e um tipo especial de realce de sintaxe e autocompletar código chamado IntelliSense.

Tudo isso é imediato no download, sem extensões ou customização. Normalmente, esses tipos de recursos integrados e atualizados pela equipe de desenvolvimento oficial estão disponíveis em aplicativos premium como o PhpStorm. Mas com o VS Code ... essa linha fica confusa. Ele oferece muitos recursos do tipo IDE.

Mas no final, não é um IDE completo. Você não obtém refatoração de código padrão, atualizações oficiais específicas da linguagem e preparação para o futuro, e outras coisas pesadas que um IDE pode explorar. Dito isso, existe um IDE do Visual Studio. É um produto premium separado que a Microsoft fabrica há anos, e o Visual Studio Code é apenas mais um membro da família Visual Studio. Portanto, se você estiver procurando por um IDE completo e pesado, poderá obter um da MS. Mas este é um segundo bem próximo, honestamente.

Além disso, por haver um IDE do Visual Studio, os desenvolvedores se referem a ele como Código VS ou simplesmente Código em vez de Visual Studio. Seria muito confuso de outra forma.

Código VS: pronto para uso

Se você ainda não adivinhou, há várias partes que compõem o VS Code. Vamos começar examinando o básico e como tudo funciona imediatamente, antes de adicionar qualquer tipo de extensão ou personalizar qualquer coisa.

Ao abrir o editor pela primeira vez, você notará duas coisas:

• O layout e o design são semelhantes aos de outros editores e, portanto, familiares para a maioria das pessoas
• Ele carrega mais rápido do que a maioria dos outros editores de código (Atom, estamos olhando na sua direção)

Quando você terminar de se surpreender com a capacidade de resposta, podemos ir para a barra lateral esquerda. É aqui que a maioria das ferramentas adicionais que vêm com o VS Code estarão disponíveis.

Cada um dos ícones padrão ao lado abrirá uma nova coluna quando clicado, que pode ser redimensionada e personalizada.

1. Explorador

Sua visualização padrão no VS Code será a guia Explorer . Nele, você verá uma seção chamada Editores Abertos , que é uma gíria do VS Code para documentos. Cada arquivo aberto é considerado um novo Editor. Portanto, se você tiver 8 arquivos .css abertos, verá uma lista de 8 editores.

Então você tem a lista de programas abertos que podem criar arquivos a serem editados com o VS Code. Neste exemplo, você verá que o único que abri no fundo é Snagit. Abaixo disso está o Esboço que exibe o esqueleto do arquivo atual. Quando você obtém um arquivo gigantesco e precisa obter uma visualização de cima para baixo de toda a estrutura, a visualização Outline funciona um pouco mais suavemente do que até mesmo o minimapa à direita da tela.

2. Pesquisa

O recurso de pesquisa no VS Code é fenomenal. Não é que seja mais poderoso do que outros editores (porque tenho que ser honesto aqui: adoro Find / Replace in Sublime Text). É que é mais fácil e transparente do que outros editores.

Quando você realiza a pesquisa, cada instância do seu termo de pesquisa é encontrada na parte inferior da coluna direita. Você pode clicar em uma única instância para destacar a localização do termo de pesquisa dentro do arquivo. (Se você clicar em CTRL / CMD, uma segunda instância do arquivo será aberta, destacando a linha recém-escolhida.)

Se você escolher substituir o termo no segundo campo, os resultados mostrarão uma versão riscada em vermelho do termo de pesquisa e uma substituição em verde nos resultados. Quando você clica em localizar / substituir nos resultados, uma comparação comparativa aparecerá para visualizar as alterações. Esse recurso é tão útil que você se perguntará como viveu sem ele.

3. Git

Vou começar dizendo que provavelmente sou tendencioso em minha abordagem do Git. Costumo ser um usuário de linha de comando / bash, e clientes gráficos para Git nunca me pareceram adequados. Portanto, muita integração do Git com outros editores e IDEs não tem sido minha preferência. No entanto, a implementação do VS Code é um híbrido entre a linha de comando e uma GUI, e funciona surpreendentemente bem, independentemente da versão do Git que você preferir. Entendeu ... versão do Git?

A parte sobre a integração do Git no VS Code é que ele simplesmente funciona. A coluna à esquerda que aparece quando você clica no ícone do Git é um indicador visual do status do seu repo. Você pode clicar nas reticências (…) para verificar os comandos Git que normalmente teriam que ser digitados de forma muito específica. Você pode adicionar, enviar, enviar e até mesmo corrigir seus arquivos testados e trabalhar em vários ramos por meio do menu de contexto.

Além disso, você tem a opção de abrir um terminal bash no próprio editor. Há um menu Terminal na barra de navegação, e o que está dentro do VS Code é rápido, limpo, suave e bastante utilizável sem a necessidade de personalizá-lo. Você pode dividir em várias colunas, se necessário, e manter vários diretórios abertos em diferentes terminais entre os quais você pode alternar por meio do menu suspenso.

O terminal também não é específico do Git. Funciona tão bem com o recurso que é natural incluí-lo aqui.

4. Console de depuração

O console de depuração também é um dos recursos padrão do VS Code que o destaca de outros editores de código. No momento em que este livro foi escrito, havia 171 ambientes de depuração disponíveis para instalação no VS Code. Eles não fornecem uma contagem, mas eu queria saber e imaginei que você também, então contei manualmente.

Nos resultados, você pode encontrar depuradores para tudo que se possa imaginar. JavaScript, CoffeeScript, Coffee, Java ... todos os scripts da marca cafeína, na verdade. Você obtém ambientes LUA e Python e Ruby, Docker, PHP, SASS, LESS e ... tudo. De todas as linguagens de programação obscuras e / ou mortas para as quais tentei encontrar um depurador, QBasic foi a única que não apresentou nenhum resultado. E ninguém o usa há muito tempo. Eu realmente acho que você teria dificuldade em encontrar algo de uso moderno que não esteja disponível no Extensions Marketplace.

5. Extensions Marketplace

Dito isso, uma análise mais aprofundada do Extensions Marketplace dá uma ideia do tipo de ferramentas que você pode esperar da comunidade de desenvolvimento do editor. Você pode ver na imagem acima os milhões de instalações que algumas extensões têm e, se não tiver certeza por onde começar, classificar por Instalação ou por Popularidade pode ser sua melhor aposta.

Você pode classificar e pesquisar por palavra-chave usando o parâmetro @sort . Mas você também pode clicar nas reticências (2) para ver uma lista suspensa com todas as suas opções. As opções para gerenciar suas próprias extensões instaladas também estão aqui.

Depois de encontrar algo que deseja instalar, é muito simples de fazer. Clique no botão verde Instalar ,

Você precisará recarregar o editor de código do VS para finalizar a instalação.

É isso. Depois de concluído, sua extensão está pronta para uso. Porém, você pode querer retornar à guia Detalhes ocasionalmente porque vários problemas são cobertos lá, geralmente por meio de tags atualizadas e codificadas por cores.

Ser capaz de verificar a dependência e o status de vulnerabilidade é ótimo, e você pode ver todos os problemas em aberto com as extensões e quanto tempo geralmente leva para resolvê-los. Nem toda extensão exibirá todas as informações, mas quando o fazem, é incrivelmente útil.

Atalhos de teclado e mapas de teclado

Talvez a parte mais importante de um editor de código sejam os atalhos de teclado e os mapas de teclado. Todas as coisas sobre as quais já falamos são ótimas e são essenciais para o sucesso do editor e do projeto. Mas depois que você se acostuma com um mapa de teclado e seus dedos os usam por meio da memória muscular, trocar para um novo é quase impossível.

Na melhor das hipóteses, a troca tornará seu cronograma de projeto mais lento e reduzirá sua eficiência e, na pior das hipóteses, seus dedos desajeitados cometem uma injeção catastrófica na base de código.

Não importa de onde você vem ao migrar para o VS Code, a comunidade tem a cobertura. Quer seja do VIM, Emacs, Sublime Text ou mesmo do Notepad ++, você pode manter os atalhos e mapas de teclado aos quais está acostumado. Você pode pesquisar o Extensions Marketplace com @recommended: keymaps ou acessar Arquivo - Preferências - Keymaps para exibir a lista de extensões disponíveis.

E se você não tem preferência por atalhos, tudo bem também. Se você sentir a necessidade de personalizar alguma coisa (ou apenas quiser um resumo de quais atalhos de teclado estão disponíveis no VS Code por padrão), você pode ir para Arquivo - Preferências - Atalhos de teclado .

Misc. Recursos que você deve conhecer

Como uma visão geral, você deve ser capaz de ver neste ponto a maior parte do que o VS Code pode oferecer como um editor de texto e código. Dito isso, há um punhado de coisas úteis que você deve conhecer.

1. O Menu de Seleção

Isso é útil independentemente do nível de desenvolvedor em que você está, mas é especialmente útil se você for novo para editores em geral. O menu Seleção tem várias funções que você achará inestimáveis.

Especificamente, ser capaz de usar Adicionar cursores às extremidades de linha com um clique é bom, e ser capaz de ir ao menu e selecionar todas as ocorrências de uma palavra, frase ou fragmento realçado no arquivo atual. A maioria dos editores os tem como atalhos, mas nem todos os têm tão facilmente rotulados ou disponíveis como o VS Code. Foi revigorante vê-los tão logo de cara, já que são alguns dos comandos mais importantes e importantes que você usará.

2. O Menu Terminal

Só porque você trabalha em um editor de código, não significa que você é um assistente de linha de comando. Na verdade, você deve ter olhado a linha de comando e a seção do terminal acima e pensado que nunca os usaria.

Mas dê uma olhada no menu Terminal . Mesmo se você não fizer muito com ele, você verá alguns comandos básicos que você pode executar a partir do menu que podem ajudar um pouco no seu desenvolvimento.

Apenas ter acesso a eles por meio de um menu, em vez de precisar conhecer os comandos do shell, abre o terminal, o bash e a linha de comando de uma maneira que muitos aplicativos simplesmente perdem. São pequenos toques como esses que tornam o VS Code realmente atraente para todos, não apenas para os programadores veteranos que vêm do VIM ou do Emacs.

3. Modo Zen

No menu Exibir , você encontrará um submenu chamado Aparência que contém a opção Alternar Modo Zen . Vale a pena verificar e experimentar as outras opções em Exibir , mas quero chamar sua atenção para o Modo Zen porque espero que muitas pessoas nunca o tenham experimentado.

Editores diferentes podem chamá-lo por nomes diferentes, mas a ideia geral é que você preencha toda a tela apenas com o documento que está editando no momento. É diferente de um modo de tela inteira porque você não maximiza o aplicativo, mas o documento.

É difícil mostrar o modo com uma captura de tela porque ele não pode realmente mostrar que a tela inteira está coberta pelo editor de código do VS. Até mesmo a barra de tarefas do Windows e o dock do MacOS. Cada pixel do espaço da tela é tomado pelo seu projeto atual, de forma que você pode se concentrar nele e em nada mais.

E se não for para você, basta pressionar ESC e você estará de volta à sua visão anterior.

Pode não parecer muito, e eu costumava ser um cético. Mas depois de usar um recurso semelhante no Scrivener para escrever ficção, sou um convertido. Você pode entrar em um estado de fluxo mais facilmente e realmente fazer as coisas. Muitos elogios ao VS Code por implementar o Modo Zen para que possamos conectar nossos fones de ouvido e trabalhar sem distrações sempre que quisermos (ou o máximo que pudermos).

Empacotando

Levando tudo em consideração, você seria negligente em não baixar o Visual Studio Code e experimentá-lo. A Microsoft lançou o que pode ser o editor mais estável, com mais suporte, mais rápido e proporcionalmente leve / repleto de recursos por aí. Novos programadores, desenvolvedores experientes ou amadores que desejam encontrar as ferramentas certas ... O VS Code foi feito pensando em você. Essa não é uma tarefa fácil de se conseguir, mas, como foi, o VS Code vale os bits e bytes do seu disco rígido. E talvez até mesmo mais uma olhada na Microsoft, se você já os tivesse descartado.

Quais são seus aspectos favoritos do VS Code? Você fez a troca?