Wtricks • Tutoriais e Dicas do Mundo Digital

Visual Studio Code o novo editor de texto queridinho dos Desenvolvedores

Por Carlos Sabo Cantanzaro • 10/03 - 03:43 am | Em IDEs

Por muito tempo o Sublime Text se manteve como um rei na liderança dos editores. Porém, parece que o Visual Studio Code chegou para mudar essa realidade

Quando usei o Visual Studio Code pela primeira vez, pude perceber que ele significa muito mais para o Desenvolvimento Web do que só mais um novo editor de texto parecido com o Sublime Text. E digo isso não apenas pela qualidade da ferramenta e sim, pelo contexto por trás dela.

Neste artigo, vou abordar diversos aspectos do Visual Studio Code, começando por uma analise dos impactos da ferramenta no Desenvolvimento Web, depois vou abordando algumas características únicas da plataforma, logo então, fazer um review o mais completo possível (O review está em vídeo, no começo do artigo), mostrando algumas curiosidades e configurações do Vs Code, Além disso, quero mostrar alguns plugins que vão deixar o Visual Studio Code ainda mais interessantes. E por fim, vou dar as minhas considerações finais e responder algumas perguntas comuns! Longo caminho né? Borá lá então… 

Qual impacto do Visual Studio Code no Desenvolvimento Web? 

Por muito anos a Microsoft, com o Internet explorer, foi motivo de insônia e dor de cabeça para os desenvolvedores web, pois tudo e digo EXATAMENTE tudo que a gente desenvolvia, pegava bem nos navegadores mais modernos e dava algum tipo de erros no Internet Explorer. E o motivo disso? Bom, essa é uma história bem longa, mas que foi marcada no tempo como a “guerra dos navegadores”. Não vem ao caso contar essa história toda aqui, mas caso você tenha interesse, é só clicar nesse link, para assistir a um documentário bem legal do Discovery sobre o tema (antigo, mas ainda assim legal).

A grande questão é, essa guerra dos navegadores fez com que o Internet Explorer ficasse sempre uma passo atrás das tecnologias mais atuais e pior ainda, para nosso terror, o IE vem nativo no Windows, ou seja, além ter muitas incompatibilidades o IE foi por muito tempo o navegador mais utilizado do mercado, pelo menos dentro das empresas, o que fazia a gente ser quase obrigado a dar suporte para ele.

Tudo bem que isso mudou com a popularidade do Chrome e do Firefox e, principalmente, com o aumento dos acessos a internet via Mobile (que hoje já supera os acessos via Desktop). Porém, isso não resolveu o problema. A maioria das empresas ainda usava IE. Motivo? Acredito eu que custos para atualizar as plataformas ou questões de licença, algo por ai…

Então, mesmo sabendo que a maioria das pessoas iria acessar o site por um navegador recente, nós desenvolvedores (e as vezes o cliente) tínhamos a consciência de que uma parte do público iria acessar nossos sistemas pelo IE e isso geraria algum tipo de erro, seja no layout, no Javascript, ou algo do tipo.

Ou seja, a gente basicamente tinha que escolher entre gastar horas fazendo gambiarras para tornar tudo meio que compatível ou simplesmente ignorar esse pessoal e seguir em frente (mas nem sempre isso era uma opção).

Ok, você deve estar pensando, ‘o que o Visual Studio Code tem a ver com isso?’, a resposta para mim é simples, o Vs Code é da Microsoft, é gratuito, Open Source e o mais importante, é uma ferramenta MUITO boa!

‘Tá, até ai legal, mas o que uma coisa tem a ver com a outra?’, a resposta é novamente simples, o Vs Code não é só uma ferramenta, é um reposicionamento da Microsoft, uma resposta para a comunidade web se redimindo do anos de atrasos causados pela empresa, uma mensagem, que diz claramente que eles não vão mais ficar um passo atrás como antes.

O principal motivo que me faz ter essa opinião é o fato do Visual Studio Code ser Open Source, isso mostra que a Microsoft está antenada e atenta as exigências da comunidade. Ou seja, por anos eles manterão os seus produtos travados, quadrados e muito caros! E agora, não só liberaram gratuitamente uma ferramenta de qualidade, como incentivaram a comunidade a ir lá, mudar o código fonte e fazer melhorias! Quer algo mais compatível com o espirito da Internet do que isso!?   

‘Mas eaí, agora posso programar sem me preocupar em dar suporte para o IE? ele funciona tão bem como os outros navegadores?’. Bom, talvez outros desenvolvedores tenha uma visão diferente da minha, porém, eu não programo mais me preocupando com isso! Até porque, a Microsoft encerrou o suporte para os IEs 8, 9 e 10 em 2016, ou seja, os novos PC ou os que foram atualizados já vem no mínimo com um navegador decente! E os que não fizeram isso, representam uma porcentagem muito pequena para tirar meu sono!

Isso não quer dizer que você pode sair por ai usando tudo que existe de novo e esperar que todo navegador responda da mesma forma! Isso, infelizmente tá longe de mudar! Os navegadores, e não só o IE, ainda possuem recursos incompatíveis entre si. Então sempre que tiver com dúvida se pode ou não usar algo, da uma olhadinha nesse site: caniuse.com, digite o nome do recurso, exemplo ‘flexbox’ e veja a compatibilidade entre os navegadores e, principalmente, como corrigir isso para os que não dão suporte.

Principais características do Visual Studio Code           

O Visual Studio Code possui um monte de coisas legais, e outras nem tanto. Porém, vou focar aqui nas principais características deixando algumas coisas não tão importante de lado. 

Uma coisa muito importante a falar sobre o Visual Studio Code é que, assim como o Sublime Text 3, ele não é considerado uma IDE e sim um editor de texto! É muito comum confundir um com o outro, visto que o limite das duas ferramentas estão cada vez mais estreitos, principalmente se você usa plugins. Porém, podemos dizer que uma IDE é um pouco mais robusta e possui muito mais recursos que um editor de texto. Mas, sinceramente, na maioria dos casos, basta instalar alguns plugins que tanto o Sublime quando o Vs Code ficam tão bons quanto qualquer IDE!

Outro ponto a levar a em consideração é que o Visual Studio é uma ferramenta e o Visual Studio Code outra totalmente diferente! ‘Mas qual a  diferenças?’ Vamos falar um pouco disso então, só para deixar tudo bem claro!

Primeiro, Vs Code é grátis e o Visual Studio é pago e muito bem pago se quer saber!

O Visual Studio, diferente do Vs Code, é sim considerado uma IDE e tem nativamente recursos muito mais avançados que o Vs Code.

O Visual Studio Code é muito mais funcional e indicado para quem é front-end, apesar de ter um bom suporte para PHP. Já o Visual Studio, mesmo sendo multi-linguagem é mais indicado para C#, .NET entre outras linguagem mais robustas.

O Visual Studio Code é multiplataforma, já o Visual Studio até pouco tempo atrás só rodava no Windows e recentemente expandir o suporte para o MacOS porém, sem previsões para atender a galera do Linux.

Enfim, existe mais diferenças entre as duas plataformas, mas se a gente for entrar mais a fundo nisso, seria preciso um artigo inteiro separado! Então vamos mudar de assunto e focar agora nas características positivas e nas negativas do Visual Studio Code!    

Características POSITIVAS do Visual Studio Code

Ele é Open Source, ou seja, se você tem o conhecimento necessário, pode modificar a plataforma de acordo com seus desejos! E caso não tenha, fique tranquilo que, muita gente tem e isso faz com que muitos plugins legais apareçam por ai, alguns dos quais vou falar já já!

Ele é grátis! Diferente do seu maior concorrente, o Sublime Text, o Visual Studio Code é gratuito, você não precisa pagar nada, nunca para utilizar!

É multiplataforma, não importa se você usa Windows, Mac ou Linux, o Vs Code roda em qualquer uma dessas plataforma sem nenhum problema

Integração direta com o GIT, eu sei que nem todos usam GIT, mas para quem precisa, ter isso integrado no editor é uma “mão na roda”

Características NEGATIVAS do Visual Studio Code

Assim como seu concorrente, o Visual Studio Code não possui uma interface para configuração, todas as alterações são feitas por texto, usando a marcação da linguagem JSON. Para quem é familiarizado, consegue tirar de letra! Porém, já para quem não esta… Para fins de salvar algumas vidas e horas de pesquisa, na sessão desse artigo onde falo sobre as configurações do Visual Studio Code eu vou deixar o código da minha configuração atual. 

Algumas linguagens e frameworks ainda não tem a sintaxe totalmente compatíveis. Isso faz com que as vezes a ferramenta marque um erro onde não existe. Porém, isso não afeta o funcionamento do seu código, visto que esses erros são apenas um indicativo visual da plataforma.

Funções e configurações do Visual Studio Code

Então vamos ao que realmente interessa: um guia prático e quase absolutamente completo, sobre como configurar o Visual Studio Code e suas principais funções. 

Esse vídeo é exatamente o mesmo que está lá no começo do vídeo, então se você já viu ele, não precisa ver de novo! A não ser que você queira, claro… 

Minhas configurações

See the Pen jzMLwQ by Carlos Sabo Cantanzaro (@wtricks) on CodePen.

Baixe a fonte Fira Code clicando aqui

Expandindo o Visual Studio Code com Plugins

Finalmente chegamos a etapa final do nosso artigo, se você chegou até aqui é porque está familiarizado com o uso do Visual Studio Code e está apenas procurando uma forma de deixado ainda mais poderoso.

Como eu já falei dos plugins no vídeo, vou deixar aqui apenas uma lista com os principais plugins que eu uso. (Se quiser ver novamente no vídeo, é só ir lá no minuto 34)

Plugins normais:

  • beautfy
  • Apache Conf
  • Git History
  • CSS Auto Prefix
  • IntelliJ IDEA
  • IntelliSense for CSS Class name in HTML
  • JavaScript and TypeScript IntelliSense
  • Path Intellisense
  • PHP IntelliSense
  • Scss IntelliSense
  • Sort JSON Objects
  • XML Tools

Temas:

  • Material Icon Theme (Uso atualmente)
  • Material Theme
  • Monokai Pro
  • Theme Bear (uso atualmente)
  • Theme Panda

Considerações finais

Chegamos as considerações finais e aqui, mais do que tudo eu quero deixar a minha opinião sobre o Visual Studio Code e seus principais concorrentes.

Bom, para começo, como eu disse anteriormente, eu usei o Visual Studio Code, criei um projeto com ele e tenho que disser que a ferramenta respondeu super bem as minhas necessidades. Meu veredito final é que, por ser grátis o Visual Studio Code vale muito a pena!

Ainda na dúvida? Vamos então se umas dessas questões te ajuda…   

‘A ferramenta é perfeita?’. Não, longe disso! Ao tentar usar Vuejs, por exemplo, notei que alguns pontos da sintaxe ficam marcados como se estivessem errados, porém eu sei que está certo! Provavelmente isso é uma incompatibilidade da ferramenta com o EcmaScript. Como eu já disse aqui no artigo, isso não prejudica a execução do código e tenho certeza que esse problema vai ser corrigido. Mas, sinceramente, eu tenho toque e odeio quando o código fica marcado como errado!

Vale a pena trocar o Sublime Text pelo Visual Code Studio?’. Tá ai uma coisa que só quem pode responder é você que vai usar a ferramenta, então vou dar minha opinião! Eu penso que da para trocar tranquilamente, porém, para coisas simples como editar algo dentro de um arquivos isolado, etc… Ainda prefiro o Sublime! Não é nem por uma questão de qualidade, é por habito mesmo! Então se você estiver empenhado a usar o Visual Studio Code, é mais uma questão de adaptação e habito do que de de recursos entre as plataformas.

‘O Visual Studio Code é a melhor IDE atual?’. Como eu disse anteriormente, ele não é considerado IDE e sim editor de código fonte. Mas respondendo a pergunta, acho que ele é umas das melhores ferramentas atuais do mercado, ainda mais por ser multiplataforma. O que manda aqui, como disse anteriormente é seus próprios gostos e necessidades!

‘Marvel ou DC?’. Marvel, sem dúvidas.

E pergunta final: ‘Carlos, você usa o Visual Studio Code?’. Claro!! Que não…

Bom pessoal, como deu para ver nesse artigo bem tendencioso, eu realmente gosto muito do Visual Studio Code! Mas como eu disse a “IDE” perfeita é uma questão de gosto e necessidade. Mas, acima disso tudo, eu diria que a “IDE” perfeita é a que você sabe usar!

Eu, por força do habito ou por preguiça de mudar, tenho minha IDE do coração e não mudo faz muito tempo: o PhpStorm (mais pra frente, e se você quiserem, falo dele).

Então, respondendo a pergunta, para meus projetos uso o PhpStorm, principalmente pelo suporte que ele tem a RESTFull API, gerenciamento de tarefas, terminal integrado, Code Linter, e entre outras coisas. E para edições simples, continuo usando o Sublime Text 3, não porque ele é melhor, mas porque já realmente to acostumado!

E para finalizar esse artigo que tenho quase certeza que quase ninguém leu até o final, eu gostaria de novamente afirmar que, mesmo eu não suando o Visual Studio Code, eu vejo ele com bons olhos e recomendo o mesmo, caso você esteja procurando uma alternativa gratuita.

Espero que tenha gostado desse artigo! Caso tenham alguma correção ou sugestão por favor deixe nos comentários!

PARTICIPE DA DISCUSSÃO