VsCode

Como configurar o VSCode para debug de código PHP

Algo essencial para qualquer programador é saber debugar seu código. Nesse post vamos aprender como configurar o Xdebug para trabalhar em conjunto com Visual Studio Code para permitir depuração de código na linguagem PHP.

PHP - Fundamentos
Curso de PHP - Fundamentos
CONHEÇA O CURSO

Como normalmente é feito debug no PHP

A maioria dos desenvolvedores PHP utilizam funções disponíveis dentro da própria linguagem para debugar o código, ao invés de utilizar uma ferramenta de debug como a que vamos conhecer neste post que permite definir pontos de pausa, avançar o código passo a passo e outras ações.

Aqui no blog já falei um pouco dos motivos dos desenvolvedores PHP usarem funções da própria linguagem para debug e também minhas suposições dos motivos disso. Você pode ser nesse post: Funções usadas para debug no PHP.

Debugar código PHP com Xdebug

Debugar código diretamente com as funções da linguagem é uma opção da maioria dos desenvolvedores PHP, porém isso não significa que o PHP não possui ferramentas para permitir o debug completo de código como em outras linguagens.

O Xdebug é uma ferramenta muito poderosa que pode ser instalado como extensão na linguagem de programação PHP e que permite ao desenvolvedor conectar o Editor ou IDE que ele está utilizando para debugar o código PHP.

Configurando o Xdebug no PHP

Primeira coisa que precisamos fazer é instalar a extensão do Xdebug no nosso PHP. Isso pode ser feito conforme o processo mostrado nesse vídeo:

Caso queira acompanhar também como instalamos o PHP do vídeo acima, ensinamos no post: Como instalar o PHP no Windows.

Depois de instalado a extensão, no fim do arquivo php.ini precisamos definir as seguintes configurações para permitir o VS Code conectar ao Xdebug:

[XDebug]
xdebug.remote_enable = 1
xdebug.remote_autostart = 1

Agora basta reiniciar e a parte do PHP está completa.

Configurando Xdebug no VSCode

Primeira coisa que precisamos fazer é instalar a extensão PHP Debug para VSCode desenvolvida por Felix Becker.

Para isso, com editor aberto pressione CTRL + Shift + S e siga os passos abaixo:

  • Procure por xdebug;
  • Selecione a extensão;
  • Verifique se o autor está certo conforme a imagem e clique em instalar.
Desenvolvedor PHP
Formação: Desenvolvedor PHP
Nesta formação você aprenderá todos os conceitos da linguagem PHP, uma das mais utilizadas no mercado. Desde de conceitos de base, até características mais avançadas, como orientação a objetos, práticas de mercado, integração com banco de dados. Ao final, você terá conhecimento para desenvolver aplicações PHP usando as práticas mais modernas do mercado.
CONHEÇA A FORMAÇÃO

Debugando código PHP com Xdebug e Visual studio Code

Com o projeto que deseja degubar aberto, vá no menu Run > Add Configuration, em seguida selecione PHP. Ele vai criar uma pasta chamada .vscode com um arquivo chamado launch.json:

Não é necessário alterar nada no arquivo, basta ir em Run > Start Debugging e os painéis de debug serão mostrados. Basta ir no código, adicionar um breakpoint clicando ao lado esquerdo da linha.

Quando executar seu projeto o VS Code parará no lugar desejado, mostrando os estados das variáveis além das opções de debug:

Prontinho, basta se divertir!!!

Considerações finais

Conhecer novas ferramentas nunca é demais! Apesar da maioria dos desenvolvedores PHP utilizarem as funções da própria linguagem e métodos, como, dd() e dump() de frameworks como Laravel e Symfony respectivamente e isso ser suficiente. É super importante saber que também podemos contar com outras ferramentas como Xdebug e como configurá-lo.

Principais IDEs para desenvolvimento PHP

O que é uma IDE (Ambiente de Desenvolvimento Integrado)?

IDE ou Integrated Development Environment (Ambiente de Desenvolvimento Integrado) é um software que auxilia no desenvolvimento de aplicações, muito utilizado por desenvolvedores, com o objetivo de facilitar diversos processos (ligados ao desenvolvimento), que combinam ferramentas comuns em uma única interface gráfica do usuário (GUI). Neste artigo veremos as principais IDEs para desenvolvimento PHP.

No artigo “O que é uma IDE”, exploramos algumas características, vantagens e desvantagens em sua utilização. De maneira simplificada, podemos dizer que, para o desenvolvedor, é uma forma de criar aplicações de maneira mais rápida, uma vez que estas IDEs auxiliam em todo o processo de desenvolvimento de uma aplicação, provendo diversos benefícios, como a análise de todo o código a ser escrito para identificar bugs causados por um erro de digitação, autocompletam trechos de códigos, e etc.

Abaixo veremos as principais IDEs para desenvolvimento PHP.

PHP - Fundamentos
Curso de PHP - Fundamentos
CONHEÇA O CURSO

Principais IDEs para desenvolvimento PHP

Eclipse

Logo do Eclipse

Lançada em 2001 pela IBM, sobre a licença EPL (Eclipse Public Licence), o Eclipse é uma IDE para desenvolvimento em PHP que também suporta diversas outras linguagens apenas com a instalação de plugins (C/C++, Java, Kotlin, Python, entre outras).

Multiplataforma, é possível realizar seu download em diferentes sistemas operacionais como windows, linux e macOS.

Mesmo sendo muito conhecida para o desenvolvimento Java, o Eclipse possui um projeto chamado “PHP Development Tools“, uma versão da IDE com suporte completo ao PHP, tendo como principais features:

  • Validação de sintaxe;
  • Navegação de código;
  • Formatação de código, dentre outros.

O Eclipse é uma excelente IDE, muito utilizada no mercado. Seu uso facilita a criação de aplicações PHP.

O download do Eclipse poderá ser realizado em seu próprio site, já o download do PHP Development Tools, no site secundário.

WordPress - Criação de Plugins
Curso de WordPress - Criação de Plugins
CONHEÇA O CURSO

PHPStorm

LOGO PHPSTORM

Disponibilizada oficialmente em 2009 pela JetBrains, o PHPStorm é uma das IDEs mais utilizadas por desenvolvedores PHP.

É uma IDE rica de funcionalidades que facilitam a implementação de aplicações PHP. O PHPStorm também provê recursos para ajudar o desenvolvedor, como um editor de código SQL, plugins para JavaScript, entre outros.

Dentre suas principais vantagens, podemos citar:

  • Fornece análise de código;
  • Multiplataforma;
  • Suporta diversos frameworks PHP, como Laravel, Zend Framework;
  • Possui suporte a testes unitários integrado;
  • Suporte para VCS;
  • Possui suporte a bancos de dados SQL;
  • Compatível com o HTML5;
  • Preenchimento de código inteligente;
  • Verificação dinâmica de erros, entre outros.

Além de todas essas vantagens, o PHPStorm conta com desenvolvimento multitecnologias, onde, além do PHP, oferece suporte para CoffeeScript, TypeScript, JavaScript, SQL, HTML/CSS, linguagens de modelo, AngularJS, Node.js e muitas outras.

O download do PHPStorm é feito em seu próprio site, onde é possível acompanhar todas as suas novidades, recursos, suporte e muito mais.

PHP Avançado
Curso de PHP Avançado
CONHEÇA O CURSO

Visual Studio Code

Visual Studio Code

Apesar de ser um editor de textos para desenvolvedores, o Visual Studio Code (ou vscode), é tão completo que é frequentemente confundida como uma IDE.

Criada pela Microsoft, o vscode é um editor de código open source, multiplataforma e com diversos recursos para o desenvolvimento PHP.

Possui suporte nativo ao JavaScript, TypeScript, JSON, HTML, CSS e outras tecnologias, também é possível instalar plugins para melhorar o suporte para outras tecnologias, como o PHP.

Muito utilizado na comunidade, o VScode, mesmo não sendo uma IDE, é tão poderosa quanto.

Para instalar o vscode, é só acessar sua página oficial e realizar seu download.

Desenvolvendo seus projetos com o VS Code Remote Development

Tradicionalmente, quando estamos preparando nosso ambiente de desenvolvimento local, acabamos investindo boa parte de tempo configurando esse ambiente, com tarefas como instalar SDKs, servidores de aplicação, linguagens e banco de dados. Dependendo do tamanho da sua aplicação e das quantidades de dependências, fazer essa configuração manualmente pode demorar ainda mais, além de ser propenso a falhas.

Pensando nesse tipo de cenário, pode ser interessante configurar todo seu ambiente de desenvolvimento em máquina virtuais ou containers Docker para não precisar sempre repetir essas operações e auxiliar na preparação do ambiente de desenvolvimento para um novo membro do time, por exemplo.

Embora seja uma abordagem muito útil, rodar ambientes de desenvolvimento em máquinas virtuais ou containers, dependendo do sistema operacional que você esteja utilizando, pode resultar numa experiência não tão agradável do que utilizar uma IDE diretamente no host da sua máquina.

Vendo que esse cenário de ambientes em containers tem se tornado bastante popular, a Microsoft lançou uma extensão para o VS Code com o objetivo de melhorar a experiência e reduzir as diferenças entre um ambiente de desenvolvimento local e remoto. Essa extensão de chama Remote Development, e vamos conhecer como ela funciona.

O Remote Development Pack

O VS Code é um editor de código open-source mantido pela Microsoft muito utilizado atualmente. Ele é desenvolvido para funcionar em Linux, Windows e MacOS, e graças a suas inúmeras extensões ele acaba suportando grande parte das principais stacks atuais, desde Javascript, C#, PHP, Pyhton, até Java e ferramentas de DevOps, como Terraform.

Essas extensões podem fornecer diversas funcionalidades para o VS Code, desde integrar seu ambiente com um debugger de código, integrar com sistemas de controle de código (git, mercurial e svn), até integração com containers Docker. Dentre essas inúmeras extensões, temos um pack de extensões mantidas pela Microsoft chamada Remote Development.

Extensões do Remote Development Pack

Esse pack acompanha três extensões: Remote WSL, Remote SSH e Remote Containers. Cada uma delas te permite acessar o sistema de arquivos de um sistema remote e utilizá-lo como se você estivesse trabalhando localmente na sua máquina. É possível instalar individualmente cada extensão, assim se você não precisa de suporte ao WSL você pode instalar as outras extensões.

Todos os processos executados pela sua aplicação e seu código fonte ficam armazenados dentro do sistema remoto. Para ter acesso a todas essas ferramentas, o VS Code Remote configura no sistema remoto um servidor, que será responsável por controlar os processos iniciados pelo VS Code no seu sistema local, bem como instalar extensões específicas do seu workspace, como suporte a alguma linguagem ou debuggers.

Na figura abaixo temos diagrama da documentação do Remote Development que mostra como é a integração entre o sistema remoto e seu sistema local:

Arquitetura do Remote Development

Vamos conhecer em seguida cada uma dessas extensões.

Containers

Com a extensão de containers instalada, o VS Code irá executar seu projeto dentro de containers. Ele irá utilizar um Dockefile dentro do diretório .devcontainer e o arquivo devcontainer.json com as configurações de como o VS Code deve iniciar seu container.

Antes de mais nada, preciso que o Docker esteja instalado e rodando no nosso sistema. As seguintes versões do Docker são suportadas pela extensão:

  • Windows: Docker Desktop 2.0+ com Windows 10 Pro ou Enterprise. (Docker Toolbox não é suportado.)
  • macOS: Docker Desktop 2.0+.
  • Linux: Docker 18.06+ e Docker Compose 1.21+

Seu container também precisa rodar com uma distribuição x86_64 suportada:

  • Debian 8+
  • Ubuntu 16.04+
  • CentOS / RHEL 7+
  • Alpine Linux
Docker - Fundamentos
Curso de Docker - Fundamentos
CONHEÇA O CURSO

Atendendo esses requisitos, vamos criar um projeto de exemplo.

Primeiro, vamos clonar um projeto exemplo para ser utilizado com containers. Vou utilizar o seguinte repositório de um projeto desenvolvido em Pyhton.

https://github.com/microsoft/vscode-remote-try-python

Desenvolvedor Python
Formação: Desenvolvedor Python
Aprenda os principais conceitos do Python (uso de variáveis, estruturas condicionais e estruturas de decisão), como trabalhar com orientação à objetos (métodos, construtores, destrutores, classes, herança, polimorfismo e duck-typing), estruturas de dados (Listas, Filas, Pilhas, Árvores Binárias, Dicionários, Conjuntos, Tabelas de Espalhamento e Mapas), banco de dados relacionais (DB API e SQLAlchemy) e como criar aplicações desktop com o Kivy.
CONHEÇA A FORMAÇÃO

Depois de clonado esse projeto em um diretório local, vamos iniciar o VS Code com Remote Containers. Após instalar as extensões, repare um ícone verde no canto inferior esquerdo do VS Code. Com ele você pode iniciar uma sessão remota com o projeto desejado:

Nova sessão com Remote Development

No nosso caso, vamos selecionar a opção Remote-Containers: Open Folder in Container e selecionar o diretório que clonamos o repositório. Isso irá abrir uma nova janela conectada ao nosso ambiente remoto:

Nova sessão conectada ao container

Repare que nessa nova janela o ícone verde do canto esquerdo mostra algumas informações adicionais. Caso você esteja utilizando uma conexão remota, você verá o tipo da conexão remota e o nome do projeto que estamos rodando no container. Esse container já vem preparado para você executar seu projeto, inclusive configurado para utilizar com o debugger do VSCode.

Debug com container

No menu lateral, basta você definir os breakpoints no seu código e iniciar o modo debug. Toda a configuração de mapeamento de portas é feito no arquivo devcontainer.json, assim você pode acessar diretamente do navegador na sua máquina o container que está em execução.

Essa integração também acontece com o terminal integrado do VSCode. Ao abrir o terminal, ao invés de abrir a linha de comando do sistema local, você estará acessando a linha de comando do container, podendo executar todas as ferramentas instaladas no seu container.

SSH

Com a extensão SSH é possível acessar ambientes remotos através de um túnel SSH. Pode ser utilizado em um ambiente de desenvolvimento num servidor de desenvolvimento com uma configuração de Hardware mais potente, em um ambiente mais próximo ao de produção, ou até mesmo um Vagrant configurado na sua máquina local.

Como requisitos, é preciso ter instalado na sua máquina local um cliente compatível com OpenSSH e no seu servidor ter um servidor SSH rodando em um dos sistemas abaixo:

  • Debian 8+
  • Ubuntu 16.04+
  • CentOS/RHEL 7+
  • Raspbian Stretch/9+

Temos também suporte experimental para:

Para acessar e configurar o túnel é preciso configurar um usuário SSH para essa configuração. Você pode criar um arquivo de configuração SSH e chaves SSH para a autenticação. O VS Code permite que você configure seu arquivo de configuração do SSH, geralmente localizado em ~/.ssh/config no Linux e macOS e %USERPROFILE\.ssh\config no Windows.

Abaixo temos um exemplo de um arquivo de configuração do SSH. Modifique ele de acordo com o seu ambiente:

Host host-remoto
    User usuario-remoto
    HostName ip-ou-fqdn-do-host

Host host-remoto-autenticacao-chave
    User usuario-remoto
    HostName ip-ou-fqdn-de-outro-host
    IdentityFile ~/.ssh/id_rsa-remote-ssh

Depois de configurado seu ambiente, na barra lateral temos um explorer dos nossos ambientes remotos, logo no início temos os servidores SSH configurados.

Servidores SSH configurados

A partir daí, da mesma forma que fizemos com a extensão de Containers, podemos abrir uma nova sessão remota com SSH e selecionar uma pasta do servidor para podermos trabalhar. Ao abrir o terminal integrado por exemplo, ao invés de utilizar o terminal local, você já estará utilizando uma sessão SSH dentro do servidor.

Windows Subsystem for Linux (WSL)

Por último, com a extensão do WSL, é possível executar um projeto dentro do WSL e alterar os arquivos diretamente pelo VS Code, sem a necessidade de utilizar o compartilhamento de arquivos entre o Windows e o WSL.

Utilizando essa extensão é a melhor forma de utilizar seu ambiente de desenvolvimento no WSL 2, sendo que seu sistema de arquivos não é compartilhável diretamente com o ambiente local. Assim você pode fazer uso da performance de disco que o WSL 2 te entrega.

Ao clicar novamente no ícone verde do canto inferior esquerdo é possível abrir uma nova janela do VS Code com acesso ao sistema de arquivos da sua distribuição no WSL.

Ao abrir essa nova janela, será instalado um agente dentro do WSL que permite a conexão com o VS Code. O ícone verde indicará o nome da sua distribuição que o VS Code está conectado. Ao abrir um diretório você navegará no sistema de arquivos do WSL.

Vá até o diretório em que tenha um projeto salvo. Nesse caso, tenho salvo aqui no WSL o projeto que foi utilizado no artigo Criando um ambiente de desenvolvimento PHP com WSL. Ao navegar no diretório do projeto, todos os arquivos daquele diretório estão acessíveis.

Abrir diretório

Arquivos no WSL

O agente que é instalado no WSL permite uma melhor integração com o VS Code a partir do WSL também, como por exemplo, dentro do WSL abrir qualquer diretório que você esteja navegando utilizando o comando code .. A partir do VS Code é possível utilizar o terminal integrado com acesso direto dentro do WSL.

Conclusão

Vimos aqui como utilizar a extensão Remote Development do VS Code. Com ela podemos utilizar ambientes de desenvolvimento remoto com uma experiência bem próxima de um ambiente local, com a vantagem de não precisar investir horas, até mesmo dias, configurando nosso ambiente local para começar a desenvolver.

Na documentação da Microsoft é possível consultar mais informações e configurações mais avançadas para cada uma das extensões. O link se encontra aqui.

O que vocês acharam dessa extensão? Deixem a sua opinião nos comentários, e até mais!

Principais editores de código para desenvolvimento

Infinitas são as possibilidades na hora de escolher um editor de texto para utilizar no desenvolvimento dos seus projetos. Sendo assim, neste artigo veremos alguns editores de texto e suas principais características.

Brackets

Interface Brackets

Desenvolvido pela Adobe Systems, o Brackets é um editor de texto que facilita a criação de páginas web, mantendo seu foco principal no desenvolvimento web. Software livre e de código aberto, atualmente é mantido no GitHub sobre a licença MIT pela adobe e qualquer outro desenvolvedor que queira contribuir com suas melhorias. É um editor de texto escrito em JavaScript, CSS e HTML.

Atualmente encontra-se na versão 1.14 e possui disponibilidade de download nos sistemas operacionais Linux, Windows e Mac.

Dentre suas vantagens e características podemos citar:

  • Personalizável por meio de extensões;
  • Editores expandidos: permite visualizar trechos de código utilizados em outros arquivos;
  • Live Preview: Garante a visualização instantânea de alterações ao mesmo tempo que são executadas;
  • Suporte nativo a pré-processadores.

O download da ferramenta pode ser feito acessando no próprio site da Brackets.

Em sua página é possível contribuir, acessar seu suporte, blog, entre outras opções para te ajudar ainda mais na escolha deste editor.

Java - Orientação a objetos
Curso de Java - Orientação a objetos
CONHEÇA O CURSO

Sublime Text

Interface Sublime Text

Desenvolvido em Python, o Sublime Text é um ferramenta que visa a simplicidade e facilidade de uso. Lançado em 2008, é um editor de texto multiplataforma e proprietário que, dentre diversas características, podemos citar:

  • Comunidade ativa;
  • Extensões baseadas em Python;
  • Coloração de sintaxe personalizável;
  • Pré Visualização do código-fonte;
  • Autocomplete.

O download da ferramenta pode ser feita no próprio site do Sublime Text, assim como acompanhar suas novidades, fórum e encontrar seu suporte.

VSCode (Visual Studio Code)

Interface VSCode

Criado pela Microsoft, o Visual Studio Code é um editor de texto open source, multiplataforma e gratuito com foco na construção de aplicações web.

Além de contar com uma comunidade extremamente ativa e suporte principalmente para a ASP.Net e Node.js., podemos listar como vantagens:

  • Autocomplete de código;
  • Navegação facilitada entre arquivos;
  • IntelliSense: Conclusões inteligentes com base em tipos de variáveis, definições de função e módulos importados;
  • Depuração de código diretamente do editor;
  • Suporte nativo ao Git;
  • Tarefa em execução;
  • Extensível e personalizável.

Para baixar a ferramenta, basta acessar o site do Visual Studio, onde você encontrará sua documentação, blog, extensões e muito mais.

NotePad++

Interface NotePad++

Ideal para iniciantes, o NotePad++ é um editor de código atrativo pela sua simplicidade.

Disponível somente para usuários Windows, é um editor open source sobre a licença GPL (General Public License) que além de suportar diversas linguagens de programação, traz como vantagens:

  • Autocomplete;
  • Sistema de definição de linguagem;
  • Divisão de tela;
  • Suporte para macros, plugins e muitos outros.

O download da ferramenta assim como visualizar suas características, comunidade, recursos e muito mais, pode ser feito a partir do site do NotePad++

Atom

Interface Atom

Desenvolvido pelo GitHub sobre a licença MIT, o Atom é um editor de código open source, disponível para os sistemas operacionais Windows, Linux e Mac.

Semelhante ao Sublime, porém com alguns diferenciais, o Atom possui integração nativa com o GitHub e consegue trabalhar com comandos Git sem necessidade de nenhuma instalação adicional. Dentre várias características, podemos citar:

  • Editor de código multiplataforma;
  • Comunidade ativa;
  • Gerenciador de pacotes integrado;
  • Autocomplete;
  • Interface simples e amigável;
  • Personalizável.

Para baixá-lo, basta acessar o atom.io onde você também encontará seus temas, documentação, blog e muito mais.

Desenvolvedor PHP
Formação: Desenvolvedor PHP
Nesta formação você aprenderá todos os conceitos da linguagem PHP, uma das mais utilizadas no mercado. Desde de conceitos de base, até características mais avançadas, como orientação a objetos, práticas de mercado, integração com banco de dados. Ao final, você terá conhecimento para desenvolver aplicações PHP usando as práticas mais modernas do mercado.
CONHEÇA A FORMAÇÃO

© 2004 - 2019 TreinaWeb Tecnologia LTDA - CNPJ: 06.156.637/0001-58 Av. Paulista, 1765, Conj 71 e 72 - Bela Vista - São Paulo - SP - 01311-200