Comment formater du code avec Prettier dans Visual Studio Code

Introduction

La mise en forme du code de manière cohérente est un défi, mais les outils de développement modernes permettent de maintenir une cohérence à travers le code de votre équipe de manière automatique.

Dans cet article, vous allez configurer Prettier pour formater automatiquement votre code dans Visual Studio Code, également connu sous le nom de VS Code.

À des fins de démonstration, voici le code d’exemple que vous allez formater:

const name = "James";

const person ={first: name
}

console.log(person);

const sayHelloLinting = (fName) => {
console.log(`Hello linting, ${fName}`)
}

sayHelloLinting('James');

Si vous êtes familier avec la mise en forme du code, vous remarquerez peut-être certaines erreurs:

• A mix of single and double quotes.
• La première propriété de l’objet person devrait être sur sa propre ligne.
• L’instruction console à l’intérieur de la fonction devrait être indentée.
• Vous pouvez aimer ou ne pas aimer les parenthèses optionnelles entourant le paramètre de la fonction fléchée.

Table des matières

• Utilisation de la commande « format document »
• Mise en forme du code au moment du sauvegarde
• Modification des paramètres de configuration de Prettier
• Création d’un fichier de configuration Prettier

Conditions préalables

Pour suivre ce tutoriel, vous avez besoin de :

• Télécharger et installer Visual Studio Code.
• Pour utiliser Prettier dans Visual Studio Code, vous devrez installer l’extension. Pour ce faire, recherchez Prettier - Code Formatter dans le panneau des extensions de VS Code. Si vous l’installez pour la première fois, vous verrez un bouton installer au lieu du bouton désinstaller indiqué ici :

Étape 1 – Utilisation de la commande Formater le document

Avec l’extension Prettier installée, vous pouvez maintenant l’utiliser pour formater votre code. Pour commencer, explorons l’utilisation de la commande Formater le document. Cette commande rendra votre code plus cohérent avec un espacement formaté, un retour à la ligne et des guillemets.

Pour ouvrir le palette de commandes, vous pouvez utiliser COMMAND + SHIFT + P sur macOS ou CTRL + SHIFT + P sur Windows.

Dans le palette de commandes, recherchez format puis choisissez Format Document.

Vous pouvez ensuite être invité à choisir quel format utiliser. Pour ce faire, cliquez sur le bouton Configurer:

Ensuite, choisissez Prettier – Code Formatter.

Votre code est maintenant formaté avec espacement, retour à la ligne et guillemets cohérents:

const name = "James";

const person = { first: name };

console.log(person);

const sayHelloLinting = (fName) => {
  console.log(`Hello linting, ${fName}`);
};

sayHelloLinting("James");

Cela fonctionne également sur les fichiers CSS. Vous pouvez transformer quelque chose avec une indentation, des accolades, des nouvelles lignes et des points-virgules incohérents en code bien formaté. Par exemple:

body {color: red;
}
h1 {
  color: purple;
font-size: 24px
}

Sera reformaté comme:

body {
  color: red;
}
h1 {
  color: purple;
  font-size: 24px;
}

Maintenant que nous avons exploré cette commande, regardons comment cela peut être mis en œuvre pour s’exécuter automatiquement.

Étape 2 – Formatage du code à la sauvegarde

Jusqu’à présent, vous avez dû exécuter une commande pour formater votre code manuellement. Pour automatiser ce processus, vous pouvez choisir une option dans VS Code pour que vos fichiers soient formatés automatiquement lorsque vous enregistrez. Cela garantit également que le code non formaté ne soit pas vérifié dans le contrôle de version.

Pour modifier cette option, appuyez sur COMMAND + , sur macOS, ou CTRL + , sur Windows pour ouvrir le menu Paramètres. Une fois le menu ouvert, recherchez Editor: Format On Save et assurez-vous que cette option est cochée:

Une fois cela configuré, vous pouvez écrire votre code normalement et il sera automatiquement formaté lorsque vous enregistrerez le fichier.

Étape 3 – Modifier les paramètres de configuration de Prettier

Prettier fait beaucoup de choses pour vous par défaut, mais vous pouvez également personnaliser les paramètres.

Ouvrez le menu Paramètres. Ensuite, recherchez Prettier. Cela affichera tous les paramètres que vous pouvez modifier:

Voici quelques-uns des paramètres les plus courants:

• Guillemet simple – Choisissez entre guillemets simples et doubles.
• Semi – Choisissez si vous souhaitez inclure des points-virgules à la fin des lignes.
• Largeur de tabulation – Spécifiez le nombre d’espaces que vous souhaitez que la tabulation insère.

Le revers de l’utilisation du menu de paramètres intégré dans VS Code est qu’il ne garantit pas la cohérence entre les développeurs de votre équipe.

Étape 4 — Création d’un fichier de configuration Prettier

Si vous modifiez les paramètres dans votre VS Code, quelqu’un d’autre pourrait avoir une configuration complètement différente sur leur machine. Vous pouvez établir une mise en forme cohérente au sein de votre équipe en créant un fichier de configuration pour votre projet.

Créez un nouveau fichier appelé .prettierrc.extension avec l’une des extensions suivantes:

• yml
• yaml
• json
• js
• toml

Voici un exemple de fichier de configuration simple utilisant JSON:

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

Pour plus de détails sur les fichiers de configuration, consultez les Documentation Prettier. Après avoir créé l’un de ceux-ci et l’avoir ajouté à votre projet, vous pouvez vous assurer que chaque membre de l’équipe suit les mêmes règles de formatage.

Conclusion

Avoir un code cohérent est une bonne pratique. Cela est particulièrement bénéfique lorsqu’on travaille sur un projet avec plusieurs collaborateurs. L’adoption d’un ensemble de configurations aide à la lisibilité et à la compréhension du code. Plus de temps peut être consacré à résoudre des problèmes techniques difficiles plutôt qu’à lutter contre des problèmes résolus comme l’indentation du code.

Prettier garantit la cohérence de la mise en forme de votre code et rend le processus automatique.