Cleanup Your Code 🧹

Hello makers,

We’re all guilty of writing messy code. Sometimes, you just need to hack something together to make it work. Someday, someone is going to have to read your spaghetti code. It may even be future-you, years from now.

“It’s harder to read code than to write it.” — Joel Spolsky

But not to worry, there are plenty of tools to help us write cleaner, prettier code. Let's take a look at how to clean up our code.
 

Style Guides

Code style guides are an excellent starting point for how to structure your code. A style guide outlines virtually every decision for how to write code in a specific language. Decisions like tabs vs. spaces, semicolons or not, brackets on new lines, variable naming conventions, etc. Style guides are available for programming languages, and for specific frameworks. If you're coding something, there's likely a style guide for it.

Here are a few resources:
 

Google Style Guides

https://google.github.io/styleguide/
Google covers a wide range of programming languages, from C++ to JavaScript, to XML. Google manages enormous teams of programmers and huge codebases, so they're an excellent resource to emulate.
 

Airbnb

https://github.com/airbnb/javascript
If you're interested specifically in JavaScript, Airbnb offers thorough style guides for all aspects of it. Including React, CSS in JavaScript, and Sass. They also have their own Ruby style guide, since Airbnb is built on Rails.
 

Python

https://www.python.org/dev/peps/pep-0008/
Python has its own official code style guide. They even articulate why a style guide is important: A Foolish Consistency is the Hobgoblin of Little Minds.
 

GitHub

https://styleguide.github.com/
What better place to find a standard style guide than the largest code hosting platform in the world? They cover the languages they use to run GitHub, including JavaScript and Ruby.

 

Linters

Okay, so now you've picked a style guide, and you're coding perfectly, right? Not quite. Linters are a way to enforce those rules automatically. A linter will display warnings where your code doesn't match your desired style guide, and can even correct those inconsistencies for you. Most linters will integrate right into your preferred code editor.

Here are some popular linters:
 

ESLint

https://eslint.org/
One of the most popular JavaScript linters out there, ESLint will find and fix problems in your JavaScript code. Not only will it apply your recommended style guide to your code, but it will also look for issues like redeclaring constant variables, or referencing a variable that doesn't exist. And it integrates right into VSCode.
 

RuboCop

https://github.com/rubocop-hq/rubocop
RuboCop helps to enforce Ruby, Rails, Rspec, and Minitest style guides. Just install its gem as a development dependency, run rubocop in your Rails project directory, and watch the magic happen. And of course, here's the VSCode extension.
 

Prettier

https://prettier.io/
Prettier is a super-opinionated linter for JavaScript, HTML, CSS, GraphQL, and many other languages. If you're looking for one linter to rule them all, look no further. And it integrates with a wide range of editors, including VSCode.
 

What else?

There are lots more techniques you can use to keep your code clean. Once you have a code style and linter in place, you can further enforce these rules with continuous integration tools like Travis CI, CircleCI, or your own favorite CI service. And don't forget automated unit and integration tests. Having consistent, clean, standardized code will help your team (and your future self) to understand what your code does, and help prevent runtime errors due to sloppy programming.

“Any fool can write code that a computer can understand. Good programmers write code that humans can understand.” — Martin Fowler

Keep making, and thanks for reading! 🙌

Hit reply to tell me what you're making. I'm looking for anyone interested in talking about their own side-projects and maker journey, so speak up if you'd like to appear in Serial Maker. I'd also love to know what you thought of this issue, and what you want to hear about in the future. Check out the past editions if you missed them, and don't forget to continue the conversation on Discord! 
 

Until next week,
Craig 👋