Linting

1. What is a Linter?

A linter is a static code analysis tool that flags programming errors, bugs, stylistic errors, and suspicious constructs. Linters examine your code without actually executing it, helping you identify potential problems before runtime.

Think of linters as automated code reviewers that enforce consistent coding styles and catch common mistakes across your codebase. They work by parsing your code into an Abstract Syntax Tree (AST) and running various rules against that structure.

Types of Issues Linters Can Detect

• Syntax errors and code that would likely cause runtime errors
• Code style issues (inconsistent spacing, missing semicolons, etc.)
• Potential bugs like unused variables or unreachable code
• Security vulnerabilities and unsafe patterns
• Accessibility issues in user interfaces

2. Why Use a Linter?

Linters bring tremendous value to development workflows for many reasons:

Catch Errors Early

Linters identify issues as you write code, before you even save the file. This “shift-left” approach to debugging means:

• Fewer bugs make it into production
• Less time spent debugging
• Reduced QA and testing cycles

// Without linting, this error might only be caught at runtime
function calculateTotal(prices) {
  let total = 0;
  
  // Typo in variable name would cause a runtime error
  for (const price of prces) {
    total += price;
  }
  
  return total;
}

// A linter would immediately flag the undefined variable 'prces'

Enforce Consistent Code Style

When working on a team, maintaining a consistent code style is crucial for readability and maintainability.

// Inconsistent style example
function  badlyFormattedFunction( name ) {
  if(name){
      return "Hello, "+name+"!";
  }else{
    return"Hello, stranger!";
  }
}

// After linting - consistent style
function wellFormattedFunction(name) {
  if (name) {
    return `Hello, ${name}!`;
  } else {
    return 'Hello, stranger!';
  }
}

Improve Code Quality

Linters help developers follow best practices and avoid antipatterns:

// Problematic code with potential memory leak
function createButtons() {
  for (var i = 0; i < 10; i++) {
    var button = document.createElement('button');
    button.innerText = 'Button ' + i;
    
    // This creates closures over 'i' that may cause unexpected behavior
    button.addEventListener('click', function() {
      console.log('Clicked button ' + i);
    });
    
    document.body.appendChild(button);
  }
}

// Linter would suggest using 'let' instead of 'var' and potentially
// other improvements to the event handling pattern

Facilitate Learning

For new developers, linters provide real-time feedback that teaches proper syntax, style, and patterns:

• Immediate feedback on incorrect practices
• Suggestions on how to improve code
• Explanations of why certain patterns are problematic

Streamline Code Reviews

When linters enforce style and catch basic issues, code reviewers can focus on architecture, logic, and design decisions instead of formatting and syntax issues.

3. Popular Linters

A few popular linters are:

• ESLint
• TSLint (legacy) / TypeScript ESLint
• Stylelint

Many languages have their own linters, which we will not cover in this guide.

• Pylint/Flake8 for Python
• RuboCop for Ruby
• PHP_CodeSniffer for PHP
• SwiftLint for Swift

In this guide, we’ll focus on ESLint.

ESLint

ESLint is the most widely used JavaScript linter. It’s highly configurable and extensible with plugins for various frameworks and libraries.

Key features:

• Strong community support
• Good documentation
• Extensible with plugins
• Fully customizable ruleset
• Plugin system for framework-specific rules
• Automatic code fixing capabilities
• Integration with build tools and CI/CD pipelines

4. Setting up ESLint in VSCode

Step 1: Install the ESLint Extension

1. Open VSCode
2. Go to the Extensions view (click the square icon on the sidebar or press Ctrl+Shift+X / Cmd+Shift+X)
3. Search for “ESLint”
4. Install the ESLint extension by Microsoft

Step 2: Install ESLint in Your Project

Open your terminal in your project directory and run:

# Using npm
npm install eslint --save-dev

# Using yarn
yarn add eslint --dev

Step 3: Initialize ESLint Configuration

Run the ESLint initialization command:

# Using npx (comes with npm)
npx eslint --init

# Or if you installed ESLint globally
eslint --init

This will launch an interactive setup that asks several questions:

1. How would you like to use ESLint? - Choose “To check syntax, find problems, and enforce code style”
2. What type of modules does your project use? - Choose based on your project (usually “JavaScript modules (import/export)”)
3. Which framework does your project use? - Select your framework (React, Vue, None, etc.)
4. Does your project use TypeScript? - Yes/No based on your project
5. Where does your code run? - Browser, Node, or both
6. How would you like to define a style for your project? - Choose a popular style guide or “Answer questions about your style”
7. Which style guide? - If you chose a popular style, select one (Airbnb, Standard, Google, etc.)
8. What format do you want your config file to be in? - JavaScript, JSON, or YAML

After answering, ESLint will create a configuration file (.eslintrc.js, .eslintrc.json, or .eslintrc.yml) in your project.

Step 4: Configure Auto-Fix on Save (Optional)

To enable automatic fixing of issues when you save a file:

1. Open VSCode Settings (File > Preferences > Settings, or Ctrl+,)
2. Search for “eslint”
3. Find and check “ESLint: Fix On Save”

Or add this to your settings.json:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

5. Common ESLint Rules

First, when configuring ESLint, you can extend a popular style guide like Airbnb or Standard. This will automatically include many of the rules for you.

// .eslintrc.js
module.exports = {
  extends: 'airbnb',
};

However, you may want to configure additional rules or override the defaults. Here are some popular rules you might want to configure:

Code Quality Rules

// .eslintrc.js
module.exports = {
  // Extend the Airbnb style guide
  extends: 'airbnb',
  // Any overrides go in the rules section
  "rules": {
    // Disallow unused variables
    "no-unused-vars": "error",
    
    // Require === instead of ==
    "eqeqeq": "error",
    
    // Disallow console.log statements
    "no-console": "warn",
    
    // Require default case in switch statements
    "default-case": "warn"
  }
};

Style Rules

// .eslintrc.js
module.exports = {
  extends: 'airbnb',
  "rules": {
    // Enforce consistent indentation (2 spaces)
    "indent": ["error", 2],
    
    // Require semicolons
    "semi": ["error", "always"],
    
    // Use single quotes for strings
    "quotes": ["error", "single"],
    
    // Require space before blocks
    "space-before-blocks": "error"
  }
};

Resources

• 🎥 Video: How to Set Up ESLint (22 mins) - Understanding and configuring ESLint rules
• 🎥 Video: Complete ESLint Setup Tutorial (22 mins)
• ESLint Documentation
• TypeScript ESLint
• Stylelint Documentation
• Airbnb JavaScript Style Guide