The Best Way to Improve & Automate your Code Quality!
Tags: productivity, learning, webdev, beginners
Published: 2020-03-17 18:22:02

---
title: The Best Way to Improve & Automate your Code Quality!
published: true
description: Linting powerful way to keep your code in line with the latest standards and to keep a shared codebase following a set of chosen principles. We'll run through the what, how and why's explaining how you should go about implementing this solution in your code today.
tags: productivity, learning, webdev, beginners
canonical_url: http://blog.designpuddle.com/web-development/the-secret-way-to-improve-and-automate-your-code-quality
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/aied61dibu8dd9fxuiv2.png
---

<p>I was recently on the <a href="https://thefrontendpodcast.site/episodes/episode-3/">Front End Podcast (Listen to it here)</a> with <a href="http://twitter.com/kendalmintcode">Rob Kendall.</a> We discussed something I'm quite passionate about. <strong>Making code better!</strong> This means how to follow best practices and coding standards we have assigned and how we can do all this quickly, easily and<em> (most importantly)</em> automatically. So what's the secret I hear you ask! What is this magic silver bullet! </p>

<!-- wp:heading -->
<h2><strong>The Secret?&nbsp;Use a Linter!</strong></h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>This<strong> Static Code Analysis</strong> tool is a powerful way to keep your code in line with the latest standards and to keep a shared codebase following a set of chosen principles. We'll run through the <strong>what, how and why's</strong> explaining how you should go about implementing this solution in your code today.</p>
<!-- /wp:paragraph -->

<!-- wp:quote {"className":"is-style-default"} -->
<blockquote class="wp-block-quote is-style-default"><p><strong>The term "lint" is derived from the name of the undesirable bits of fibre and fluff found in sheep's wool.</strong></p></blockquote>
<!-- /wp:quote -->

<!-- wp:image {"align":"center","width":190,"height":151} -->
<div class="wp-block-image"><figure class="aligncenter is-resized"><img src="https://bloximages.newyork1.vip.townnews.com/nuvo.net/content/tncms/assets/v3/editorial/2/7b/27b742c6-e46c-5c6c-a49b-0408aa63c752/58bddc32b3977.image.jpg?resize=400%2C319" alt="Image result for lint image" width="190" height="151"/></figure></div>
<!-- /wp:image -->

<!-- wp:heading -->
<h2>What is it?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Linting is the name for the process of checking your code against a set of pre-determined rules. Whether those are language dependant or specific to your project. <strong>Linting&nbsp;</strong>will run a program or tool that will analyse the code for potential errors.&nbsp;It will make those warnings or errors clear to you and give you the option to fix them.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Linting tools are especially useful for interpreted languages like JavaScript and Python. These languages lack a compiling phase that would usually throw errors prior to execution, and you can feel a big benefit when using it in these instances.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>The Linting Tools Available to use.</h3>
<!-- /wp:heading -->

<!-- wp:image {"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://img.icons8.com/clouds/2x/hand-tools.png" alt="Image result for tools png"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>So now we know what it is? How can we use it in our project? Surely we need a linter specific to each language! Well, you're right! But luckily, every major language already has linters available for them, and some are even language agnostic.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You can find a detailed list here: <a href="https://en.wikipedia.org/wiki/List_of_tools_for_static_code_analysis">https://en.wikipedia.org/wiki/List_of_tools_for_static_code_analysis</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>A nice curated list from the above would comprise <a href="https://eslint.org/"><strong>EsLint</strong></a> this is a popular Linter for JavaScript which you may have heard of, or may already be using. <a href="https://www.sonarqube.org/">SonarQube</a> is a popular language-agnostic option that works from Java to PHP to Python. C# and .Net in general has <a href="https://github.com/StyleCop/StyleCop">StyleCop</a> and FxCop which are often used together.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>So, you might have heard of some of these already, but what are the benefits of using this, why should you invest your time to add these tools to your solutions?</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Some of you may be thinking... what about <a href="https://prettier.io/">Prettier</a>? Prettier is not really a linter, as it doesn't check code per se. Prettier is an opinionated code formatter. It saves you time and energy and stops <strong>arguments </strong>about line length, <strong>bracket placement</strong> and most importantly, <strong>"Tabs vs Spaces"</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://media0.giphy.com/media/hXIFhglHONa0T40kCi/giphy.gif" alt="Image result for argument gif"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>The best thing is you can tailor it to your needs. It can be run during development or added as a step when committing to your source code repository. It's flexible enough to work around your situation.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Why should I use it?</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Everybody wants to write clean code, they want to follow best practices, they want to keep up to date with the latest and greatest ways to create code.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Linting</strong> is important to reduce errors and improve the overall quality of your code. It also helps to make your code consistent over time, and across teams and individuals. It's great at catching problematic bits of code early on, and in most cases, lets you know how to fix them! Let's look at the pros and cons.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>Linting Strengths.</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Linting will flag up any <strong>unused variables</strong> in your code. Any potentially <strong>unreachable </strong>bits of code! (Did you test an if statement by changing the logic to a 1 == 1 comparison?) It can also help to find issues with <strong>indexing beyond</strong> array lengths. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>It will catch errors early, we all know the best time to find a bug is during development. The longer a bug is left undetected and unresolved, the costlier it is to fix.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","width":270,"height":270} -->
<div class="wp-block-image"><figure class="aligncenter is-resized"><img src="https://cdn0.iconfinder.com/data/icons/leto-survey-rating/64/__rating_position_cons_pros-512.png" alt="Image result for pros sign png" width="270" height="270"/></figure></div>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>Linting Weaknesses.</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Linting can produce a lot of errors and warnings. Sometimes as many as there are lines of source code. This can lead to a lot of false positives and may deter you from fixing what is <strong>really important</strong>. That's why setting up the rules, to begin with, is crucial.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Linting will <strong>identify violations </strong>of best practices. It <strong>won't teach</strong> you those best practices. Developers can use linting to improve their code, but they might not replicate the standards that are advised.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Linting is inexpensive in actual time and cost, <strong>but </strong>it can decrease developer productivity, as they fix or alter the code to conform to these rules. </p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>How to enforce it?</h2>
<!-- /wp:heading -->

<!-- wp:image {"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://img.icons8.com/plasticine/2x/law.png" alt="Image result for law png"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>So this is the <strong>tricky </strong>bit. As we can see, there are pros and cons to the notion of linting. Do you want to get your product shipped quickly or conforming with best practices that may speed up future work? There is always a <strong>trade-off, </strong>and this is something to remember.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Do you <strong>expect your team</strong> to fix all the issues every time they change something? Should they just have to keep what they have changed tidy? Maybe you just want to inform them, hoping they make any relevant changes?</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center"} -->
<div class="wp-block-image"><figure class="aligncenter"><img src="https://img.icons8.com/plasticine/2x/high-five.png" alt="Image result for high fivepng"/></figure></div>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3>The Happy Medium</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>What I've found is that some level of linting is useful, especially in unison with a code review process. Having <strong>basic things fixed</strong> before they go for code review means generic checks are no longer made by the human eye. It also allows us to <strong>focus on the important aspects,</strong>rather than the subjective. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We should check if we can refactor the code? Whether it would benefit from being split up, either into different files or functions? Is there sufficient documentation? Do we have tests covering important functionality? Is it scalable and secure?</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I like to think that we should all follow <strong>The&nbsp;Boy&nbsp;Scout&nbsp;Rule</strong> - making sure to leave any code we touch code better than we found it, this means we will gradually remove any technical debt without having to do it all at once, or as specific tasks.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","width":300,"height":299} -->
<div class="wp-block-image"><figure class="aligncenter is-resized"><img src="https://i.pinimg.com/originals/95/5a/22/955a22ceda215f5b9e477b487670527e.png" alt="Image result for boy scout up png" width="300" height="299"/></figure></div>
<!-- /wp:image -->

<!-- wp:quote {"className":"is-style-default"} -->
<blockquote class="wp-block-quote is-style-default"><p>Leave your code better than you found it.</p><cite>The boy scout rule<br></cite></blockquote>
<!-- /wp:quote -->

<!-- wp:heading {"level":3} -->
<h3>My JavaScript Setup - The Trifecta</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>As I mentioned above, JavaScript benefits greatly from the introduction of linting, but as the language is so open, putting in some guidelines is a necessity. Here is the configuration I add to my <span style="background-color: rgb(232, 234, 235);"><b><strong>solution</strong></b></span><strong> </strong>to enforce linting during the development process.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>I use <strong>3 external libraries</strong> to aid me in my endeavours.</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><li><a href="https://github.com/typicode/husky">Husky</a> is the easy way to configure Git hooks. For those that do this manually, having it all set in the top-level config, standardises and simplifies the process massively.</li></ul>
<!-- /wp:list -->

<!-- wp:list -->
<ul><li>The next is <a href="https://github.com/okonet/lint-staged">Lint Staged.</a> As mentioned before, you want your developers to have a happy medium of what to fix. If they are working on a file, I think we should all follow the <a href="https://deviq.com/boy-scout-rule/">Boy Scout Rule</a>, meaning we clean up the code before resubmitting.</li></ul>
<!-- /wp:list -->

<!-- wp:list -->
<ul><li>Last, but not least. <a href="https://www.npmjs.com/package/pretty-quick">Pretty Quick</a> will run your Prettier settings on all staged files. It's similar to <strong>Lint Staged</strong> but taking care of the formatting instead.</li></ul>
<!-- /wp:list -->

<!-- wp:heading {"level":3} -->
<h3>Install and Configure Packages</h3>
<!-- /wp:heading -->

<!-- wp:image {"id":1657} -->
<figure class="wp-block-image"><img src="https://i2.wp.com/blog.designpuddle.com/wp-content/uploads/2020/03/npm-lint.png?fit=1000%2C535" alt="" class="wp-image-1657"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>So anyway, once you've installed the three packages, you can add the following lines to your <strong>package.json</strong>. This will lint all your JavaScript and TypeScript files if you're using any, and format your staged files before committing. If the linters throw any errors, we display them to the user and block them from proceeding!</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>The Configuration - Package.json</h4>
<!-- /wp:heading -->

<!-- wp:image {"id":1656} -->
<figure class="wp-block-image"><img src="https://i0.wp.com/blog.designpuddle.com/wp-content/uploads/2020/03/package-hooks.png?fit=1000%2C751" alt="" class="wp-image-1656"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>The sections above add the tools installed into the Git pipelines. Husky is our middle-man and you can see that in its <strong>hooks</strong> section the <strong>pre-commit hook&nbsp;</strong>is&nbsp;configured<strong>&nbsp;</strong>to run <strong>PrettyQuick </strong>on our staged files and also the <strong>Lint-Staged</strong> section afterwards. This runs <strong>eslint </strong>and <strong>tslint </strong>on the globs specified, which in this case are <strong>all staged .ts and .js files</strong> it finds.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Lastly, we must set up the rules, we want to use during this process. </p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>TsLint Config</h4>
<!-- /wp:heading -->

<!-- wp:image {"id":1659} -->
<figure class="wp-block-image"><img src="https://i2.wp.com/blog.designpuddle.com/wp-content/uploads/2020/03/tslint-config.png?fit=1000%2C640" alt="//tslint.json - BASE
{
  &quot;extends&quot;: [&quot;tslint:latest&quot;, &quot;tslint-angular&quot;, &quot;tslint-config-prettier&quot;],
  &quot;rulesDirectory&quot;: [&quot;codelyzer&quot;],
  &quot;rules&quot;: {
    &quot;array-type&quot;: false,
    &quot;arrow-parens&quot;: false,
    &quot;interface-name&quot;: false,
    &quot;max-classes-per-file&quot;: false,
    &quot;member-access&quot;: false,
    &quot;no-consecutive-blank-lines&quot;: false,
    &quot;deprecation&quot;: {
      &quot;severity&quot;: &quot;warning&quot;
    }
  }
}" class="wp-image-1659"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>The important things here are the rule sets we are extending. <strong>tslint:latest&nbsp;and&nbsp;tslint-angular&nbsp;</strong>are taking care of the fundamentals. We can overwrite any of these base rules below, and I would recommend finding that happy medium for yourself. I have left a couple of rules that make sense for me.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>tslint-config-prettier&nbsp;</strong>is required so tslint <strong>does not</strong> format our code, that is Prettiers job and where the prettier config comes into play.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4>Prettier Config</h4>
<!-- /wp:heading -->

<!-- wp:image {"id":1658} -->
<figure class="wp-block-image"><img src="http://blog.designpuddle.com/wp-content/uploads/2020/03/prettier-config-2.png" alt="" class="wp-image-1658"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>The best place to put your prettier config is a .pretterrc file. I have shown a  simple set of rules to get you started. The <a href="https://prettier.io/docs/en/configuration.html">Prettier Documentation of Configuration</a> is the best place to look for tailoring the setup to your needs.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3>The outcome?</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Here it is in action. You can see a <strong>git commit</strong> kicking off husky which in turn runs our tools! First <strong>Prettier </strong>fixes up any formatting, before <strong>eslint </strong>changes the <strong>let to const</strong> as it's never reassigned, and moves our class level declarations to the <strong>top of the file</strong>! Pretty neat right!</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1667,"align":"left","width":986,"height":530} -->
<div class="wp-block-image"><figure class="alignleft is-resized"><img src="http://blog.designpuddle.com/wp-content/uploads/2020/03/Linting-In-Action.gif" alt="Linting in Action Gif" class="wp-image-1667" width="986" height="530"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>So in conclusion, hopefully, you've understood what linting is, why to use it, and how to adapt it to your coding environment!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>I would love to hear of any other setup that works for you!&nbsp;There is&nbsp;always&nbsp;room&nbsp;for&nbsp;improvement. Please share your thoughts below!</strong></p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Sources and Further Reading</h2>
<!-- /wp:heading -->

<!-- wp:list -->
<ul><li><a href="https://en.wikipedia.org/wiki/Lint_(software)">https://en.wikipedia.org/wiki/Lint_(software)</a></li><li><a href="https://deviq.com/boy-scout-rule/">https://deviq.com/boy-scout-rule/</a></li><li> <a href="https://stackoverflow.com/questions/8503559/what-is-linting">https://stackoverflow.com/questions/8503559/what-is-linting</a> </li></ul>
<!-- /wp:list -->