Utilisation des paramètres utilisateur dans Visual Studio Code

Si vous n’avez pas lu le post de la semaine dernière (et que vous êtes membre du site), alors je vous exhorte à le faire maintenant car celui-ci reprend exactement là où le précédent s’était arrêté.

En bref, nous allons commencer à parler de la configuration de Visual Studio Code pour le développement WordPress professionnel. Bien sûr, cela soulève une question : qu’est-ce que le développement WordPress professionnel ?

Si vous demandez à dix personnes différentes, vous obtiendrez probablement 8 à 10 réponses différentes ; cependant, je le définirais comme l’utilisation de pratiques professionnelles de développement de logiciels dans le contexte de WordPress.

Naturellement, non? Mais qu’est-ce que cela implique ?

De tête, je pense à :

• En utilisant des outils de gestion des dépendances appropriés tels que Composer, NPM ou Yarn,
• Débogage à l’aide de points d’arrêt (sur var_dump et echo),
• Savoir formater du code selon un standard donné (PSR dans le cas où j’utiliserai),
• Structure organisationnelle du dossier,
• Utiliser des éléments tels que Sass, JavaScript, etc. pour faciliter le développement

Mais avant d’aborder tout cela, je pense qu’il est important de configurer l’IDE de manière à ce qu’il ait l’air bien, qu’il fonctionne bien avec la manière dont nous le souhaitons et que nous comprenions comment cela fonctionne afin que nous puissions l’ajuster davantage au fur et à mesure que le le besoin se fait sentir.

Donc, dans l’article d’aujourd’hui, nous allons examiner exactement cela : comprendre comment Visual Studio Code gère les paramètres et proposer une liste d’options de configuration qui vous aideront à rendre votre expérience aussi solide que possible.

Paramètres utilisateur dans Visual Studio Code

Avant de commencer, je vous recommande de télécharger Fira Code et d’installer la police sur le système d’exploitation de votre choix. Bien qu’il existe de nombreuses autres polices (comme Source Code Pro) qui sont également agréables, j’ai trouvé que Fira Code était l’une de mes préférées, en particulier avec ses ligatures (mais plus à ce sujet momentanément).

C’est ce que vous allez voir dans les captures d’écran tout au long de cette série.

1 Comprendre les paramètres

Tout d’abord, notez que Visual Studio Code possède un fichier par défaut qu’il utilise pour les paramètres de ses projets. Vous le remarquerez si vous allez dans le  menu Code> Préférences (ou tout ce qui est similaire à votre système d’exploitation.

En bref, tout est défini dans un fichier JSON. C’est là que ça devient amusant: vous pouvez personnaliser ce fichier en remplaçant essentiellement ce qu’il fournit en utilisant un fichier de paramètres utilisateur qu’il fournit.

Et la bonne chose est que bien qu’il remplace ce que propose Visual Studio, l’IDE reviendra toujours aux paramètres par défaut qui l’accompagnent.

Dans cet article particulier, je vais examiner simplement la définition des paramètres de l’éditeur. Dans les prochains articles, cependant, nous verrons comment travailler avec PHP, les normes de codage, etc.

2 Configuration de vos paramètres

Pour ce post, je vais supposer que vous avez un projet ouvert. Il peut s’agir d’un nouveau projet ou d’un projet existant. Indépendamment de cela, ce que je vais offrir s’appliquera toujours.

Deuxièmement, je vais faire des suggestions en fonction du type de travail que je fais le plus souvent. Bien que je recommande ces paramètres pour d’autres et bien que nous fassions de petits ajustements (par exemple, certains linters ne veulent pas d’espace à travers lequel passer toute cette série sur l’IDE, ce sont les choses les plus générales utilisées pour aider à démarrer).

Lorsque vous ouvrez le fichier pour la première fois, il sera vide. N’oubliez pas qu’il doit être écrit dans le bon JSON, sinon cela ne fonctionnera pas (et encore moins maintenant à cause d’une erreur).

Voici un exemple de ce que j’ai dans les paramètres de mon éditeur :

{
    // 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,

    // ...
}

Chacun devrait être explicite; cependant, notez que editor.fontLigatures est défini sur true puisque j’utilise Fira Code. Cela changera certaines choses comme = en une ligature.

Cela rend l’expérience beaucoup plus agréable lors de l’écriture de code.

3 projets de partage

Enfin, une des choses que je trouve utiles est d’avoir des projets dans un endroit qui peut être partagé entre plusieurs machines. Cela peut être fait via Google Drive, Dropbox ou iCloud Drive.

Quel que soit le cas, je recommande de faire ce qui suit :

1. En gardant vos projets, supposez qu’ils ne sont pas sensibles, bien sûr, dans un service de partage de fichiers,
2. Stockez chaque fichier d’espace de travail avec les fichiers de projet dans ledit service.

De cette façon, si vous choisissez d’utiliser plusieurs machines, vous devriez disposer des fichiers source dont vous avez besoin pour travailler sur chaque projet. Mais je ne vais pas insister sur le point ici. J’en ai parlé dans un post précédent, et le processus sonne toujours.

J’ai simplement pensé que le signaler serait une bonne décision au cas où ce n’est pas quelque chose que vous avez envisagé.

Examiner les normes de codage

Évidemment, cet article n’est pas extrêmement technique, mais nous allons commencer à implémenter des normes de codage dans le prochain article, et cela nécessitera un peu de travail avec Composer ainsi qu’avec les paramètres utilisateur.

Et pour nous assurer que nous sommes en mesure de le faire, il est logique de jeter les bases pour comprendre le fonctionnement des paramètres afin que nous puissions continuer à les modifier à l’avenir.