|
12345 |
- title: Auto-formatting JavaScript Code Style
- url: https://medium.com/@addyosmani/auto-formatting-javascript-code-style-fe0f98a923b8
- hash_url: cfdfe70dc1d0b6d3a9695c5dd3610b3e
-
- <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 & 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>
|
