davidbgk
/
larlet-fr-david-cache
Beobachten 1
Favorisieren 0
Fork 0
Code Releases 0 Aktivität
A place to cache linked articles (think custom and personal wayback machine)
Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
257 Commits
1 Branch
Struktur: e8979a0fc8
Branches Tags
${ item.name }
Erstelle Branch ${ searchTerm }
von „e8979a0fc8“
${ noResults }
larlet-fr-david-cache/cache/cfdfe70dc1d0b6d3a9695c5dd36.../index.html

index.html 28KB
Originalformat Blame Verlauf

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599 
  1. <!doctype html><!-- This is a valid HTML5 document. -->

  2. <!-- Screen readers, SEO, extensions and so on. -->

  3. <html lang=fr>

  4. <!-- Has to be within the first 1024 bytes, hence before the <title>

  5.   See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->

  6. <meta charset=utf-8>

  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->

  8. <!-- The viewport meta is quite crowded and we are responsible for that.

  9.   See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->

  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">

  11. <!-- Required to make a valid HTML5 document. -->

  12. <title>Auto-formatting JavaScript Code Style (archive) — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="https://medium.com/@addyosmani/auto-formatting-javascript-code-style-fe0f98a923b8">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   Auto-formatting JavaScript Code Style (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="https://medium.com/@addyosmani/auto-formatting-javascript-code-style-fe0f98a923b8">Source originale du contenu</a></h3>

  463.     <figure name="46d5" id="46d5" class="graf--figure graf--first"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*KLFQyME1EhxoWNsqk6Od8Q.gif" data-width="1400" data-height="738" data-action="zoom" data-action-value="1*KLFQyME1EhxoWNsqk6Od8Q.gif" src="https://d262ilb51hltx0.cloudfront.net/max/800/1*KLFQyME1EhxoWNsqk6Od8Q.gif"/></div></figure>

  464. 

  465. <h2 name="29c0" id="29c0" class="graf--h2">Auto-formatting JavaScript Code Style</h2>

  466. 

  467. <p name="b239" id="b239" class="graf--p graf--empty"><br/></p>

  468. 

  469. <p name="d206" id="d206" class="graf--p">Today, we’re going to look at the powerful new <strong class="markup--strong markup--p-strong">auto-formatting</strong> feature in <a href="http://jscs.info" data-href="http://jscs.info" class="markup--anchor markup--p-anchor" rel="nofollow"><strong class="markup--strong markup--p-strong">JSCS</strong></a> for automatically applying style guide rules in our scripts. This has been <a href="https://github.com/jscs-dev/node-jscs/issues/516" data-href="https://github.com/jscs-dev/node-jscs/issues/516" class="markup--anchor markup--p-anchor" rel="nofollow">in-development</a> for some time and is in my view, a game changer.</p>

  470. 

  471. <h3 name="61ad" id="61ad" class="graf--h3">JSCS</h3>

  472. 

  473. <p name="aed0" id="aed0" class="graf--p">In a number of the OSS projects we hack on at Google, we love using JSCS<strong class="markup--strong markup--p-strong"> </strong>for linting JS against rules in our style guide. JSCS excels at catching style issues like mixing spaces and tabs, inconsistent quote marks, trailing whitespace &amp; it can enforce several other <a href="http://jscs.info/rules.html" data-href="http://jscs.info/rules.html" class="markup--anchor markup--p-anchor" rel="nofollow">validation rules</a>.</p>

  474. 

  475. <p name="3558" id="3558" class="graf--p">For convenience, JSCS includes presets for the <a href="https://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml" data-href="https://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml" class="markup--anchor markup--p-anchor" rel="nofollow">Google</a>, <a href="https://github.com/felixge/node-style-guide" data-href="https://github.com/felixge/node-style-guide" class="markup--anchor markup--p-anchor" rel="nofollow">Node</a> and <a href="https://contribute.jquery.org/style-guide/js/" data-href="https://contribute.jquery.org/style-guide/js/" class="markup--anchor markup--p-anchor" rel="nofollow">jQuery</a> style guides, amongst others. This makes setup super convenient. Custom configuration can be applied via a <a href="https://github.com/google/web-starter-kit/blob/master/.jscsrc" data-href="https://github.com/google/web-starter-kit/blob/master/.jscsrc" class="markup--anchor markup--p-anchor" rel="nofollow">.jscsrc</a> file and for the projects I work on we usually only require minimal additional tweaking here.</p>

  476. 

  477. <p name="5c5d" id="5c5d" class="graf--p">I generally use JSCS in both my editor (Sublime Text 3) thanks to <a href="https://packagecontrol.io/packages/SublimeLinter-jscs" data-href="https://packagecontrol.io/packages/SublimeLinter-jscs" class="markup--anchor markup--p-anchor" rel="nofollow">SublimeLinter-JSCS</a>:</p>

  478. 

  479. <figure name="7313" id="7313" class="graf--figure"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*uiYye9J142y8fIZGRnufEw.png" data-width="1444" data-height="696" data-action="zoom" data-action-value="1*uiYye9J142y8fIZGRnufEw.png" src="https://d262ilb51hltx0.cloudfront.net/max/800/1*uiYye9J142y8fIZGRnufEw.png"/></div><figcaption class="imageCaption">My theme of choice is Seti UI in case you’re interested</figcaption></figure>

  480. 

  481. <p name="2a0b" id="2a0b" class="graf--p">As well as in my build process thanks to <a href="https://www.npmjs.com/package/gulp-jscs" data-href="https://www.npmjs.com/package/gulp-jscs" class="markup--anchor markup--p-anchor" rel="nofollow">gulp-jscs</a> by <a href="http://github.com/SindreSorhus" data-href="http://github.com/SindreSorhus" class="markup--anchor markup--p-anchor" rel="nofollow">Sindre Sorhus</a>. The CLI works great too if you prefer to use JSCS directly or are using npm scripts/make for your build:</p>

  482. 

  483. <figure name="f800" id="f800" class="graf--figure"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*OnQr3FoHNj4dHwIi7f9FyQ.png" data-width="2114" data-height="934" data-action="zoom" data-action-value="1*OnQr3FoHNj4dHwIi7f9FyQ.png" src="https://d262ilb51hltx0.cloudfront.net/max/800/1*OnQr3FoHNj4dHwIi7f9FyQ.png"/></div></figure>

  484. 

  485. <h3 name="1e26" id="1e26" class="graf--h3">Auto-formatting JS to match a Style Guide. OMG!</h3>

  486. 

  487. <p name="e3e6" id="e3e6" class="graf--p graf--empty"><br/></p>

  488. 

  489. <p name="6934" id="6934" class="graf--p">Validation alone is powerful, but as of <a href="https://github.com/jscs-dev/node-jscs/releases/tag/v1.12.0" data-href="https://github.com/jscs-dev/node-jscs/releases/tag/v1.12.0" class="markup--anchor markup--p-anchor" rel="nofollow">JSCS 1.12.0</a>, the tool now supports <strong class="markup--strong markup--p-strong">automatically</strong> <strong class="markup--strong markup--p-strong">formatting</strong> your code to adhere to your style guide. This is freakin’ amazing and really takes style enforcement to a whole other level. Auto-formatting is available by passing the `-x` flag to JSCS.</p>

  490. 

  491. <figure name="35b8" id="35b8" class="graf--figure"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*qlpIXZBqGXx7GMsk02wD0g.png" data-width="1458" data-height="424" data-action="zoom" data-action-value="1*qlpIXZBqGXx7GMsk02wD0g.png" src="https://d262ilb51hltx0.cloudfront.net/max/800/1*qlpIXZBqGXx7GMsk02wD0g.png"/></div></figure>

  492. 

  493. <p name="f18d" id="f18d" class="graf--p">Thanks go out to Mike Sherov and the rest of the <a href="https://github.com/jscs-dev/node-jscs/graphs/contributors" data-href="https://github.com/jscs-dev/node-jscs/graphs/contributors" class="markup--anchor markup--p-anchor" rel="nofollow">JSCS team</a> for making this possible. I’m extremely excited to see this work land.</p>

  494. 

  495. <figure name="969c" id="969c" class="graf--figure"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*QQf3SVpKD7WRW_Thhg8I7g.gif" data-width="270" data-height="246" src="https://d262ilb51hltx0.cloudfront.net/max/800/1*QQf3SVpKD7WRW_Thhg8I7g.gif"/></div></figure>

  496. 

  497. <p name="5ef1" id="5ef1" class="graf--p">The simplicity of the above demo really doesn’t do the nuance and complexity involved in shipping this feature justice, but we can try a more detailed example in my text editor.</p>

  498. 

  499. <h3 name="ea3f" id="ea3f" class="graf--h3">Auto-formatting JS Code Style in Sublime</h3>

  500. 

  501. <p name="7618" id="7618" class="graf--p graf--empty"><br/></p>

  502. 

  503. <p name="560a" id="560a" class="graf--p">Let’s take the code snippet from earlier, which contained issues like inconsistent indentation, missing spaces after opening brackets and operators sticking to expressions where they shouldn’t.</p>

  504. 

  505. <figure name="951f" id="951f" class="graf--figure"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*YxPlWntHlg4b9QFm-r1Y3A.png" data-width="1302" data-height="364" data-action="zoom" data-action-value="1*YxPlWntHlg4b9QFm-r1Y3A.png" src="https://d262ilb51hltx0.cloudfront.net/max/800/1*YxPlWntHlg4b9QFm-r1Y3A.png"/></div></figure>

  506. 

  507. <p name="ccfb" id="ccfb" class="graf--p">I’m going to use a new Sublime Text plugin called <a href="https://packagecontrol.io/packages/JSCS-Formatter" data-href="https://packagecontrol.io/packages/JSCS-Formatter" class="markup--anchor markup--p-anchor" rel="nofollow"><strong class="markup--strong markup--p-strong">JSCSFormatter</strong></a><strong class="markup--strong markup--p-strong"> </strong>by <a href="https://github.com/TheSavior" data-href="https://github.com/TheSavior" class="markup--anchor markup--p-anchor" rel="nofollow">Eli White</a>, which will automatically fix style guide issues based on your existing JSCS configuration.</p>

  508. 

  509. <h4 name="89d4" id="89d4" class="graf--h4">Setup</h4>

  510. 

  511. <p name="c584" id="c584" class="graf--p">Assuming you have Node and <a href="https://packagecontrol.io/" data-href="https://packagecontrol.io/" class="markup--anchor markup--p-anchor" rel="nofollow">Package Control</a> already installed on your system:</p>

  512. 

  513. <ul class="postList"><li name="3193" id="3193" class="graf--li">Install JSCS globally using npm (`npm install -g jscs`)</li><li name="9b31" id="9b31" class="graf--li">Next, open up the Command Palette in Sublime and type <em class="markup--em markup--li-em">Install Package</em>.</li><li name="7708" id="7708" class="graf--li">When the plugin list displays, search for `jscs format`. Select the entry ‘JSCSFormatter’</li><li name="5249" id="5249" class="graf--li">Install JSCSFormatter. Party!</li></ul>

  514. 

  515. <h4 name="b581" id="b581" class="graf--h4">Usage</h4>

  516. 

  517. <p name="5111" id="5111" class="graf--p">From the Command Palette, we can now just select ‘JSCSFormatter: Format this file’ to automatically format the current file based on the rules specified in your JSCS configuration:</p>

  518. 

  519. <figure name="5411" id="5411" class="graf--figure"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*dHoCZWvu7WEMQC6u4wJhHQ.png" data-width="1618" data-height="720" data-action="zoom" data-action-value="1*dHoCZWvu7WEMQC6u4wJhHQ.png" src="https://d262ilb51hltx0.cloudfront.net/max/800/1*dHoCZWvu7WEMQC6u4wJhHQ.png"/></div></figure>

  520. 

  521. <p name="5d1d" id="5d1d" class="graf--p"><strong class="markup--strong markup--p-strong">BOOM!</strong>:</p>

  522. 

  523. <figure name="ce94" id="ce94" class="graf--figure"><div class="aspectRatioPlaceholder is-locked"><p class="aspect-ratio-fill"/><img class="graf-image" data-image-id="1*rvs5GF0kH1MavpajxX3YRA.png" data-width="1458" data-height="716" data-action="zoom" data-action-value="1*rvs5GF0kH1MavpajxX3YRA.png" src="https://d262ilb51hltx0.cloudfront.net/max/800/1*rvs5GF0kH1MavpajxX3YRA.png"/></div></figure>

  524. 

  525. <p name="ad3d" id="ad3d" class="graf--p">Note: JSCS 1.12.0 includes support for auto-formatting a number of popular rules, including <strong class="markup--strong markup--p-strong">EOF, spacing and indentation validation</strong>. Any augmentation of the AST is not yet supported, however JSCS will eventually support all rules. The other good news is that the internal `token-assert` module makes writing custom autoformatting rules quite trivial.</p>

  526. 

  527. <p name="67a2" id="67a2" class="graf--p">That said, there are still more rules they would love to support and help is always <a href="http://jscs.info/contributing.html" data-href="http://jscs.info/contributing.html" class="markup--anchor markup--p-anchor" rel="nofollow">welcome</a>. Examples of more specific rules that they are interested in adding include disallowing commas before line breaks and disallowing anonymous functions.</p>

  528. 

  529. <h3 name="3483" id="3483" class="graf--h3">Wrapping up</h3>

  530. 

  531. <p name="5b2c" id="5b2c" class="graf--p graf--empty"><br/></p>

  532. 

  533. <p name="91f3" id="91f3" class="graf--p">The <a href="http://jscs.info/overview.html" data-href="http://jscs.info/overview.html" class="markup--anchor markup--p-anchor" rel="nofollow">tooling</a> around JSCS is constantly growing and support has been available for Atom, VIM, WebStorm, Brackets and a number of other editors for a while.</p>

  534. 

  535. <p name="50d1" id="50d1" class="graf--p graf--last">If you haven’t been using JSCS for style validation, hopefully the idea of <strong class="markup--strong markup--p-strong">automatically formatting your source </strong>will make it sweet enough to try out. Thanks once again to the mammoth efforts of the JSCS team for improving developer tooling in this space. Y’all rock.</p>

  536.   </article>

  537. </section>

  538. 

  539. 

  540. <nav id="jumpto">

  541.   <p>

  542.     <a href="/david/blog/">Accueil du blog</a> |

  543.     <a href="https://medium.com/@addyosmani/auto-formatting-javascript-code-style-fe0f98a923b8">Source originale</a> |

  544.     <a href="/david/stream/2019/">Accueil du flux</a>

  545.   </p>

  546. </nav>

  547. 

  548. <footer>

  549.   <div>

  550.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  551.     <p>

  552.       Bonjour/Hi!

  553.       Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>

  554.       Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).

  555.     </p>

  556.     <p>

  557.       Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.

  558.     </p>

  559.     

  560.     <p>

  561.       Voici quelques articles choisis :

  562.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  563.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  564.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  565.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  566.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  567.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  568.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  569.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  570.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  571.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  572.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  573.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  574.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  575.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  576.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  577.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  578.     </p>

  579.     <p>

  580.       On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.

  581.     </p>

  582.     <p>

  583.       Je ne traque pas ta navigation mais mon

  584.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  585.       conserve des logs d’accès.

  586.     </p>

  587.   </div>

  588. </footer>

  589. <script type="text/javascript">

  590.   ;(_ => {

  591.     const jumper = document.getElementById('jumper')

  592.     jumper.addEventListener('click', e => {

  593.       e.preventDefault()

  594.       const anchor = e.target.getAttribute('href')

  595.       const targetEl = document.getElementById(anchor.substring(1))

  596.       targetEl.scrollIntoView({behavior: 'smooth'})

  597.     })

  598.   })()

  599. </script>