davidbgk
/
larlet-fr-david-cache
Observar 1
Favorito 0
Fork 0
Código Versões 0 Atividade
A place to cache linked articles (think custom and personal wayback machine)
Você não pode selecionar mais de 25 tópicos Os tópicos devem começar com uma letra ou um número, podem incluir traços ('-') e podem ter até 35 caracteres.
400 Commits
1 Branch
Tag: fa3f33c410
Branches Tags
${ item.name }
Criar branch ${ searchTerm }
de fa3f33c410
${ noResults }
larlet-fr-david-cache/cache/cfdfe70dc1d0b6d3a9695c5dd36.../index.md

index.md 12KB
Original Visão normal Histórico

Add cache data
4 anos atrás
​
​
​
​
 12345 
  1. title: Auto-formatting JavaScript Code Style

  2. url: https://medium.com/@addyosmani/auto-formatting-javascript-code-style-fe0f98a923b8

  3. hash_url: cfdfe70dc1d0b6d3a9695c5dd3610b3e

  4. 

  5. <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><h2 name="29c0" id="29c0" class="graf--h2">Auto-formatting JavaScript Code Style</h2><p name="b239" id="b239" class="graf--p graf--empty"><br/></p><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><h3 name="61ad" id="61ad" class="graf--h3">JSCS</h3><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><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><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><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><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><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><h3 name="1e26" id="1e26" class="graf--h3">Auto-formatting JS to match a Style Guide. OMG!</h3><p name="e3e6" id="e3e6" class="graf--p graf--empty"><br/></p><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><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><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><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><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><h3 name="ea3f" id="ea3f" class="graf--h3">Auto-formatting JS Code Style in Sublime</h3><p name="7618" id="7618" class="graf--p graf--empty"><br/></p><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><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><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><h4 name="89d4" id="89d4" class="graf--h4">Setup</h4><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><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><h4 name="b581" id="b581" class="graf--h4">Usage</h4><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><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><p name="5d1d" id="5d1d" class="graf--p"><strong class="markup--strong markup--p-strong">BOOM!</strong>:</p><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><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><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><h3 name="3483" id="3483" class="graf--h3">Wrapping up</h3><p name="5b2c" id="5b2c" class="graf--p graf--empty"><br/></p><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><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>