Qualidade de código por configurações de idioma no código do Visual Studio

Last updated Nov 9, 2022

Em postagens anteriores, falei um pouco sobre o Visual Studio Code e, embora tenha tentado vários outros editores, continuo voltando a esse IDE específico.

Com o tempo, ele amadureceu um pouco, continua a fazê-lo e permite muita personalização, especialmente para aqueles que trabalham em PHP, Sass, JavaScript e, de maneira mais geral, WordPress.

Se você usar algum linter, no entanto, descobrirá que uma das coisas sobre as quais cada um falará é a quantidade de espaço em branco que deve existir antes de uma determinada linha de código.

Portanto, se você estiver usando o Visual Studio Code, essas são as extensões e as configurações que recomendo para garantir que seu código esteja de acordo com as ferramentas de qualidade de código que você está usando.

Qualidade do código por idioma

Primeiro, as extensões que eu recomendo que todas as pessoas instalem – pelo menos se você estiver trabalhando com os idiomas acima – incluem o seguinte:

ESLint. Integra o ESLint ao VS Code. (Se você é novo no ESLint, verifique a documentação .)
PHPCS que integra os padrões de codificação PHP (definidos nas preferências) no IDE.
O WordPress Toolbox fornece trechos para cada função, classe e constante do WordPress, com dicas de tipo de argumento e breves descrições até o WordPress 4.9.4 (no momento deste post).

Depois de instalados, você pode reiniciar seu IDE ou adicionar o seguinte código ao arquivo de preferências antes de fazer isso. Você pode fazer isso globalmente ou por projeto. Qualquer um está bom. Eu comentei o código para torná-lo o mais fácil possível de seguir.

Eu também adicionarei algumas notas abaixo dele.


{
    // Tab Spacing per language.
    "[php]": {
      "editor.tabSize": 4,
      "editor.autoIndent": true
    },

    "[scss]": {
      "editor.tabSize": 2,
      "editor.autoIndent": true
    },

    "[javascript]": {
      "editor.tabSize": 2,
      "editor.autoIndent": true
    },

    // General Editor Settings
    "files.trimTrailingWhitespace": true,
    "php.suggest.basic": true,
    "php.validate.executablePath": "/usr/local/bin/php",
    "php.validate.run": "onType",
    "phpcs.enable": true,
    "phpcs.executablePath": "/usr/local/bin/phpcs",
    "phpcs.standard": "PSR2"
}

É assim que funciona:

Para cada tipo de idioma, você pode definir determinadas configurações, como tabSize e se deve ou não autoIndent criando uma definição no arquivo JSON.
Para fazer isso, preceda a definição com o sufixo do arquivo da linguagem ou, em alguns casos (como JavaScript), o nome da linguagem.

O código na parte inferior do arquivo, as configurações gerais do editor são fornecidos como alguns extras que você pode querer incluir. Por exemplo, gosto de cortar todo o espaço à direita, sugerir definições básicas de PHP e um conjunto de padrões de codificação para quando estou trabalhando em um projeto.

Essas são coisas que geralmente estão fora do escopo deste projeto (mas já discuti em outros posts ). Mas ainda é suficiente começar com um nível mais alto de qualidade de código por idioma do que o oferecido imediatamente.

Fonte de gravação: tommcfarlin.com