What is Linting

Linting is a term given to tools that handle style decisions in your code based on rules that you put in place. But what are we talking about when we discuss code styling?

Style in code can mean lots of things. Do you use tabs or spaces when indenting ne lines? How many spaces should a tab be equivalent to? Do you use semicolons or not? Is there a space between a function name and it's parentheses? The list goes on (seemingly) forever. These are decisions that are tedious to make in general, made even more tedious when you think about having to make them with every single project you're ever involved in.

Even scarier, what happens when you adopt a set of rules for yourself and become familiar with them only to then bring in more developers to your project? Do they know your rules? Do they care? Do they have their own rules?

Yeah... This is bad. So what do we do?

Linting

Linting to the rescue! But what is it?

Linting is a process by which you use a tool (and usually a configuration file) to predetermine certain style decisions about your code base.

Linters are those tools. Linters exist in every major programming language and they were designed to solve exactly the problem that we're imagining. Good developers understand the benefits of having easily readable, consumable, understandable (otherwise know as clean) code. The problem is that all developers have a different idea of what this means. This makes keeping a team of developers coding to specific standard a super duper pain.

Linters allow us to define a very specific set of rules that get checked and usually fixed on saving the file. Once these rules are in place, the dev need do nothing more than save the current file and let the linter work it's magic. This way, we don't have to manually enforce style rules and we can worry about what really maters, writing code.

ESLint

The first stop on our journey is going to take us to a tool called ESLint. ESLint is pretty much the gold standard when discussing linting in JS. It uses a collection of time tested tools to handle parsing (combing through) your code and applying any rules that you specify.

Rules?

Rules come in the form of an ESLint configuration file. Let's take a look at an example

// .eslintrc

{
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
        "semi": "error"
    }
}

This configuration file tells ESLint which version of JS to measure by, how to treat the module system, what sort of flavors (super-sets) of JS to be aware of, as well as specific style rules. In this case we are able to use any features available in ES6 including ESModules, we can write JSX in our JS files, and if we don't include semicolons at the end of our statements, we get errors.

Prettier

Prettier, as it's website states, is

An opinionated code formatter

This means that you can specify your style rules, use your linter to check on them, and then use Prettier to enforce them.

Configuration

Very similar to ESLint, Prettier has a configuration file that it will look for to execute style rules. Let's take a look at an example:

// .prettierrc

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

These rules should probably reflect the choices that you make in your ESLint config file.

ESLint AND Prettier

Wouldn't it be great if these tools had some sort of integration library that just matched everything up and made everything super easy and smooth to implement? I imagine you see where I'm going...

Enjoy your new clean experience!

Docs

• ESLint
• Prettier