Trabalhando com configurações de usuário no Visual Studio Code

Se você não leu o post da semana passada (e você é um membro do site), então peço que o faça agora, pois este continua exatamente de onde o anterior parou.

Resumindo, vamos começar a falar sobre como configurar o Visual Studio Code para desenvolvimento profissional do WordPress. Claro, isso levanta uma questão: O que é o desenvolvimento profissional do WordPress?

Se você perguntar a dez pessoas diferentes, provavelmente obterá de 8 a 10 respostas diferentes; no entanto, eu o definiria como o uso de práticas profissionais de desenvolvimento de software no contexto do WordPress.

Naturalmente, certo? Mas o que isso implica?

De cabeça, penso em:

• Usando ferramentas de gerenciamento de dependência adequadas, como Composer, NPM ou Yarn,
• Depuração usando pontos de interrupção (sobre var_dump e echo),
• Saber formatar código usando um determinado padrão (PSR no caso que vou usar),
• Estrutura organizacional do arquivo,
• Usando coisas como Sass, linting JavaScript e assim por diante para facilitar o desenvolvimento

Mas antes de entrar em tudo isso, acho importante configurar o IDE de forma que pareça bom, funcione bem com a maneira que queremos e que entendamos como ele funciona para que possamos ajustá-lo ainda mais surge a necessidade.

Portanto, na postagem de hoje, veremos exatamente isso: Entendendo como o Visual Studio Code gerencia as configurações e uma lista proposta de opções de configuração que ajudarão a tornar sua experiência o mais sólida possível.

Configurações do usuário no código do Visual Studio

Antes de começar, recomendo baixar o Fira Code e instalar a fonte no sistema operacional de sua escolha. Embora existam muitas outras fontes (como Source Code Pro) que também são boas, descobri que Fira Code é uma das minhas favoritas, especialmente com suas ligaduras (mas mais sobre isso momentaneamente).

Isso é o que você verá nas capturas de tela ao longo do restante desta série.

1 Entendendo as configurações

Primeiro, observe que o Visual Studio Code tem um arquivo padrão que ele usa para configurações em seus projetos. Você notará isso se for ao  menu Código > Preferências (ou qualquer outro semelhante ao seu sistema operacional.

Resumindo, tudo é definido em um arquivo JSON. Aqui é onde fica divertido: você pode personalizar esse arquivo essencialmente substituindo o que ele fornece usando um arquivo de configurações do usuário que ele fornece.

E o bom é que, embora substitua o que o Visual Studio oferece, o IDE sempre retornará às configurações padrão que o acompanham.

Neste post em particular, vou simplesmente definir as configurações do editor. Em postagens futuras, porém, veremos como trabalhar com PHP, padrões de codificação e muito mais.

2 Configurando suas configurações

Para este post, vou assumir que você tem um projeto aberto. Este pode ser um novo projeto ou um projeto existente. Independentemente disso, o que vou oferecer ainda se aplicará.

Em segundo lugar, farei sugestões com base no tipo de trabalho que faço com mais frequência. Embora eu recomende essas configurações para outras pessoas e possamos estar fazendo pequenos ajustes (por exemplo, alguns linters não querem espaço ao longo desta série no IDE, essas são as coisas mais gerais usadas para ajudar a começar).

Quando você abrir o arquivo pela primeira vez, ele estará em branco. Lembre-se, deve ser escrito em JSON adequado, caso contrário, não funcionará (e muito menos agora por meio de um erro).

Aqui está um exemplo do que eu tenho nas configurações do meu editor :

{
    // Editor Settings.
    "editor.fontFamily": "Fira Code",
    "editor.fontLigatures": true,
    "editor.fontSize": 13,
    "editor.renderWhitespace": "all",
    "editor.tabSize": 4,
    "editor.insertSpaces": true,
    "editor.detectIndentation": false,
    "editor.formatOnSave": false,

    "files.trimTrailingWhitespace": true,

    // ...
}

Cada um deve ser autoexplicativo; no entanto, observe que tenho editor.fontLigatures definido como true, pois estou usando o Fira Code. Isso mudará certas coisas como = em uma ligadura.

Isso torna a experiência muito mais agradável ao escrever código.

3 Projetos de Compartilhamento

Por fim, uma das coisas que acho útil é ter projetos em um local que possa ser compartilhado entre várias máquinas. Isso pode ser feito via Google Drive, Dropbox ou iCloud Drive.

Seja qual for o caso, recomendo fazer o seguinte:

1. Mantendo seus projetos, suponha que eles não sejam sensíveis, é claro, em um serviço de compartilhamento de arquivos,
2. Armazene cada arquivo de espaço de trabalho junto com os arquivos de projeto no referido serviço.

Dessa forma, se você optar por usar várias máquinas, deverá ter os arquivos de origem necessários para trabalhar em cada projeto. Mas não vou alongar o ponto aqui. Eu discuti isso em um post anterior, e o processo ainda soa.

Eu simplesmente senti que apontar isso seria uma boa jogada, caso não seja algo que você tenha considerado.

Olhando para os padrões de codificação

Obviamente, este post não é extremamente técnico, mas vamos começar a implementar os padrões de codificação no próximo post, e isso exigirá um pouco de trabalho com o Composer, bem como com as configurações do usuário.

E para garantir que podemos fazer isso, faz sentido estabelecer as bases para entender como as configurações funcionam para que possamos continuar a editá-las no futuro.