PrepKitBeta
Languages›The Language Ecosystem & Tooling›Linters & Code Formatters

Linters & Code Formatters

The Language Ecosystem & Tooling

As a software project grows, and more developers contribute, maintaining a consistent and high-quality codebase becomes a major challenge. Two essential tools that help solve this problem are linters and code formatters.

While they both analyze source code, they have different primary goals:

  • Linter: A tool that analyzes code to find potential bugs, stylistic errors, and suspicious constructs. Its goal is to improve the quality and correctness of the code.
  • Code Formatter: A tool that automatically reformats code to conform to a specific style guide. Its goal is to ensure consistency in the codebase's appearance.

Linters

A linter acts like an automated code reviewer that catches common mistakes before the code is even run or reviewed by a human.

What do linters check for?

  1. Potential Bugs:
    • Using a variable before it has been assigned a value.
    • Code that is unreachable (e.g., after a return statement).
    • Infinite loops.
  2. Stylistic Errors / Code Smells:
    • Variables that are declared but never used.
    • Functions with too many parameters or too much complexity.
    • Inconsistent naming conventions (e.g., mixing camelCase and snake_case).
  3. Security Vulnerabilities:
    • Using dangerous functions like eval().
    • Detecting hardcoded secrets or API keys.
  4. Best Practices:
    • Enforcing that promises are handled correctly (e.g., with .catch()).
    • Suggesting the use of modern language features over outdated ones.

By integrating a linter into your workflow (e.g., in your code editor or as a pre-commit hook), you get instant feedback, helping you write better code and learn best practices.

Popular Linters by Ecosystem:

  • JavaScript/TypeScript: ESLint (the de facto standard), TSLint (deprecated).
  • Python: Pylint, Flake8, Ruff (a new, extremely fast linter written in Rust).
  • Java: Checkstyle, PMD, SpotBugs.
  • C#: Built into the .NET Compiler Platform (Roslyn).
  • Go: go vet and golint.

Example: ESLint (JavaScript)

Consider this piece of JavaScript code:

// This code works, but has issues.
function greet(name) {
    var message = "Hello, " + name;
    // This variable is never used.
    var unused = "test";
    // '==' allows type coercion, which can be buggy. '===' is preferred.
    if (name == null) {
        return "Hello, Guest!";
    }
    return message
}

ESLint would flag several issues here:

  • 'unused' is assigned a value but never used. (no-unused-vars)
  • Use 'const' or 'let' instead of 'var'. (no-var)
  • Use '===' to compare with 'null'. (eqeqeq)
  • Unnecessary return statement. (no-useless-return) - depending on config.

Code Formatters

Have you ever been in a code review that devolved into an argument over tabs vs. spaces, or where to put a curly brace? These debates are a waste of time and energy.

A code formatter is an opinionated tool that automatically rewrites your code to have a single, consistent style.

The process:

  1. You write code in whatever messy way you like.
  2. You run the formatter (e.g., on file save, or before committing).
  3. The tool parses your code into an Abstract Syntax Tree and then rewrites it from scratch according to its style rules.

What do formatters control?

  • Tabs vs. spaces and indentation width.
  • Maximum line length.
  • Spacing around operators and parentheses.
  • Placement of curly braces.
  • Consistent use of single vs. double quotes.

The primary benefit is consistency. When all the code in a project looks the same, it's easier to read and understand. It also allows developers to focus on the logic of the code during reviews, not the style.

Popular Code Formatters:

  • JavaScript/TypeScript: Prettier (the most popular, highly opinionated).
  • Python: Black, autopep8.
  • Go: gofmt (built into the language, a major reason for Go's consistent style).
  • Rust: rustfmt.
  • Java/C#: Often built into IDEs like IntelliJ IDEA and Visual Studio.

Example: Prettier (JavaScript)

Your messy code:

const my_function= ( a,b ) => {
  if(a > 10){ return a+b; }
    else { return a-b }
}

After running Prettier:

const my_function = (a, b) => {
  if (a > 10) {
    return a + b;
  } else {
    return a - b;
  }
};

Linter vs. Formatter

Linters and formatters work best together.

  • The formatter handles all the purely stylistic rules (whitespace, line breaks, etc.).
  • The linter handles all the code quality and potential bug rules (unused variables, logical errors).

Many teams configure their linter to disable all stylistic rules that the formatter already handles, to avoid conflicts.

A typical workflow:

  1. A developer writes code in their editor.
  2. On save: The code formatter (e.g., Prettier) automatically runs, cleaning up the style. The linter (e.g., ESLint) also runs, showing quality warnings directly in the editor.
  3. On commit: A pre-commit hook runs both the formatter and the linter on the changed files, preventing any code that doesn't meet the project's standards from being committed.

Summary

  • Linters are for code quality. They find potential bugs, enforce best practices, and flag "code smells." (e.g., ESLint, Pylint).
  • Code Formatters are for code consistency. They automatically reformat code to a single, unified style, ending debates about spacing and line breaks. (e.g., Prettier, Black).
  • These tools are essential for team collaboration, as they ensure the entire codebase is clean, consistent, and high-quality.
  • The best practice is to use them together and automate their execution using editor integrations or pre-commit hooks.
Back to Course