{"id":1235,"date":"2025-08-24T01:29:23","date_gmt":"2025-08-23T23:29:23","guid":{"rendered":"https:\/\/dyb.fr\/?p=1235"},"modified":"2025-08-24T01:29:23","modified_gmt":"2025-08-23T23:29:23","slug":"config-vscode-appliquer-un-coding-style-avec-les-rulers","status":"publish","type":"post","link":"https:\/\/dyb.eu\/blog\/config-vscode-appliquer-un-coding-style-avec-les-rulers\/","title":{"rendered":"Config VSCode : appliquer un coding style avec les rulers"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Pourquoi un ruler ?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Dans une \u00e9quipe, respecter un <strong>style de code<\/strong> est essentiel.<br>Un des outils simples de VSCode est le <strong>ruler<\/strong> : une ligne verticale qui s\u2019affiche dans l\u2019\u00e9diteur \u00e0 une colonne donn\u00e9e (par ex. 80 caract\u00e8res).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Cela permet de se rappeler <strong>jusqu\u2019o\u00f9 on \u00e9crit par ligne<\/strong> : meilleure lisibilit\u00e9, coh\u00e9rence entre d\u00e9veloppeurs, respect des bonnes pratiques.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Exemple de configuration minimaliste<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Voici une configuration <code>settings.json<\/code> pour VSCode, concentr\u00e9e sur l\u2019essentiel :<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>{\n    \"editor.rulers\": &#91;80],\n    \"workbench.startupEditor\": \"newUntitledFile\",\n    \"git.autofetch\": true,\n    \"editor.detectIndentation\": false,\n    \"editor.renderWhitespace\": \"all\",\n    \"workbench.panel.defaultLocation\": \"right\",\n    \"terminal.integrated.cursorStyle\": \"line\",\n    \"terminal.integrated.fontFamily\": \"monospace\",\n    \"window.menuBarVisibility\": \"toggle\",\n    \"diffEditor.ignoreTrimWhitespace\": false\n}\n<\/code><\/pre>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Explications rapides<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong><code>\"editor.rulers\": [80]<\/code><\/strong><br>Affiche un guide vertical \u00e0 80 colonnes \u2192 id\u00e9al pour garder un code lisible et homog\u00e8ne.<\/li>\n\n\n\n<li><strong><code>\"workbench.startupEditor\": \"newUntitledFile\"<\/code><\/strong><br>VSCode ouvre directement un fichier vide au d\u00e9marrage \u2192 gain de temps, on code tout de suite.<\/li>\n\n\n\n<li><strong><code>\"git.autofetch\": true<\/code><\/strong><br>Met automatiquement \u00e0 jour les infos Git distantes \u2192 on voit toujours l\u2019\u00e9tat r\u00e9el du projet sans fetch manuel.<\/li>\n\n\n\n<li><strong><code>\"editor.detectIndentation\": false<\/code><\/strong><br>Emp\u00eache VSCode d\u2019essayer de \u201cdeviner\u201d les indentations \u2192 l\u2019\u00e9diteur suit vos r\u00e8gles, pas celles d\u00e9tect\u00e9es dans le fichier.<\/li>\n\n\n\n<li><strong><code>\"editor.renderWhitespace\": \"all\"<\/code><\/strong><br>Affiche visuellement espaces et tabulations \u2192 \u00e9vite les erreurs de style invisibles.<\/li>\n\n\n\n<li><strong><code>\"workbench.panel.defaultLocation\": \"right\"<\/code><\/strong><br>Place la console \u00e0 droite plut\u00f4t qu\u2019en bas.<br>\ud83d\udc49 Si on se limite volontairement \u00e0 des lignes de 80 colonnes, mieux vaut garder plus d\u2019espace vertical que horizontal.<br>Cela reste toutefois un <strong>choix personnel<\/strong>, chacun adapte \u00e0 son confort.<\/li>\n<\/ol>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Un style clair, pour toute l\u2019\u00e9quipe<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Mettre en place ces r\u00e8gles simples dans VSCode permet :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>d\u2019avoir un <strong>code plus lisible<\/strong>,<\/li>\n\n\n\n<li>de garantir une <strong>coh\u00e9rence entre d\u00e9veloppeurs<\/strong>,<\/li>\n\n\n\n<li>et d\u2019\u00e9viter les erreurs invisibles (espaces, indentations incoh\u00e9rentes).<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Un petit ajustement dans votre <code>settings.json<\/code>, et vous posez les bases d\u2019un <strong>coding style partag\u00e9<\/strong> dans vos projets.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pourquoi un ruler ? Dans une \u00e9quipe, respecter un style de code est essentiel.Un des outils simples de VSCode est le ruler : une ligne verticale qui s\u2019affiche dans l\u2019\u00e9diteur \u00e0 une colonne donn\u00e9e (par ex. 80 caract\u00e8res). Cela permet de se rappeler jusqu\u2019o\u00f9 on \u00e9crit par ligne : meilleure lisibilit\u00e9, coh\u00e9rence entre d\u00e9veloppeurs, respect [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34],"tags":[33,31,35],"class_list":["post-1235","post","type-post","status-publish","format-standard","hentry","category-dev","tag-dev","tag-tip","tag-vscode"],"_links":{"self":[{"href":"https:\/\/dyb.eu\/blog\/wp-json\/wp\/v2\/posts\/1235","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dyb.eu\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dyb.eu\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dyb.eu\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dyb.eu\/blog\/wp-json\/wp\/v2\/comments?post=1235"}],"version-history":[{"count":0,"href":"https:\/\/dyb.eu\/blog\/wp-json\/wp\/v2\/posts\/1235\/revisions"}],"wp:attachment":[{"href":"https:\/\/dyb.eu\/blog\/wp-json\/wp\/v2\/media?parent=1235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dyb.eu\/blog\/wp-json\/wp\/v2\/categories?post=1235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dyb.eu\/blog\/wp-json\/wp\/v2\/tags?post=1235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}