{"id":40,"date":"2020-11-18T19:52:20","date_gmt":"2020-11-18T18:52:20","guid":{"rendered":"https:\/\/cours.artecom.studio\/nepduweb\/?p=40"},"modified":"2020-11-18T19:52:20","modified_gmt":"2020-11-18T18:52:20","slug":"passer-le-grand-brackets-episode-2","status":"publish","type":"post","link":"https:\/\/cours.artecom.studio\/nepduweb\/2020\/11\/18\/passer-le-grand-brackets-episode-2\/","title":{"rendered":"Passer le grand Brackets – \u00e9pisode 2"},"content":{"rendered":"\n

Maintenant, vous savez comment am\u00e9liorer Brackets pour avoir une coloration syntaxique plus pr\u00e9cise. Mais plus que le th\u00e8me, les extensions ajoutent \u00e0 Brackets des fonctionnalit\u00e9s importantes qui en modifie et en am\u00e9liore le comportement. En voici trois, qui vont nous \u00eatre utile avant de passer en mode projet, pour pouvoir \u00e9diter notre code de mani\u00e8re plus efficace\u2026<\/p>\n\n\n\n

  1. Beautify<\/a><\/strong>, l’embellisseur de code,<\/li>
  2. W3CValidator<\/a><\/strong>, le validateur de code du W3C, mais int\u00e9gr\u00e9 \u00e0 Brackets.<\/li><\/ol>\n\n\n\n

    \u00c0 vos Brackets, pr\u00eat\u00b7e\u00b7s ? Partez !<\/p>\n\n\n\n

    \n\n\n\n

    Beautify<\/em>, pour un code propre et compr\u00e9hensible<\/h3>\n\n\n\n

    Ceci n ‘est qu’un rappel pour celles et ceux d’entre vous qui n’auraient pas r\u00e9ussi la manip en cours; pour les autres, passez directement au point suivant\u2026<\/em><\/p>\n\n\n\n

    Apr\u00e8s avoir tap\u00e9\/effac\u00e9\/retap\u00e9 des dizaines de lignes de code, il arrive que votre code devienne illisible<\/s><\/sub> assez peu lisible. Et un code peu lisible est source d\u2019erreurs sur lesquelles on s\u2019arrache les cheveux (et vous y tenez, \u00e0 vos cheveux, n’est-ce pas?).<\/p>\n\n\n\n

    Ce serait tellement bien s’il existait un truc qui remettait notre code au propre de temps en temps, qu’on s’y retrouve\u2026<\/p>\n\n\n\n

    Et bien ce truc existe, c’est l\u2019extension Beautify<\/strong>.<\/p>\n\n\n\n

    Installation<\/h4>\n\n\n\n
    \"\"<\/figure>\n\n\n\n
    \"\"
    Brackets appara\u00eet dans le menu Modifier<\/figcaption><\/figure><\/div>\n\n\n\n

    Pour l\u2019installer, on passe toujours par le menu Fichiers>Gestionnaire d\u2019extensions<\/strong> dans Brackets<\/strong>, puis on tape Beautify<\/em> dans le champ Rechercher<\/strong>.<\/p>\n\n\n\n

    On l\u2019installe comme on l\u2019a fait pour installer un th\u00e8me (voir la partie Installer un th\u00e8me<\/a> de l’article pr\u00e9c\u00e9dent). L\u2019extension est maintenant active, et elle appara\u00eet tout en bas du menu Modifier<\/strong>.<\/p>\n\n\n\n

    Comment \u00e7a marche ?<\/h4>\n\n\n\n

    Le plus simplement du monde. Vous \u00eates en train de refaire pour la ni\u00e8me fois votre code HTML et \u00e7a ne ressemble plus \u00e0 rien ? Vous avez maintenant trois mani\u00e8res d’acc\u00e9der \u00e0 Beautify<\/strong> pour tout remettre en ordre :<\/p>\n\n\n\n

    1. Allez dans le menu Modifier<\/strong>, cliquez sur Beautify.io<\/a><\/strong> ;<\/li>
    2. ou bien, plus geek, retenez le raccourci-clavier associ\u00e9, pour lancer Beautify<\/strong> sans interrompre votre flux de travail : sur mac, c’est Maj + Cmd + L (et sur PC, j’imagine, Maj+Ctrl+L) ;<\/li>
    3. ou encore, version pousse-bouton<\/em>, cliquez sur la baguette magique en haut \u00e0 droite de la fen\u00eatre de Brackets.<\/li><\/ol>\n\n\n\n

      Ta daaaaa ! Beautify remet en ordre votre code, l\u2019indente correctement, et tout d\u2019un coup, il redevient lisible !<\/p>\n\n\n\n

      \"\"
      sans Beautify<\/figcaption><\/figure><\/div>\n\n\n\n
      \"\"
      Avec Beautify<\/figcaption><\/figure>\n\n\n\n

      V\u00e9rifier son code depuis Brackets<\/h2>\n\n\n\n

      Vous vous souvenez qu’on a parl\u00e9 des validateurs du W3C<\/a>. Maintenant que nous allons entrer en phase de projet, il va devenir obligatoire<\/strong> de v\u00e9rifier la validit\u00e9 de son code au fur et \u00e0 mesure de l’avancement du projet.<\/p>\n\n\n\n

      Mais ce serait tellement mieux de le faire sans avoir \u00e0 sortir de Brackets !<\/p>\n\n\n\n

      Et ben, comme on disait pour les apps chez Apple<\/a>, il<\/em> y a une extension pour \u00e7a<\/em>. Et elle s’appelle W3CValidation.<\/strong><\/p>\n\n\n\n

      Pour l’activer, il suffit de refaire le chemin : Brackets>Fichier>Gestionnaire d’extension>Rechercher: W3C, et d’activer l’application qui s’affiche.<\/p>\n\n\n\n

      Elle s’installe dans le menu Modifier, et son raccourci clavier est une touche de fonction, la touche F9<\/code><\/p>\n\n\n\n

      \n\n\n\n
      1. le tiret-du-bas<\/em> ou underscore<\/em> est facile \u00e0 trouver sur un PC (c\u2019est le tiret du 8), mais parfois m\u00e9connu sur Mac (il faut appuyer sur Maj<\/code>+-<\/code>pour l\u2019obtenir)<\/li><\/ol>\n","protected":false},"excerpt":{"rendered":"

        Maintenant, vous savez comment am\u00e9liorer Brackets pour avoir une coloration syntaxique plus pr\u00e9cise. Mais plus que le th\u00e8me, les extensions ajoutent \u00e0 Brackets des fonctionnalit\u00e9s importantes qui en modifie et en...<\/p>\n","protected":false},"author":2,"featured_media":74,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[10,9,4,15],"tags":[23,17,22,25],"class_list":["post-40","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-a-telecharger","category-outils","category-pduweb","category-tutoriel","tag-beautify","tag-brackets","tag-extensions","tag-w3c-validator"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/cours.artecom.studio\/nepduweb\/wp-content\/uploads\/sites\/2\/2019\/10\/braquet-shimano-route.jpg?fit=800%2C600&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/posts\/40","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/comments?post=40"}],"version-history":[{"count":2,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/posts\/40\/revisions"}],"predecessor-version":[{"id":120,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/posts\/40\/revisions\/120"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/media\/74"}],"wp:attachment":[{"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/media?parent=40"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/categories?post=40"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cours.artecom.studio\/nepduweb\/wp-json\/wp\/v2\/tags?post=40"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}