{"id":2584,"date":"2021-09-13T19:14:41","date_gmt":"2021-09-14T02:14:41","guid":{"rendered":"https:\/\/coderpad.io\/?post_type=doc&#038;p=2584"},"modified":"2025-09-10T10:44:49","modified_gmt":"2025-09-10T17:44:49","slug":"editeur-de-code","status":"publish","type":"doc","link":"https:\/\/coderpad.io\/fr\/resources\/docs\/interview\/pads\/code-editor\/","title":{"rendered":"Editeur de code"},"content":{"rendered":"<p>La plateforme Interview offre un syst\u00e8me de gestion de l'information riche en fonctionnalit\u00e9s. <a href=\"https:\/\/app.coderpad.io\/sandbox\" target=\"_blank\" rel=\"noreferrer noopener\">environnement d'\u00e9dition de code<\/a> pour que votre candidat puisse y travailler.&nbsp;<\/p>\n\n\n\n<p>Nous soutenons <a href=\"https:\/\/coderpad.io\/languages\/\">plus de 60 langages de programmation<\/a> et ont des biblioth\u00e8ques et des cadres diff\u00e9rents int\u00e9gr\u00e9s par langage, et la fonctionnalit\u00e9 de base de notre \u00e9diteur est disponible pour chaque langage de programmation (sauf indication contraire).<\/p>\n\n\n\n<p>Nous fournissons \u00e9galement un support am\u00e9lior\u00e9 avec une meilleure compl\u00e9tion automatique et d'autres fonctionnalit\u00e9s d'\u00e9dition pour les langues suivantes :<\/p>\n\n\n\n<div class=\"wp-block-columns\">\n<div class=\"wp-block-column\" style=\"flex-basis:33.34%\">\n<ul class=\"wp-block-list\">\n<li>Ruby<\/li>\n\n\n\n<li>Python 3<\/li>\n\n\n\n<li>JavaScript<\/li>\n\n\n\n<li>Java<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column\" style=\"flex-basis:33.34%\">\n<ul class=\"wp-block-list\">\n<li>C<\/li>\n\n\n\n<li>C++<\/li>\n\n\n\n<li>C Sharp<\/li>\n<\/ul>\n<\/div>\n\n\n\n<div class=\"wp-block-column\" style=\"flex-basis:33.33%\">\n<ul class=\"wp-block-list\">\n<li>Swift<\/li>\n\n\n\n<li>Kotlin<\/li>\n\n\n\n<li>TypeScript<\/li>\n<\/ul>\n<\/div>\n<\/div>\n\n\n\n<p>Fonctionnalit\u00e9s de l'\u00e9diteur de code :<\/p>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><nav aria-label=\"Table des mati\u00e8res\"><ul><li class=\"\"><a href=\"#autocomplete\">Autocompl\u00e9tion<\/a><ul><\/ul><\/li><li class=\"\"><a href=\"#multi-cursor\">Multi-curseur<\/a><ul><\/ul><\/li><li class=\"\"><a href=\"#duplicate-lines\">Lignes en double<\/a><\/li><li class=\"\"><a href=\"#code-folding\">Pliage du code<\/a><\/li><li class=\"\"><a href=\"#error-highlighting\">Mise en \u00e9vidence des erreurs<\/a><\/li><li class=\"\"><a href=\"#right-click-options\">Options de clic droit<\/a><\/li><li class=\"\"><a href=\"#command-palette\">Palette de commande<\/a><\/li><li class=\"\"><a href=\"#run-code-snippets\">Ex\u00e9cutez vos snippets<\/a><\/li><li class=\"\"><a href=\"#frontend-backend-multi-file-layout\">Mise en page multi-fichiers pour le frontend et le backend<\/a><ul><li class=\"\"><a href=\"#prettify\">Embellir<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>Pour lancer ou ex\u00e9cuter votre code \u00e0 tout moment, il suffit de cliquer sur le bouton <strong>Run<\/strong> dans le coin sup\u00e9rieur gauche ou utiliser le raccourci clavier : <kbd>\u2318<\/kbd> + <kbd>entr\u00e9e<\/kbd> OU <kbd>\u2318<\/kbd> + <kbd>S<\/kbd> pour iOS ou <kbd>CTRL<\/kbd> + <kbd>entr\u00e9e<\/kbd> OU <kbd>CTRL<\/kbd> + <kbd>S<\/kbd> pour Windows.<\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"autocomplete\">Autocompl\u00e9tion<\/h2>\n\n\n\n<p>Pour utiliser l'autocompl\u00e9tion, il suffit de commencer \u00e0 taper et l'\u00e9diteur fera des suggestions :<\/p>\n\n\n\n<p>Faites d\u00e9filer les suggestions \u00e0 l'aide des fl\u00e8ches haut et bas pour trouver le code que vous recherchez. Ensuite, cliquez sur <code>Tab<\/code> ou <code>Entrez<\/code> pour accepter la suggestion et demander \u00e0 Interview de remplir le code.<\/p>\n\n\n\n<p>Par d\u00e9faut, l'autocompl\u00e9tion se d\u00e9clenche lorsque <code>.<\/code> est enfonc\u00e9. Vous pouvez \u00e9galement utiliser <code>Ctrl + Espace<\/code> pour lancer l'autocompl\u00e9tion \u00e0 tout moment.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/image-38.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"676\" height=\"327\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/11\/image-38.png\" alt=\"Un exemple d&#039;autocompl\u00e9tion, l&#039;extrait de code &quot;myArray&quot; est affich\u00e9 et le menu d\u00e9roulant d&#039;autocompl\u00e9tion s&#039;est ouvert avec le premier \u00e9l\u00e9ment \u00e9tant &quot;at&quot;.\" class=\"wp-image-24196\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/11\/image-38.png 676w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/11\/image-38-300x145.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/11\/image-38-18x9.png 18w\" sizes=\"auto, (max-width: 676px) 100vw, 676px\" \/><\/a><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"auto-close-brackets\"><strong>Supports \u00e0 fermeture automatique<\/strong><\/h3>\n\n\n\n<p>Interview permet de fermer automatiquement les symboles connexes, tels que les parenth\u00e8ses, les crochets et les guillemets.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>\u2705 Pour aider \u00e0 r\u00e9duire les bugs potentiels, cette fonctionnalit\u00e9 est activ\u00e9e par d\u00e9faut.<\/p>\n<\/blockquote>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video height=\"352\" style=\"aspect-ratio: 806 \/ 352;\" width=\"806\" autoplay controls loop muted src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/08\/autoclosemp4.mp4\"><\/video><\/figure>\n\n\n\n<p>La liste compl\u00e8te des symboles qui se fermeront automatiquement est la suivante :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>[]<\/code> - Supports<\/li>\n\n\n\n<li><code>{}<\/code> - Accolades boucl\u00e9es<\/li>\n\n\n\n<li><code>()<\/code> - Parenth\u00e8se<\/li>\n\n\n\n<li><code>\"\"<\/code> - Double guillemets<\/li>\n\n\n\n<li><code>''<\/code> - Guillemets simples<\/li>\n<\/ul>\n\n\n\n<p><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"multi-cursor\">Multi-curseur<\/h2>\n\n\n\n<p>La fonctionnalit\u00e9 multi-curseurs vous permet de modifier plusieurs lignes \u00e0 la fois. Cela peut \u00eatre particuli\u00e8rement utile lorsque vous souhaitez apporter la m\u00eame modification \u00e0 plusieurs lignes de code.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"select-cursor-positions-lines-and-sections\">S\u00e9lectionner les positions du curseur, les lignes et les sections<\/h3>\n\n\n\n<p>Le multi-curseur dispose d'un certain nombre de m\u00e9thodes diff\u00e9rentes pour la s\u00e9lection des lignes :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>Alt+Click<\/code> s\u00e9lectionne ou d\u00e9s\u00e9lectionne une ou plusieurs positions du curseur, n'importe o\u00f9 dans le code.<\/li>\n\n\n\n<li><code>Alt+Shift+Clic<\/code> et glisser permet de s\u00e9lectionner plusieurs lignes contigu\u00ebs \u00e0 la fois.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video autoplay controls loop muted src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/03\/cursor_position.mp4\"><\/video><\/figure>\n\n\n\n<p>Cette m\u00e9thode de s\u00e9lection multi-lignes s'ajoute aux autres m\u00e9thodes, puisqu'il suffit de maintenir la touche de modification enfonc\u00e9e lors d'un clic actif de la souris pour s\u00e9lectionner une nouvelle ligne.<\/p>\n\n\n\n<p>Gr\u00e2ce \u00e0 cela, vous pouvez m\u00eame d\u00e9filer au milieu de la s\u00e9lection des lignes.<\/p>\n\n\n\n<p>Si vous avez s\u00e9lectionn\u00e9 des lignes adjacentes, mais que vous vous rendez compte par la suite que vous avez oubli\u00e9 une ligne que vous vouliez ajouter, vous pouvez utiliser cette m\u00e9thode pour l'ajouter \u00e0 votre liste de lignes s\u00e9lectionn\u00e9es.<\/p>\n\n\n\n<p><code>Alt + Ctrl + Haut\/Bas<\/code> dans Windows ou <code>Option + Shift + Up\/Down<\/code> sous Mac vous permet de s\u00e9lectionner des lignes contigu\u00ebs au-dessus et au-dessous de votre s\u00e9lection actuelle.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video height=\"428\" style=\"aspect-ratio: 862 \/ 428;\" width=\"862\" autoplay controls loop muted src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/08\/multiselectmp4.mp4\"><\/video><\/figure>\n\n\n\n<p><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"duplicate-lines\">Lignes en double<\/h2>\n\n\n\n<p><code>Alt + Shift + Up\/Down<\/code> duplique les lignes sur lesquelles vous \u00eates.<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video height=\"472\" style=\"aspect-ratio: 642 \/ 472;\" width=\"642\" autoplay controls loop muted src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/08\/duplinesmp4.mp4\"><\/video><\/figure>\n\n\n\n<p><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"code-folding\">Pliage du code<\/h2>\n\n\n\n<p>Lib\u00e9rez de l'espace et am\u00e9liorez la lisibilit\u00e9 en masquant temporairement le code \u00e0 l'aide de la fonction <em>pliage de code<\/em>.<\/p>\n\n\n\n<p>Passez la souris sur l'espace entre les num\u00e9ros de ligne et le code. Vous verrez appara\u00eetre des fl\u00e8ches d\u00e9roulantes au d\u00e9but de tous les principaux blocs de code tels que les commentaires, les importations, les classes, les m\u00e9thodes, etc.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/08\/image-34.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"606\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/08\/image-34-1024x606.png\" alt=\"Des fl\u00e8ches vers le bas apparaissent sur les lignes 1, 5 et 8. Les fl\u00e8ches sont dirig\u00e9es vers le bas.\" class=\"wp-image-15352\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-34-1024x606.png 1024w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-34-300x177.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-34-768x454.png 768w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-34.png 1084w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Cliquez sur une fl\u00e8che pour fermer le bloc de code ; cliquez \u00e0 nouveau dessus pour le rouvrir.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/08\/image-35.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"889\" height=\"514\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/08\/image-35.png\" alt=\"Les lignes 1, 5 et 8 ont le code pli\u00e9 et les fl\u00e8ches de la liste d\u00e9roulante sont maintenant dirig\u00e9es vers la droite.\" class=\"wp-image-15354\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-35.png 889w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-35-300x173.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-35-768x444.png 768w\" sizes=\"auto, (max-width: 889px) 100vw, 889px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"error-highlighting\">Mise en \u00e9vidence des erreurs<\/h2>\n\n\n\n<p>Comme d'autres IDE, Interview met en \u00e9vidence les erreurs au fur et \u00e0 mesure que vous les commettez en les soulignant en rouge. Les lignes jaunes signalent les avertissements.<\/p>\n\n\n\n<p>Passez la souris sur les lignes rouges pour obtenir plus d'informations sur l'erreur.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/03\/img_621e6d802224f.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/03\/img_621e6d802224f.png\" alt=\"Il existe une m\u00e9thode qui n&#039;accepte qu&#039;un seul argument. Dans l&#039;instanciation de la m\u00e9thode, deux m\u00e9thodes sont ajout\u00e9es, et la seconde est soulign\u00e9e par une ligne d&#039;erreur rouge.\" style=\"width:800px;height:310px\"\/><\/a><\/figure>\n<\/div>\n\n\n<p><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"right-click-options\">Options de clic droit<\/h2>\n\n\n\n<p><code>Cliquez \u00e0 droite sur<\/code> ouvre une bo\u00eete de dialogue contenant des outils courants, des options de navigation dans le code et un acc\u00e8s \u00e0 la palette de commandes.&nbsp;<\/p>\n\n\n\n<p>Si vous utilisez l'un des langages de support am\u00e9lior\u00e9, vous voyez une liste d'options li\u00e9es \u00e0 la navigation dans le code si le curseur se trouve sur une classe, un objet, une m\u00e9thode ou une fonction :<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/08\/image-36.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"717\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/08\/image-36.png\" alt=\"Le menu du clic droit pour une langue prise en charge est affich\u00e9 et commence par &quot;Go to definition&quot; et se termine par &quot;command palette&quot;. \" class=\"wp-image-15356\" style=\"width:570px;height:538px\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-36.png 760w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-36-300x283.png 300w\" sizes=\"auto, (max-width: 760px) 100vw, 760px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p>Si vous utilisez une langue de support non am\u00e9lior\u00e9e, il n'y a pas d'options de navigation :<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/08\/image-37.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"833\" height=\"574\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/08\/image-37.png\" alt=\"Le menu du clic droit pour une langue non prise en charge s&#039;affiche et commence par &quot;modifier toutes les occurrences&quot; et se termine par &quot;palette de commandes&quot;. \" class=\"wp-image-15358\" style=\"width:625px;height:431px\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-37.png 833w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-37-300x207.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-37-768x529.png 768w\" sizes=\"auto, (max-width: 833px) 100vw, 833px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"command-palette\">Palette de commande<\/h2>\n\n\n\n<p><code>Clic droit<\/code> et s\u00e9lectionnez <strong>Palette de commande<\/strong>ou appuyez sur <code>F1<\/code> sur votre clavier.<\/p>\n\n\n\n<p>La palette de commande permet d'acc\u00e9der \u00e0 de nombreuses commandes du pad et \u00e0 leurs raccourcis clavier correspondants.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full is-resized\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/08\/image-38.png\" target=\"_blank\" rel=\"noopener\"><img loading=\"lazy\" decoding=\"async\" width=\"846\" height=\"334\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2022\/08\/image-38.png\" alt=\"La liste d\u00e9roulante de la palette de commandes est affich\u00e9e avec l&#039;\u00e9l\u00e9ment de menu &quot;Ajouter le curseur au-dessus&quot; en surbrillance.\" class=\"wp-image-15360\" style=\"width:635px;height:251px\" srcset=\"https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-38.png 846w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-38-300x118.png 300w, https:\/\/coderpad.io\/wp-content\/uploads\/2022\/08\/image-38-768x303.png 768w\" sizes=\"auto, (max-width: 846px) 100vw, 846px\" \/><\/a><\/figure>\n<\/div>\n\n\n<p><br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"run-code-snippets\">Ex\u00e9cutez vos snippets<\/h2>\n\n\n\n<p>Il peut arriver que vous ne souhaitiez pas ex\u00e9cuter tout le code dans l'\u00e9diteur, mais plut\u00f4t une seule fonction ou m\u00e9thode.<\/p>\n\n\n\n<p>Vous pouvez le faire en mettant en \u00e9vidence le code que vous souhaitez ex\u00e9cuter, puis en cliquant sur le bouton <strong>Run<\/strong> en haut de l'\u00e9diteur ou en utilisant le bouton <kbd>\u2318<\/kbd> + <kbd>entr\u00e9e<\/kbd> OU <kbd>\u2318<\/kbd> + <kbd>S<\/kbd> (Mac) \/ <kbd>CTRL<\/kbd> + <kbd>entr\u00e9e<\/kbd> OU <kbd>CTRL<\/kbd> + <kbd>S<\/kbd> (Windows) :<\/p>\n\n\n\n<figure class=\"wp-block-video aligncenter\"><video height=\"782\" style=\"aspect-ratio: 1600 \/ 782;\" width=\"1600\" controls src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2023\/05\/codesnippet.mp4\"><\/video><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"frontend-backend-multi-file-layout\">Mise en page multi-fichiers pour le frontend et le backend<\/h2>\n\n\n\n<p>Interview fournit une interface sp\u00e9cifique pour le codage frontend et backend. Vous trouverez plus d'informations sur l'utilisation de cette interface sur <a href=\"https:\/\/coderpad.io\/fr\/ressources\/docs\/entretien\/coussinets-2\/environnement\/#multi-file-frameworks\">la page des langues ici<\/a>.<\/p>\n\n\n\n<p>Pour plus d'informations sur la cr\u00e9ation de questions frontales multi-fichiers, <a href=\"https:\/\/coderpad.io\/fr\/ressources\/docs\/entretien\/banque-de-questions\/creer-une-question\/#creating-multi-file-questions\">consultez ce guide<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"prettify\"><strong>Embellir<\/strong><\/h3>\n\n\n\n<p>Vous pouvez configurer Prettier ou des outils similaires pour formater automatiquement votre code dans les projets multi-fichiers de CoderPad. Pour ce faire, proc\u00e9dez comme suit<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Utilisez le gestionnaire de paquets du langage pour installer la biblioth\u00e8que de formatage de votre choix via le shell in-pad (<em>Note : L'installation via apt-get n'est pas support\u00e9e actuellement.<\/em>).<\/li>\n\n\n\n<li>D\u00e9finir une nouvelle r\u00e8gle dans le <code>.cpad<\/code> pour <code>format<\/code> et sp\u00e9cifiez la commande d'ex\u00e9cution de votre biblioth\u00e8que de formatage, comme suit :<\/li>\n<\/ol>\n\n\n<pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JSON \/ JSON avec commentaires\" data-shcb-language-slug=\"json\"><span><code class=\"hljs language-json shcb-wrap-lines\"><span class=\"hljs-string\">\"format\"<\/span>: {\n\t<span class=\"hljs-attr\">\"label\"<\/span>: <span class=\"hljs-string\">\"Format\"<\/span>,\n\t<span class=\"hljs-attr\">\"commande\"<\/span>: <span class=\"hljs-string\">\"npx prettier src\/ --write\"<\/span>\n}<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Langage du code :<\/span> <span class=\"shcb-language__name\">JSON \/ JSON avec commentaires<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">json<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li>Pour formater, cliquez sur le bouton d'ex\u00e9cution et s\u00e9lectionnez Ex\u00e9cuter le format.<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter is-resized\"><a href=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2025\/07\/img_687a348763151.png\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/d2h1bfu6zrdxog.cloudfront.net\/wp-content\/uploads\/2025\/07\/img_687a348763151.png\" alt=\"Une fen\u00eatre d&#039;\u00e9dition de code avec un code format\u00e9 en JSON pour l&#039;ex\u00e9cution des t\u00e2ches. Le code d\u00e9finit trois t\u00e2ches : &quot;main&quot;, &quot;test&quot;, et &quot;format&quot;, avec les commandes &quot;npm run main&quot;, &quot;npm run test&quot;, et &quot;npx prettier src\/ --write&quot; respectivement. Un menu d\u00e9roulant est ouvert au-dessus du code avec des options : &quot;Run Main&quot;, &quot;Run Tests&quot;, et &quot;Run Format&quot;.\" style=\"width:644px;height:auto\"\/><\/a><\/figure>\n<\/div>\n\n\n<p><\/p>\n\n\n\n<p>Par exemple, dans un environnement Javascript ou Typescript, vous pouvez utiliser\u00a0<code>npm install prettier<\/code>puis mettre en place un\u00a0<code>.prettierrc<\/code>\u00a0pour d\u00e9finir les options de formatage<\/p>\n\n\n\n<blockquote class=\"wp-block-quote\">\n<p>La configuration de \u26a0\ufe0fThis peut ne pas \u00eatre disponible pour toutes les langues, car certaines d'entre elles n\u00e9cessitent l'installation d'un paquet au niveau de la racine.&nbsp;<\/p>\n<\/blockquote>","protected":false},"parent":835,"menu_order":2,"template":"","class_list":["post-2584","doc","type-doc","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/coderpad.io\/fr\/wp-json\/wp\/v2\/doc\/2584","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coderpad.io\/fr\/wp-json\/wp\/v2\/doc"}],"about":[{"href":"https:\/\/coderpad.io\/fr\/wp-json\/wp\/v2\/types\/doc"}],"version-history":[{"count":94,"href":"https:\/\/coderpad.io\/fr\/wp-json\/wp\/v2\/doc\/2584\/revisions"}],"predecessor-version":[{"id":43216,"href":"https:\/\/coderpad.io\/fr\/wp-json\/wp\/v2\/doc\/2584\/revisions\/43216"}],"up":[{"embeddable":true,"href":"https:\/\/coderpad.io\/fr\/wp-json\/wp\/v2\/doc\/835"}],"wp:attachment":[{"href":"https:\/\/coderpad.io\/fr\/wp-json\/wp\/v2\/media?parent=2584"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}