1 ano de VS Code - Extensões, Configs e dicas para quem está migrando do PHPStorm

Russell Bega — Tue, 02 Mar 2021 02:09:03 +0000

Como um usuário do PHPStorm, migrar para o VS Code foi um "sofrimento" devido a estar acostumado a utilizar uma IDE completíssima como a da JetBrains para praticamente um editor de texto simples como é o VS Code após instalação.

Quando instalei o VS Code esse artigo me ajudou muito a ter o básico de extensões instaladas e depois com o passar do tempo fui adicionando umas e removendo outras.

A minha ideia aqui é conseguir ajudar outras pessoas, que como eu precisam passar por essa migração mas só encontram o "pacote básico". Hoje em dia utilizo o VS Code como principal IDE e com certeza valeu a pena a migração.

Meu contexto atualmente:

Programador PHP, a maioria dos projetos utilizam CodeIgniter 3 (padrão MVC), alguns outros em Laravel e alguns outros em React.

PS: Não vou postar as extensões que o VS Code sugere como padrão para coisas simples assim que você abre o arquivo de determinado formato, como formatação, highlight syntax, a não ser que eu utilize algo diferente do normal, ok?

Então bora lá!

→ Extensões

Específicas para o PHP

PHP Intelephense

Essa não é a extensão oficial do Pacote de extensões do VS Code para PHP. Eu não me lembro exatamente o por que eu preferi essa do que a oficial, mas é super importante que você não mantenha as duas ativas ao mesmo tempo pois uma conflita com a outra e o seu auto complete fica "loucasso". Além disso essa extensão possui algumas vantagens caso você opte por assinar a versão Premium, mas não é nada que vá te prejudicar caso não assine.

PHP Debug

Extensão para conseguir conectar o VS Code com o XDebug (aliado com a extensão do Chrome Xdebug Helper), funciona muito bem, nunca tive problemas.

PHPUnit

Extensão para utilizar o PHPUnit direto no VS Code, gosto dela pois é bem simples a configuração para utilizar um host remoto com o Docker para rodar os testes.

PHPDoc Generator

Essa extensão preenche o espaço do hábito de abrir um comentário "/**" acima do nome do método, classe ou variável no PHPStorm e ele já criar o PHPDoc. Com esta extensão é só utilizar o atalho enquanto seleciona o do nome do método, classe ou variável que será adicionado um esboço do PHPDoc pra você, facilita bastante e ajuda a manter o código melhor documentado.

Específicas para o GIT

Git Graph

Para quem é acostumado com o versionamento visual do PHPStorm essa extensão é uma maravilha. Com ela é possível realizar praticamente tudo que se realiza via terminal em um repositório Git porém de forma visual, além de exibir toda a arvore de commits/branchs/remotes.

Gitflow Actions Sidebar

Para quem trabalha com a implementação Gitflow nos seus repositórios essa extensão ajuda muito. Para quem não conhece o Gitflow cuida de toda a parte "logística" dos branchs, separando em diversas categorias, ajudando a tornar o repositório muito mais organizado e fácil de entender o que é cada coisa. Para mais info veja esse site.

Essa extensão adiciona as ações do Gitflow na Sidebar para facilitar a utilização.

GitLens — Git supercharged

Uma das extensões mais completas que existem de Git para o VS Code, ela faz um monteee de coisa, para conseguir explicar o básico precisaria de outro post só pra ela. Eu utilizo ela de uma forma beeeem reduzida pois pra mim ela gera muita "sujeira visual" no editor que no dia a dia que você não precisa ficar consumindo. Como por exemplo, mostrar o tempo todo quem editou a linha que você está com o cursor no momento.

Gerais

Auto Complete Tag (que inclui Auto Close/Rename Tag)

Essa nem tem o que falar, impossível mexer com HTML e não utilizar essas extensões.

Copy Relative Path

Adiciona no menu do explorador de arquivos a opção de copiar o caminho absoluto e relativo do arquivo, adianta muito a vida para importações e mapeamento de caminhos.

Debugger for Chrome

Ótimo para conseguir debugar aplicações JS direto pelo VS Code.

Docker

Para quem não é muito familiarizado em utilizar o Docker via terminal ajuda muito conseguir ver os containers, imagens, etc diretamente pelo VS Code. Essa extensão também adiciona syntax highlight para os arquivos dockerfile e docker-compose.

EditorConfig for VS Code

Adiciona suporte a arquivos .editorconfig ao VS Code, muito bom para quando se trabalha em projetos que diversas outras pessoas também trabalham.

EsLint

Integra o ESLint com o VS Code. Extensão bem completa e ajuda muito na padronização do código entre diversos desenvolvedores.

Flow Language Support

Adiciona suporte a checagem de tipagem estática ao Javascript, muito bom quando se trabalha com Typescript.

Gulp Tasks

Na maioria dos projetos que trabalho utilizamos o Gulp como automatizador de tarefas, essa extensão exibe na sidebar uma lista com as tarefas que aquele projeto possui. Utilizado praticamente para manter tasks de watching rodando sem precisar ficar com um terminal aberto só pra isso.

IntelliSense for CSS class names in HTML

Como o nome diz, essa extensão escaneia seu projeto e adiciona um IntelliSense das classes que ele encontrou, ajuda muito no dia a dia, principalmente para classes customizadas.

Live Share

Extensão para tornar o seu VS Code "colaborativo". Com o aumento de trabalho remoto essa extensão tem ajudado muito quando precisamos compartilhar sessões de Pair Programming ou até mesmo para outros momentos que a colaboração é muito bem vinda.

Local History

Essa extensão mantem um histórico local do seu arquivo, semelhante ao o que o PHPStorm faz. Ajuda muito quando você precisa recuperar alguma versão de arquivo ou algum trecho que não ficou versionado.

Markdownlint

Eu nem sabia que existia um Lint de Markdown, mas depois que passei a utilizar essa extensão confesso que meus documentos .md ficaram bem mais organizados e padronizados hehe.

Path Intellisense

Como o próprio nome já diz, num tem muito o que explicar haha.

REST Client

Essa extensão é sensacional! Substitui o Postman ou Insomnia para envio requisições, porém diretamente de um arquivo de texto que você consegue deixar salvo no seu projeto, versionado, etc. Se ainda não conhece, vale a pena.

→ Configurações (settings.json)

Além das Extensões, outra coisa que faz muita diferença você conseguir dominar são as configurações, sejam elas do VS Code ou das extensões que você instalou.

Vou destacar as que mais me ajudam no dia a dia ok?

Lembrando que aqui são minhas escolhas pessoais, espero te ajudar, mas vale a pena que você brinque com cada uma para que fique mais com a sua cara 😄.

Editor

Se você trabalha com PHP já percebeu que se tentar selecionar a variável o $ não é selecionado automaticamente correto? É exatamente isso que essa linha ajusta.

"editor.wordSeparators": "`~!@#%^&*()-=+[{]}\\|;:'\",.<>/?"

Quem realmente precisa daquele mapinha de navegação no canto da tela?

"editor.minimap.enabled": false,

Exibe uns pontinhos onde tem espaços em branco e uma flechinha onde se tem tabs em branco.

"editor.renderWhitespace": "all",

Exibe os espaços vazios caso eles existam na visualização de diff

"diffEditor.ignoreTrimWhitespace": false,

Go to Location (quando seu código vai te mandar para outro lugar).

Eu não sou fã daquela janelinha que aparece quando você da um ctrl-click no método ou variável, sendo assim mudei tudo pra me levar diretamente para a fonte.

"editor.gotoLocation.multipleDeclarations": "goto",
"editor.gotoLocation.multipleDefinitions": "goto",
"editor.gotoLocation.multipleImplementations": "peek",
"editor.gotoLocation.multipleReferences": "goto",
"editor.gotoLocation.multipleTypeDefinitions": "goto",
"references.preferredLocation": "view",

Preview de arquivos

Outra coisa que não me agradou do VS Code comparado ao PHPStorm é o esquema de "preview" que ele tem do arquivo quando você seleciona na arvore de arquivos. Sendo assim mudei as configs para ficar semelhante ao PHPStorm.

"workbench.editor.enablePreviewFromQuickOpen": false,
"workbench.editor.enablePreview": false,
"workbench.list.openMode": "doubleClick",

Aproveitando, outra config interessante é habilitar para aparecer próximo ao nome do arquivo a pasta que ele está localizado. Neste caso somente o nome da pasta e não o caminho todo.

"workbench.editor.labelFormat": "short",

Abrir projetos em novas janelas

Por padrão, quando você abre um projeto o VS Code sempre utiliza a mesma janela, o que é bem ruim se você precisa trafegar em vários projetos ao mesmo tempo (front e api por exemplo).

"window.openFoldersInNewWindow": "on",

Janela do VS Code com caminho do projeto

No VS Code não é possível adicionar nome ao projeto igual ao PHPStorm, sendo assim se você tem uma estrutura de projetos que a pasta sempre tem o mesmo nome, como por exemplo: cliente/api, cliente2/api, cliente3/api, sua janela sempre vai ser vista como api. Essa config adiciona algumas informações a mais para facilitar o dia a dia.

"window.title": "${activeEditorShort}${separator}${rootPath}",

Explorer

Não manter pastas compactas (quando só tem 1 arquivo dentro da pasta e ela fica com nome reduzido)

"explorer.compactFolders": false,

Não deixar o explorer pulando de um lado pro outro dando foco no arquivo que você esta mexendo no momento.

"explorer.autoReveal": false,

Não ficar confirmando o drag&drop no explorer

"explorer.confirmDragAndDrop": false,

Arquivos

Desabilitar auto salvar dos arquivos. Para quem trabalha com ferramentas de auto reload as vezes o auto salvamento mais atrapalha do que ajuda.

"files.autoSave": "off",

Terminal

Eu utilizo MacOS com zsh de terminal, é possível setar o terminal padrão via

"terminal.integrated.shell.osx": "/bin/zsh",

Também é possível setar a cor padrão do terminal, como eu utilizo tema claro (não me julguem 😂) minhas configs são:

"workbench.colorCustomizations": {
    "terminal.foreground": "#000",
    "terminal.background": "#fff"
},

Javascript

Eu não sei o porque, mas o VS Code parece não ser dar muito bem com ajustar os imports quando você move os arquivos de lugar, sendo assim desabilitei essa tentativa quase sempre falha.

"javascript.updateImportsOnFileMove.enabled": "never",

Local History

Por padrão o Local History salva os históricos dentro do próprio projeto numa pasta gerada pelo plugin, porém além disso ser um problema para o versionamento, pois você vai precisar adicionar essa pasta em todos seus gitignores, também pode ser mais fácil perdê-la num git reset ou algo mais trágico como apagar a pasta do projeto sem querer. Sendo assim é possível configurar para que essa pasta seja colocada em outro lugar. E também manter o histórico somente de arquivos que fazem parte do projeto.

"local-history.path": "~/.vscode-history-DO-NOT-DELETE",
"local-history.absolute": true,
"local-history.daysLimit": 60,
"local-history.enabled": 2, // Only for Workspace
"local-history.maxDisplay": 100,

GitLens

Deixar o GitLens mais "reduzido"

"gitlens.currentLine.enabled": false,
"gitlens.hovers.currentLine.over": "line",
"gitlens.codeLens.enabled": false,
"gitlens.statusBar.enabled": true,
"gitlens.menus": {
    "editor": false,
    "editorGroup": {
        "blame": false,
        "compare": false
    },
    "editorTab": {
        "clipboard": true,
        "compare": true,
        "history": true,
        "remote": true
    },
    "explorer": {
        "clipboard": true,
        "compare": true,
        "history": true,
        "remote": true
    },
    "scm": {
        "authors": true
    },
    "scmGroupInline": {
        "stash": true
    },
    "scmGroup": {
        "compare": true,
        "openClose": true,
        "stash": true
    },
    "scmItem": {
        "clipboard": true,
        "compare": true,
        "history": true,
        "remote": false,
        "stash": true
    }
},

Emmet

Configs adicionais para conseguir utilizar Emmet com React

"emmet.syntaxProfiles": {
    "javascript": "jsx"
},
"emmet.includeLanguages": {
    "javascript": "javascriptreact"
},

ESLint

Eu gosto de utilizar o ESLint com a configuração que ele já tenta resolver tudo ao salvar, assim caso falte alguma coisa boba como vírgula, mudar o tipo de aspas, ele já faz sem eu precisar ficar me preocupando.

"[javascript]": {
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
    }
},
"[javascriptreact]": {
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
    }
},
"[typescript]": {
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
    }
},
"[typescriptreact]": {
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
    }
},

PHP Intelephense

Arquivos para serem ignorados pela extensão, acelerando a indexação

"intelephense.files.exclude": [
    "**/.git/**",
    "**/.svn/**",
    "**/.hg/**",
    "**/CVS/**",
    "**/.DS_Store/**",
    "**/node_modules/**",
    "**/bower_components/**"
],

Versão do ambiente PHP

"intelephense.environment.phpVersion": "7.3.0",

E essas são minhas extensões e configurações após 1 ano utilizando o VS Code no lugar do PHPStorm.

Não é uma migração fácil, principalmente para quem é mais acostumado a utilizar diversas facilidades incorporadas na IDE, porém olhando para trás agora, valeu a pena 😉.

Ficou com alguma dúvida, tem outra extensão ou configuração que eu não falei aqui e você recomenda? Deixa nos comentários!