Hoje trago uma dica sobre aquele, que na minha opinião, apesar de ainda saber muito pouco sobre programação, é o melhor editor de código. Estou a falar do Visual Studio Code e, após algumas semanas a utilizador este editor de código, posso dizer que foi aquele que mais gostei de usar.

Como referi, esta é apenas a minha opinião, sendo que tu podes preferir outro editor de código, mas vou explicar neste artigo as razões que levaram à escolha deste editor.

Visual Studio Code – o meu editor de código preferido!

Assim que instalei o Visual Studio Code o primeiro aspecto que gostei foi o facto do Emmet vir já incluindo, não sendo necessário instalar extension/package para usufruir das funcionalidades desta ferramenta..

A tua pergunta poderá ser: mas afinal o que tem o Emmet?

O Emmet permite-te escrever s por exemplo html:5 e assim que deres um tab teres a estrutura do HTML, sendo muito mais rápido do que escrever linha a linha. Ou ainda ou então, escrever ul>li*5 e com um tab irão aparecer no teu código HTML. Convenhamos um ul com 5 li’s, é bem melhor do que inserir linha a linha!

Visual Studio Code, existe melhor editor de código!
Visual Studio Code, existe melhor editor de código!

Mas as funcionalidades do Visual Studio Code não se ficam por aqui. O Visual Studio Code (tal como outros editores) permite-te criar os teus próprios snippets (atalhos). Por exemplo, criei uma snippet e em vez de estar a escrever <?php … ?> basta escrever php e dar um tab e este código aparecerá. Parece magia, não é?

Outra funcionalidade que adorei no Visual Studio Code foi o “Auto Save”, ou seja, em vez de estar sempre a fazer CTRL + S para guardar, com o Visual Studio Code a gravação do trabalho é automática. Bem mais prático!

O Visual Studio Code traz já integrado o Git, algo que ainda não uso mas poderei vir a usar. Outra funcionalidade que por enquanto ainda não uso é o debugging.

A abrangência a nível de linguagens que o Visual Studio Code suporta é enorme, sendo elas: C++, ASP.NET, PHP, Python, Java, HTML, CSS, PHP, JavaScript, entre muitas outras linguagens.

Se estás habituado a usar outro editor e já estás familiarizado com os atalhos desse editor, o Visual Studio Code deixa-te usar esses mesmos atalhos, mostrando na janela inicial de “Welcome” a possibilidade de “Install keyboard shortcuts”, onde consta uma lista com os  -editores: Vim, Sublime, Atom e a opção outros.

Além disso, podes personalizar o teu ambiente de várias formas, seja com temas, escolher os ícones, entre outras opções.

Eu descobri algumas extensions ou packages (como preferires chamar-lhes) que me facilitaram muito a vida. Vou deixar aqui a lista daquelas que estou a usar neste momento e que sem as quais já não passo!

Visual Studio Code – 5 Extensions essenciais!

"IntelliSense for CSS class names in HTML"

Visual Studio Code, existe melhor editor de código!

Por exemplo, quando estou a preencher um <i> com um ícone seja ele do Font Awesome ou do Material Design Icon, em vez de estar sempre a ir ao site ver a lista, encontrei um package que me carrega as class’s dos CSS’s que estou a usar. Por exemplo, quero usar um íconedo Font Awesome, basta escrever fa e dar espaço (na class do <i>) e irá aparecer a lista dos ícones, isto é muito útil. Mas atenção, isto acontece com todas as class’s do CSS, ou seja, os ficheiros CSS que eu coloco no HEADER do site, o package “vai buscar”/carrega as class’s desses ficheiros, estou a falar do “IntelliSense for CSS class names in HTML”, este é sem dúvida o package número 1.

"Beautify"

Visual Studio Code, existe melhor editor de código!

O package número 2 da minha lista é o Beautify. O que ele faz é nada mais nada menos que colocar o teu código todo bonito, para isso basta carregar na tecla F1 escolher a opção “Beautify file” ou “Beautify selection”, a diferença entre estas opções é que podes  correr o “Beautify” no ficheiro todo ou apenas numa seleção.

"Auto Close Tag"

Visual Studio Code, existe melhor editor de código!

O package número 3 é o Auto Close Tag, que como o próprio nome indica, o que ele faz é fechar a tag automaticamente. Por exemplo escrevo <div> e ele vai colocar logo a seguir </div>. Assim garante que nunca te esqueces de fechar nenhuma tag no teu código.

"Auto Rename Tag"

Visual Studio Code, existe melhor editor de código!

Agora, no package número 4, em vez de um Auto Close Tag temos um Auto Rename Tag, que em vez de fechar a tag o que ele faz é renomear a tag. Por exemplo tenho um <div></div> mas agora quero trocar para um <span></span>, para issobasta clicar no início da tag (<div>) e começar a escrever (apagando claro o div) e ao mesmo tempo onde a tag é fechada (</div>) será também alterado. Ou seja, não terás que ir depois ao final da tag renomear, o que é muito prático!

"Path IntelliSense"

Visual Studio Code, existe melhor editor de código!

Para terminar, o meu package número 5 é o Path Intellisense Este package ajuda-te quando queres aceder a ficheiros, ou seja, eu escrevo por exemplo “files/”, assim que eu escrevo a / ele mostra-me a lista de ficheiros nesta pasta e assim ajuda-me também a completar, basta escolher o ficheiro com as setas e depois dar um enter que o nome do ficheiro ficará logo a seguir à /, o que eu considero muito útil.

Para terminar este artigo, deixo-te aqui o que usei para personalizar a minha interface. Para isso instalei o package Material Theme e Material Icon Theme. Com estes dois packages podes escolher o estilo de íconesque queres, a cor das pastas, entre outras funcionalidades. Recomendo vivamente!

Visual Studio Code, existe melhor editor de código!

Deixar uma resposta