Paramètres de qualité du code par langue dans Visual Studio Code

Dans les articles précédents, j’ai un peu parlé de Visual Studio Code, et bien que j’aie essayé une variété d’autres éditeurs, je reviens toujours à cet IDE particulier.

Au fil du temps, il a beaucoup mûri, continue de le faire et permet de nombreuses personnalisations, en particulier pour ceux d’entre nous qui travaillent avec PHP, Sass, JavaScript et, plus généralement, WordPress.

Si vous utilisez des linters, cependant, vous constaterez que l’une des choses dont chacun parlera est la quantité d’espaces qui devrait exister avant une ligne de code donnée.

Donc, si vous utilisez Visual Studio Code, ce sont les extensions et les paramètres que je recommande pour vous assurer que votre code est à la hauteur des outils de qualité de code que vous utilisez.

Qualité du code par langue

Tout d’abord, les extensions que je recommande à chaque personne d’installer – du moins si vous travaillez avec les langages ci-dessus – incluent les éléments suivants :

• ESLint. Intègre ESLint dans VS Code. (Si vous êtes nouveau sur ESLint, consultez la documentation .)
• PHPCS qui intègre les normes de codage PHP (définies dans les préférences) dans l’IDE.
• WordPress Toolbox fournit des extraits pour chaque fonction, classe et constante WordPress, avec des conseils de type d’argument et de brèves descriptions jusqu’à WordPress 4.9.4 (au moment de cet article).

Une fois ceux-ci installés, vous pouvez redémarrer votre IDE ou ajouter le code suivant au fichier de préférences avant de le faire. Vous pouvez le faire sur une base globale ou par projet. N’importe quel. J’ai commenté le code pour le rendre aussi facile que possible à suivre.

J’ajouterai également quelques notes en dessous.

{
    // 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"
}

Voilà comment cela fonctionne:

• Pour chaque type de langage, vous pouvez définir certains paramètres tels que tabSize et s’il faut ou non autoIndent en créant une définition dans le fichier JSON.
• Pour ce faire, faites précéder la définition du suffixe de fichier du langage ou, dans certains cas (comme JavaScript), du nom du langage.

Le code au bas du fichier, les paramètres généraux de l’éditeur sont fournis en tant que suppléments que vous voudrez peut-être inclure. Par exemple, j’aime couper tout l’espace de fin, suggérer des définitions PHP de base et un ensemble de normes de codage lorsque je travaille sur un projet.

Ce sont des choses qui sortent généralement du cadre de ce projet (mais j’en ai discuté dans d’autres articles ). Mais cela reste suffisant pour démarrer avec un niveau de qualité de code supérieur par langue à ce qui est proposé par défaut.